Intermediate map design workshop

nid-map-design-workshop.md

Objective: Make students comfortable with creating interactive map based visualizations that can be used in their projects.

Tool chain: mapbox editor > overpass-turbo > openstreetmap > geojson.io > mapbox studio (download) > github pages > mapbox.js > turf.js

Duration: 16 hours (3 days)

Schedule

Background Tasks

• Participants can explore existing maps and geo visualizations on the web and select one of choice that interests them.
• Signup for free with Mapbox with your .edu email
• Play around with the Mapbox editor!

Day 1

• Introduction (1hr)
• About the workshop
• Every participant can share one pre chosen map they would like to replicate and introduce themselves
• Understanding Maps (1hr)
  • Brief history about role of maps in shaping the world today
  • Technical Terminology - Projection, coordinates, scale, rasters, vectors, objects, properties
  • Elements of Cartography - Points, lines, polygons, symbology, typography
• Understanding Map Data(1hr)
• Student task - Create a map dataset of your favourite eating locations
• Use overpass turbo to extract relevant OSM Features into a geojson file
• Use geojson.io to curate your geojson and add properties
• Lunch
• Visualizing Map Data using Mapbox Studio (3hrs)
• Student task - Create a restaurant map of your city
• Using data sources
• CartoCSS basics
• Style exploration
• Showcase (1hr)
• Students show and discuss their explorations
• Homework - Create map poster for A3 size print

Day 2

• Poster showcase and discussion (1hr)
• Advanced cartography with Mapbox Studio (5hrs including lunch)
• Student task - Create a pedestrian style map of Cubbon Park (Reference Map)
• Markers
• Typography
• Textures
• Composting
• Attachments
• Using your own map (1hr)
• Exporting to image
• Simple project in Mapbox editor
• Basics of Github pages
• Basics of Mapbox.js
• Showcase (1hr)
• Students show and discuss their output
• Homework: Create any map based interactive visualization and host it online

Day 3

• Showcase and closing (2hrs)

Evaluation

Student performance will be judged on the following outputs:

• Map Poster(40%)
• Interactive Visualization(60%)

Participant Checklist

• Work machine with broadband internet connection
• Install required tools
• Do background tasks

Learning Resources

• Fundamentals of Mapping
• Mapbox Guides

Documented Workshops

• NID Bangalore, 2013
• NID Bangalore, 2015

Notes

• Distributing printed handouts with fundamental concepts and definitions can be very helpful

Common questions

• Doubts over tagging rules on openstreetmap
• Confusion over mapbox terminology: editor, studio, styles, data, features, layers, projects
• Confusion over workflow to add a new custom source to existing style in studio
• How to remove imported data file from mapbox editor project
• Customizing markers for imported geojson data in mapbox.js
• Extracting centroids from areas in osm data

Poking through the common questions to see if we have resources that could help -- would love to hear if any of these things might have been useful!

• Doubts over tagging rules on openstreetmap
  • I'm afraid this one is sort of difficult and pretty common... LearnOSM is sometimes helpful but I don't think it's that great.
• Confusion over mapbox terminology: editor, studio, styles, data, features, layers, projects
  • We have a glossary that's pretty good for keeping track of terminology
• Confusion over workflow to add a new custom source to existing style in studio
  • Did you use the Mapbox Studio Source Quickstart here? Curious about gaps in that.
• How to remove imported data file from mapbox editor project
  • Added "How do I remove imported data in Mapbox Editor?" to our list of future FAQs.
• Customizing markers for imported geojson data in mapbox.js
  • Katy just published an awesome guide about customizing markers that could help here!
• Extracting centroids from areas in osm data
  • Not sure if you mean once you've converted it from native OSM format, but turf-centroid could be helpful here.
  • I also made a little online utility called Centroids as a Service (give it a second to spin up, only uses one Heroku dyno) that might be helpful here.