SlideShare a Scribd company logo
Tools and Best Practices
for Coastal Web Maps
Carl Sack
University of Wisconsin Sea Grant
(Some) Options for Making Web Maps
Coast gis talk
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!
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: Tiles
All standards on http://www.opengeospatial.org
• Vital for interoperability!
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
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 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
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 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
Thank you! Questions?
Contact
Carl Sack
cmsack@wisc.edu
@northlandiguana
Resources
http://giscollective.org/tutorials/web-mapping
www.northlandia.com/pdf/coastalwebmaps.pdf

More Related Content

PPT
SUE AGILE Architecture (English)
Sabino Labarile
 
PDF
[WSO2Con EU 2017] Ballerina: Exploring Data Integration
WSO2
 
PDF
Annexure 2.3 n tier architecture
Mayank Sharma
 
PPTX
Web GIS Usability
Adam Conner
 
PDF
A production project's architecture with clojure
Jordi Llonch
 
PDF
Resume_RuiqiZhou_1012
Ruiqi Zhou
 
PPT
Amazon simple db
Dayanand Shanmugham
 
PPTX
CakePHP, cakePHP development Company
NetConnectWeb
 
SUE AGILE Architecture (English)
Sabino Labarile
 
[WSO2Con EU 2017] Ballerina: Exploring Data Integration
WSO2
 
Annexure 2.3 n tier architecture
Mayank Sharma
 
Web GIS Usability
Adam Conner
 
A production project's architecture with clojure
Jordi Llonch
 
Resume_RuiqiZhou_1012
Ruiqi Zhou
 
Amazon simple db
Dayanand Shanmugham
 
CakePHP, cakePHP development Company
NetConnectWeb
 

What's hot (18)

PDF
Simple cloud reference architecture
DaeMyung Kang
 
PPTX
Html 5 Overview
Aditi Rustagi
 
PDF
Single page application
Jeremy Lee
 
PPT
Bib frame
ccase2
 
PDF
Infinum Android Talks #04 - CouchBase Lite
Denis_infinum
 
PDF
Hawaii Pacific GIS Conference 2012: Real-Time Data Acquisitions - Bringing In...
Hawaii Geographic Information Coordinating Council
 
PPTX
Developing Efficient Web-based GIS Applications
Swetha A
 
PDF
East bay full stack developers meetup August 2019
Connor Leech
 
PPTX
Google apps engine
shubhravrat Deshpande
 
PDF
Google App Engine At A Glance
Stefan Christoph
 
PDF
Linux Hosting Training Course Level 1-6
Ramy Allam
 
PDF
Analysing Web GIS apps
M.Muneeb Ashraf
 
PPTX
Koha ILMS
Er Ankit Anand
 
PPTX
Meta cloud architecture for the mobile agile enterprise
Evarist Lobo
 
PPTX
Lamar University CAS HA
srinivasvaradaraj
 
KEY
Internet GIS
Iwan Setiawan
 
PPTX
Chag dashboard
C4CHealthGhana
 
PPTX
ODI 12c Installation and New Features
Canburak Tümer
 
Simple cloud reference architecture
DaeMyung Kang
 
Html 5 Overview
Aditi Rustagi
 
Single page application
Jeremy Lee
 
Bib frame
ccase2
 
Infinum Android Talks #04 - CouchBase Lite
Denis_infinum
 
Hawaii Pacific GIS Conference 2012: Real-Time Data Acquisitions - Bringing In...
Hawaii Geographic Information Coordinating Council
 
Developing Efficient Web-based GIS Applications
Swetha A
 
East bay full stack developers meetup August 2019
Connor Leech
 
Google apps engine
shubhravrat Deshpande
 
Google App Engine At A Glance
Stefan Christoph
 
Linux Hosting Training Course Level 1-6
Ramy Allam
 
Analysing Web GIS apps
M.Muneeb Ashraf
 
Koha ILMS
Er Ankit Anand
 
Meta cloud architecture for the mobile agile enterprise
Evarist Lobo
 
Lamar University CAS HA
srinivasvaradaraj
 
Internet GIS
Iwan Setiawan
 
Chag dashboard
C4CHealthGhana
 
ODI 12c Installation and New Features
Canburak Tümer
 
Ad

Similar to Coast gis talk (20)

PPTX
Going Mobile with HTML5
John Reiser
 
PPTX
AWS Public Cloud solution for ABC Corporation
Manpreet Sidhu
 
PDF
Windows Azure introduction
Microsoft Iceland
 
PPTX
HTML5 Programming
hotrannam
 
PPTX
Getting Started with the ArcGIS API for JavaScript, Esri, Julie Powell, Antoo...
Esri Nederland
 
PPTX
What's New for the Windows Azure Developer? Lots!!
Michael Collier
 
PDF
Building real time data-driven products
Lars Albertsson
 
PDF
Serverless Data Platform
Shu-Jeng Hsieh
 
PPTX
Amazon AWS vs Azure Cloud vs Kubernetes
Stridely Solutions
 
PDF
Cloud computing aws -key services
Selvaraj Kesavan
 
PPTX
ECS19 - Mustafa Toroman, Sasa Kranjac - SOUP TO NUTS: MICROSOFT AZURE POWERCLASS
European Collaboration Summit
 
PDF
Serverless SQL
Torsten Steinbach
 
PDF
NWGISS: The Web GIS Software Suite for Interoperable Access and Manipulation ...
The HDF-EOS Tools and Information Center
 
PDF
Hpc lunch and learn
John D Almon
 
PDF
JustGiving | Serverless Data Pipelines, API, Messaging and Stream Processing
BEEVA_es
 
PDF
JustGiving – Serverless Data Pipelines, API, Messaging and Stream Processing
Luis Gonzalez
 
PDF
Michael stack -the state of apache h base
hdhappy001
 
PDF
KoprowskiT_session1_SDNEvent_WASDforBeginners
Tobias Koprowski
 
PPTX
AWS re:Invent 2013 Recap
Barry Jones
 
PPTX
2014 09-12 lambda-architecture-at-indix
Yu Ishikawa
 
Going Mobile with HTML5
John Reiser
 
AWS Public Cloud solution for ABC Corporation
Manpreet Sidhu
 
Windows Azure introduction
Microsoft Iceland
 
HTML5 Programming
hotrannam
 
Getting Started with the ArcGIS API for JavaScript, Esri, Julie Powell, Antoo...
Esri Nederland
 
What's New for the Windows Azure Developer? Lots!!
Michael Collier
 
Building real time data-driven products
Lars Albertsson
 
Serverless Data Platform
Shu-Jeng Hsieh
 
Amazon AWS vs Azure Cloud vs Kubernetes
Stridely Solutions
 
Cloud computing aws -key services
Selvaraj Kesavan
 
ECS19 - Mustafa Toroman, Sasa Kranjac - SOUP TO NUTS: MICROSOFT AZURE POWERCLASS
European Collaboration Summit
 
Serverless SQL
Torsten Steinbach
 
NWGISS: The Web GIS Software Suite for Interoperable Access and Manipulation ...
The HDF-EOS Tools and Information Center
 
Hpc lunch and learn
John D Almon
 
JustGiving | Serverless Data Pipelines, API, Messaging and Stream Processing
BEEVA_es
 
JustGiving – Serverless Data Pipelines, API, Messaging and Stream Processing
Luis Gonzalez
 
Michael stack -the state of apache h base
hdhappy001
 
KoprowskiT_session1_SDNEvent_WASDforBeginners
Tobias Koprowski
 
AWS re:Invent 2013 Recap
Barry Jones
 
2014 09-12 lambda-architecture-at-indix
Yu Ishikawa
 
Ad

More from Carl Sack (10)

PPTX
Teaching Open Web Mapping - AAG 2017
Carl Sack
 
PPTX
Invisible nation: Mapping Sioux treaty boundaries
Carl Sack
 
PPTX
MapStudy talk
Carl Sack
 
PPTX
Teaching Open Web Mapping - AutoCarto 2016
Carl Sack
 
PPTX
WebGIS is Fun and So Can You
Carl Sack
 
PPTX
Open Web Mapping: How do we teach this stuff?
Carl Sack
 
PPT
Whither the Wikimap?
Carl Sack
 
PPT
Crowdsourcing and Participation in Cartography (G572 Guest Lecture)
Carl Sack
 
PPT
Adapting Web Mapping Curriculum to Open Source Technologies
Carl Sack
 
PPT
Carl_Sack_Wikimapping
Carl Sack
 
Teaching Open Web Mapping - AAG 2017
Carl Sack
 
Invisible nation: Mapping Sioux treaty boundaries
Carl Sack
 
MapStudy talk
Carl Sack
 
Teaching Open Web Mapping - AutoCarto 2016
Carl Sack
 
WebGIS is Fun and So Can You
Carl Sack
 
Open Web Mapping: How do we teach this stuff?
Carl Sack
 
Whither the Wikimap?
Carl Sack
 
Crowdsourcing and Participation in Cartography (G572 Guest Lecture)
Carl Sack
 
Adapting Web Mapping Curriculum to Open Source Technologies
Carl Sack
 
Carl_Sack_Wikimapping
Carl Sack
 

Recently uploaded (20)

PPTX
Agile Chennai 18-19 July 2025 Ideathon | AI Powered Microfinance Literacy Gui...
AgileNetwork
 
PPTX
Applied-Statistics-Mastering-Data-Driven-Decisions.pptx
parmaryashparmaryash
 
PDF
Software Development Methodologies in 2025
KodekX
 
PDF
Doc9.....................................
SofiaCollazos
 
PDF
Orbitly Pitch Deck|A Mission-Driven Platform for Side Project Collaboration (...
zz41354899
 
PDF
Peak of Data & AI Encore - Real-Time Insights & Scalable Editing with ArcGIS
Safe Software
 
PDF
Structs to JSON: How Go Powers REST APIs
Emily Achieng
 
PDF
Tea4chat - another LLM Project by Kerem Atam
a0m0rajab1
 
PDF
Automating ArcGIS Content Discovery with FME: A Real World Use Case
Safe Software
 
PDF
Economic Impact of Data Centres to the Malaysian Economy
flintglobalapac
 
PDF
Get More from Fiori Automation - What’s New, What Works, and What’s Next.pdf
Precisely
 
PDF
Data_Analytics_vs_Data_Science_vs_BI_by_CA_Suvidha_Chaplot.pdf
CA Suvidha Chaplot
 
PDF
NewMind AI Weekly Chronicles - July'25 - Week IV
NewMind AI
 
PDF
The Future of Artificial Intelligence (AI)
Mukul
 
PDF
Accelerating Oracle Database 23ai Troubleshooting with Oracle AHF Fleet Insig...
Sandesh Rao
 
PDF
OFFOFFBOX™ – A New Era for African Film | Startup Presentation
ambaicciwalkerbrian
 
PDF
Research-Fundamentals-and-Topic-Development.pdf
ayesha butalia
 
PPTX
Dev Dives: Automate, test, and deploy in one place—with Unified Developer Exp...
AndreeaTom
 
PDF
How ETL Control Logic Keeps Your Pipelines Safe and Reliable.pdf
Stryv Solutions Pvt. Ltd.
 
PPTX
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
Agile Chennai 18-19 July 2025 Ideathon | AI Powered Microfinance Literacy Gui...
AgileNetwork
 
Applied-Statistics-Mastering-Data-Driven-Decisions.pptx
parmaryashparmaryash
 
Software Development Methodologies in 2025
KodekX
 
Doc9.....................................
SofiaCollazos
 
Orbitly Pitch Deck|A Mission-Driven Platform for Side Project Collaboration (...
zz41354899
 
Peak of Data & AI Encore - Real-Time Insights & Scalable Editing with ArcGIS
Safe Software
 
Structs to JSON: How Go Powers REST APIs
Emily Achieng
 
Tea4chat - another LLM Project by Kerem Atam
a0m0rajab1
 
Automating ArcGIS Content Discovery with FME: A Real World Use Case
Safe Software
 
Economic Impact of Data Centres to the Malaysian Economy
flintglobalapac
 
Get More from Fiori Automation - What’s New, What Works, and What’s Next.pdf
Precisely
 
Data_Analytics_vs_Data_Science_vs_BI_by_CA_Suvidha_Chaplot.pdf
CA Suvidha Chaplot
 
NewMind AI Weekly Chronicles - July'25 - Week IV
NewMind AI
 
The Future of Artificial Intelligence (AI)
Mukul
 
Accelerating Oracle Database 23ai Troubleshooting with Oracle AHF Fleet Insig...
Sandesh Rao
 
OFFOFFBOX™ – A New Era for African Film | Startup Presentation
ambaicciwalkerbrian
 
Research-Fundamentals-and-Topic-Development.pdf
ayesha butalia
 
Dev Dives: Automate, test, and deploy in one place—with Unified Developer Exp...
AndreeaTom
 
How ETL Control Logic Keeps Your Pipelines Safe and Reliable.pdf
Stryv Solutions Pvt. Ltd.
 
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 

Coast gis talk

  • 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!
  • 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 [email protected] @northlandiguana Resources http://giscollective.org/tutorials/web-mapping www.northlandia.com/pdf/coastalwebmaps.pdf