Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Mapping 101

Web Mapping 101

an introduction to web mapping made with Alan McConchie

Beth Schechter

February 15, 2015
Tweet

More Decks by Beth Schechter

Other Decks in Technology

Transcript

  1. Basics + Basemaps ALAN MCCONCHIE & BETH SCHECHTER // STAMEN

    DESIGN & MAPTIME Sunday, February 15, 15
  2. What is a Web Map? It is a kind of

    digital map that works in a browser. Sunday, February 15, 15
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. Layers Base map tile Add’l tile layer CartoDB, Leaflet UTF

    grid Mapbox,, CartoDB Sunday, February 15, 15
  10. Layers Base map tile Add’l tile layer CartoDB, Leaflet UTF

    grid Mapbox,, CartoDB Sunday, February 15, 15
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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