390 likes | 474 Views
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
E N D
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 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
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 Quality/credibility/deconstruction Hardware constraints Network speed Fleetingness……. Too much, visual overload Data integrity • Access • Low cost • Multimedia • Interactivity • Up to date
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/
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….
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
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?