Tools and Best Practices

for Coastal Web Maps

Carl SackUniversity of Wisconsin Sea Grant

(Some) Options for Making Web Maps

Web Mapping: A Basic Framework

1. Data Storage1. Location2. Types3. Projection & CRS

2. Web Mapping Services1. OGC Standards

3. Client Libraries and APIs1. API2. Code library3. Framework4. Plug-in

Disclaimer: suggestions are based on broad survey knowledge and should not be considered definitive!

Data Storage

Where to put it?

• Local host machine:– Easy access to hardware– Maintenance and limited speed

• Cloud host (Amazon, Esri, CartoDB)– High bandwidth, no hardware

maintenance– Distributed back-ups– Ongoing cost

Data Storage• Vector data:

– Best stored in SQL database– PostGIS, MySQL, SQLite, Oracle, Microsoft – KML, GML, Shapefile, GeoJSON most popular

transfer formats– OGR2OGR to change formats easily (GDAL/OGR

Library)

• Raster data:– No advantage to database vs. file structure– GeoTIFF most popular for georeferenced

images– Web services (WMS, Tiles) in JPEG and/or PNG

Data Storage• Projection and CRS

– Store in same SRS as it will be used– Projections required for slippy map:

• EPSG:3857 (EPSG:900913) – Spherical Mercator

– Advantageous for complex shapes (coastlines, e.g.)

• EPSG:4326 – Plate Carrée (less common)– Less distortion poleward

• Other projections – Must be rectangular to cover the whole globe

continuously and without wild distortion– Equal-area projections more appropriate for

choropleth maps, but rare. Supported by OpenLayers and Google Maps API.

– Unlikely to need equal-area for coastal features

Web Services

OGC Standards:• WMS: Most well-used; map images• WFS: Vector data• WPS: Server-side data processing• CSW: Catalog Services• WMTS: TilesAll standards on http://www.opengeospatial.org

• Vital for interoperability!

Web Services

REST InterfaceClient:http://neowms.sci.gsfc.nasa.gov/wms/wms?VERSION=1.3.0&REQUEST=GetMap&LAYERS=MOD_LSTD_CLIM_M&WIDTH=960&HEIGHT=600&FORMAT=image/jpeg&CRS=CRS:84&BBOX=-180,-90,180,90

Server:

Most Common:•Map Server•GeoServer•ArcGIS For Server

Web Services

WMS process:• Style the data• Render the image• Send the image to client

WFS process:• Reformat the data• Send GML to client• Data styled and rendered by client

Web Services

Tiles (WMTS):• Server generates

tiles on the fly or serves pre-rendered images

• Caching increases speed of delivery

• Stored in specialized directory structure:

http://www.server.com/tiles/{z}/{x}/{y}.png

Client-Side Development

Some vocabulary:• Code Library: script that simplifies

map display and interaction in a client browser

• API: a partly-hidden code library controlled by a proprietary service

• Framework: an all-in-one solution• Plug-in: a program that runs compiled

code inside of a browser (Flash, Flex, Java, Silverlight)

Client-Side Development

Popular APIs:• Google Maps API

v3– Popular for public

mash-ups, but size-limited, costs

• ArcGIS Online API– JavaScript, iOS,

Android flavors, but large, license costs

Client-Side DevelopmentPopular open-source

libraries:• OpenLayers

– Oldest, most robust open-source library, but huge and hard to figure out

• Leaflet – Lightweight, good

documentation, easy to extend, lots of plugins

• D3– Vector data loading and

mapping with many projection, styling, and interaction possibilities

Client-Side Development

Other Cool Stuff:• GeoMoose, Geomajas, GeoExt

– All-in-one frameworks• CartoDB

– Entierly cloud-based toolchain• Geocommons, ArcGIS Online Viewer

– Online sources of data and applications for making simple web maps

• Ushahidi Crowdmap– Crowdsourced geographic information

Some ResourcesWright, D., N. Dwyer, and V. Cummins (eds.). 2011. Coastal

Informatics: Web Atlas Design and Implementation (Information Science Reference), New York, NY, USA: 33-52.

Wolfgang, K. and D.M. Danko (eds.). 2012. Springer Handbook of Geographic Information (Springer), New York, NY, USA: 61-122.

Davis, S. 2007. GIS for Web Developers: Adding ‘Where’ to Your Web Applications, The Pragmatic Bookshelf, Raleigh, NC, USA, 176p.

Roth R.E., R.G. Donohue, C.M. Sack, T.R. Wallace, and T.M.A. Buckingham. 2013. “A Process for Assessing Emergent Web Mapping Technologies.” In: Proceedings of the 26th International Cartographic Conference. Dresden, Germany: August 25-30. www.northlandia.com/pdf/RothEtAl2013.pdf

OGC Standards: http://www.opengeospatial.org

Thank you! Questions?

ContactCarl Sack

cmsack@wisc.edu@northlandiguana

Resourceshttp://giscollective.org/tutorials/web-mappingwww.northlandia.com/pdf/coastalwebmaps.pdf