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

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 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) 60s 70s 80s 90s 00s 10s year

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

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

Classifying web maps (Kraak) Static Dynamic View only Interactive

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

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

Technology

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

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

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

Cartodb.js is a Javascript library CSS

HTML

https://d3js.org/

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

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

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)

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

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