1 / 31

Web Cartography

http://co2.digitalcartography.org/. Web Cartography. Lecture Outline. Where we are and how we got here Classifying web maps Design considerations for web maps Technology for web mapping Great examples. Trends in Cartographic Teaching and Research. Thematic Mapping

appell
Download Presentation

Web Cartography

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. http://co2.digitalcartography.org/ Web Cartography

  2. Lecture Outline • Where we are and how we got here • Classifying web maps • Design considerations for web maps • Technology for web mapping • Great examples

  3. Trends in Cartographic Teaching and Research Thematic Mapping Empirical Cognitive Research: Cartographic ‘Rules’ Communication Vision, Cognition, Perception Eye Movement Studies Map Use and Map Design Volume of teaching and research Peak Community Mapping Web mapping Geo Visualization Human/machine interaction VGI Rise Decline Comeback GIS data input analysis Social theory Government production Delivery of data (packets) 10s 60s 70s 80s 90s 00s year

  4. Where we are • Web 2.0 • Cloud computing • User-generated information (VGI, citizen science) • Democratization of mapping (data software) • Multimedia • Interactivity = constant change

  5. Web vs print Pros Cons Access Quality/credibility/deconstruction Hardware constraints Network speed Fleetingness……. Too much, visual overload Data integrity • Access • Low cost • Multimedia • Interactivity • Up to date

  6. Classifying web maps (Kraak)

  7. Static, tremendous data, could be automatically updated: http://demographics.coopercenter.org/DotMap/index.html • Dynamic and interactive http://tipstrategies.com/geography-of-jobs/ http://metrocosm.com/global-immigration-map/

  8. Design considerations for web maps • Avoid simply posting copies of maps designed for print? • Consider characteristics, limitations, and opportunities of the web • Too complicated and animated…. Think back to vision, cognition, perception….

  9. Technology

  10. Tacloban Philippines after typhoon Haiyan Source: https://twitter.com/RBanick/status/400055778435809280

  11. How to do this? • HTML: HyperText Markup Language • Functional: level 1, level 2, cell, table etc • Structure interactive documents to be interpreted by your browser and lets you navigate through information • CSS: Cascading Style Sheets • Instructions to the browser on how to render the text • More about control over how results look • Define how documents look • CARTO uses CSS

  12. Javascript (different from java) • Way of animating HTML in the browser • When you have a service that performs geocoding and delivers results in geojson format – javascript is used to do something with geojson in browser – for example show points on map canvas • Any animated control on web maps is in javascript • CartoDB uses Javascript • D3 uses Javascript

  13. Cartodb.js is a Javascript library CSS

  14. HTML

  15. https://d3js.org/

  16. http://bl.ocks.org/mbostock/4060606

  17. Required Skills • Programming(Javascript) • Web Design (HTML +CSS) • Spatial Databases (PostgreSQL) • Linux Servers (how to host visuals)

  18. Resources • http://eloquentjavascript.net/ • Let’s Make a Map (D3) https://medium.com/@mbostock/command-line-cartography-part-1-897aa8f8ca2c • https://www.mapbox.com/ • http://leafletjs.com/ • http://postgis.net/ (database extender for PostgreSQL)

  19. Examples • http://www.nytimes.com/interactive/2013/04/08/business/global/asia-map.html • http://www.nytimes.com/interactive/2012/08/24/us/drought-crops.html • http://www.washingtonpost.com/wp-srv/special/local/dc-recovered-guns/ • http://www.globalforestwatch.org/map/9/49.97/-118.94/ALL • http://hint.fm/wind/ • http://www.ft.com/intl/cms/s/2/ad4ef6a4-503d-11e3-befe-00144feabdc0.html#axzz2lgzv1Rzb

  20. Designed by Alan McConchie, Lead Cartographer, Stamen Maps ArcGIS shape files Images, AI output Openstreetmap Google maps Stamen toner etc What is CARTO?

More Related