Web Mapping 101

an introduction to web mapping made with Alan McConchie

Transcript

1. Basics + Basemaps ALAN MCCONCHIE & BETH SCHECHTER // STAMEN DESIGN & MAPTIME Sunday, February 15, 15
2. Housekeeping! Download Mapbox Studio www.mapbox.com Create CartoDB Account www.cartodb.com Sunday, February 15, 15
3. Sunday, February 15, 15
4. Sunday, February 15, 15
5. Sunday, February 15, 15
6. Sunday, February 15, 15
7. Sunday, February 15, 15
8. Sunday, February 15, 15
9. Sunday, February 15, 15
10. Sunday, February 15, 15
11. Sunday, February 15, 15
12. Sunday, February 15, 15
13. Sunday, February 15, 15
14. Sunday, February 15, 15
15. BASICS Sunday, February 15, 15
16. TODAY! Basic Web Mapping Principles History of Web Maps Make some maps! Sunday, February 15, 15
17. What is a Web Map? It is a kind of digital map that works in a browser. Sunday, February 15, 15
18. What is a Web Map? It is a kind of digital map that works in a browser, like: OpenStreetMap Google Maps Mapquest Mapbox MapZen Sunday, February 15, 15
19. A little history... Sunday, February 15, 15
20. ArcGIS // 1969 Sunday, February 15, 15
21. MapQuest // 1996 Sunday, February 15, 15
22. Google Maps // 2005 Sunday, February 15, 15
23. The Tile 256 x 256 pixels Same boundaries Faster loading! Sunday, February 15, 15
24. Tiles loading. Sunday, February 15, 15
25. Slippy map. Sunday, February 15, 15
26. Mercator projection. Sunday, February 15, 15
27. Tiles x Zoom Levels Each zoom level has its own set of tiles. The number of tiles increases exponentially. Zoom 0 = 1 tile. Zoom 1 = 4 tiles. Zoom 2 = 16 tiles. Zoom 3 = 64 tiles ...etc. through Zoom 21 and beyond! Sunday, February 15, 15
28. Tiles = images Each tile is a raster image, and it can be linked to individually. http://tile.openstreetmap.org/4/2/6.png Sunday, February 15, 15
29. Tiles = images Each tile is a raster image, and it can be linked to individually. http://tile.openstreetmap.org/4/2/6.png tile server zoom level x/y value Sunday, February 15, 15
30. Tiles = images Each tile is a raster image, and it can be linked to individually. http://tile.openstreetmap.org/4/2/6.png tile server zoom level x/y value Sunday, February 15, 15
31. Tiles = images Each tile is a raster image, and it can be linked to individually. http://tile.openstreetmap.org/4/2/6.png tile server zoom level x/y value Sunday, February 15, 15
32. Layers Sunday, February 15, 15
33. Layers Basemap tile Sunday, February 15, 15
34. Layers Base map tile Sunday, February 15, 15
35. Layers Base map tile Add’l tile layer CartoDB, Leaflet Sunday, February 15, 15
36. Layers Base map tile Add’l tile layer CartoDB, Leaflet UTF grid Mapbox,, CartoDB Sunday, February 15, 15
37. Layers Base map tile Add’l tile layer CartoDB, Leaflet UTF grid Mapbox,, CartoDB Sunday, February 15, 15
38. Layers Base map tile Add’l tile layer CartoDB, Leaflet UTF grid Mapbox,, CartoDB Vector Layers Points, lines, polygons Leaflet, D3 Sunday, February 15, 15
39. Layers Base map tile Add’l tile layer CartoDB, Leaflet UTF grid Mapbox,, CartoDB Vector Layers Points, lines, polygons Leaflet, D3 Sunday, February 15, 15
40. Data Browser Sunday, February 15, 15
41. Raster Tiles Browser Sunday, February 15, 15
42. parksconservancy.org/map Sunday, February 15, 15
43. Vector Raster Browser Sunday, February 15, 15
44. pinterest.com Sunday, February 15, 15
45. Vector Browser Sunday, February 15, 15
46. mapzen.com/blog/tangram-a-mapping-library Sunday, February 15, 15
47. Vector Browser This is the FUTURE! Sunday, February 15, 15
48. File Types Shapefiles • Invented by ESRI, don’t work well on the web • BUT! Shapefiles in a .zip will work on CartoDB KML Invented by Keystone (became Google Earth) GeoJSON Like JSON, only for Geo Sunday, February 15, 15
49. Simplest possible Leaflet map sta.mn/v5h Sunday, February 15, 15
50. Simplest possible Leaflet map Sunday, February 15, 15
51. Resources! Javascript Libraries • Leaflet • OpenLayers • Modest Maps / Polymaps • D3 (vector data layer only) More about that here: http://exposedata.com/talk/d3-geo/#0 APIs* • Google Maps API • Bing Maps API • Nokia HERE Maps API • ESRI ArcGIS API * some are not open source Sunday, February 15, 15
52. Resources! Tiles you can use • OpenStreetMap • CloudMade • Stamen • MapBox • MapQuest Make your own tile server* • TileServer.php • TileStache • TileCache • TileStream • TileStream • mbtiles-server *This is very hard for beginners. Sunday, February 15, 15
53. maptime.io/lessons-resources/ Sunday, February 15, 15
54. Toolset Rundown I need to make my own tiles! TileMill: upload multiple geo datasets to style your base tiles Mapbox Studio: all OSM data is available for you. I need to visualize a dataset easily! CartoDB: upload any geo data set in tabular format, as well as Shapefiles in .zip format I heart .js already. Leaflet: make lovely, light slippy maps D3: great for data layers on top of a leaflet map or just cool weird animated things. Sunday, February 15, 15
55. Let’s get mapping! Sunday, February 15, 15