This document provides tools and best practices for creating coastal web maps. It discusses options for data storage, including hosting locally or in the cloud. Common data formats like Shapefiles, GeoJSON and GeoTIFF are recommended. It also covers web mapping services like WMS, WFS and WMTS based on OGC standards. Popular client-side development options are presented, such as APIs from Google Maps and ArcGIS, and open-source libraries like OpenLayers and Leaflet. Resources for further information are provided.

1. Tools and Best Practices
for Coastal Web Maps
Carl Sack
University of Wisconsin Sea Grant

2. (Some) Options for Making Web Maps

4. Web Mapping: A Basic Framework
1. Data Storage
1. Location
2. Types
3. Projection & CRS
2. Web Mapping Services
1. OGC Standards
3. Client Libraries and APIs
1. API
2. Code library
3. Framework
4. Plug-in
Disclaimer: suggestions are based on broad survey knowledge
and should not be considered definitive!

5. 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

6. 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

7. 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

8. Web Services
OGC Standards:
• WMS: Most well-used; map images
• WFS: Vector data
• WPS: Server-side data processing
• CSW: Catalog Services
• WMTS: Tiles
All standards on http://www.opengeospatial.org
• Vital for interoperability!

9. Web Services
REST Interface
Client:
http://neowms.sci.gsfc.nasa.gov/wms/wms?
VERSION=1.3.0&REQUEST=GetMap&LAYERS=MOD_LSTD_CLIM_M&WIDTH=960&HEIG
HT=600&FORMAT=image/jpeg&CRS=CRS:84&BBOX=-180,-90,180,90
Server:
Most Common:
•Map Server
•GeoServer
•ArcGIS For Server

10. 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

11. 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

12. 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)

13. 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

14. Client-Side Development
Popular 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

15. 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

16. Some Resources
Wright, 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

17. Thank you! Questions?
Contact
Carl Sack
cmsack@wisc.edu
@northlandiguana
Resources
http://giscollective.org/tutorials/web-mapping
www.northlandia.com/pdf/coastalwebmaps.pdf