Advanced Interactive Web Mapping, Programming, and Design

In-class Excercises: Mapbox Studio

Part 1: Mapbox Studio

  1. Create an account with Mapbox if you don't already have one.
  2. Log in to your Mapbox account.
  3. Once logged in, go to the Studio page (link in the top right).
  4. Under Styles, click New style and pick a style to start from.
  5. Edit your style. Use some zoom-independent styling and zoom-dependent styling. Look into filtering data in some layers.
  6. Publish your style.

Part 2: Mapbox tiles in Leaflet

  1. Open a Leaflet map you have made in the past, either for in-class work or an assignment.
  2. In your Mapbox account, under Styles, click the button to the right of Edit for one of your styles. Then click Share & use.
  3. On the next page, to the right under Use style in other apps, select CartoDB and copy the resulting URL in the box under it.
  4. Back in your Leaflet map, replace the URL for the L.tileLayer with the URL you just copied.
  5. When you're done you should have a map with Mapbox tiles as in this jsbin.

Part 3: Mapbox tiles in CartoDB

  1. Open a CartoDB map you have made in the past.
  2. Find and click the Change basemap button in the lower left.
  3. Click the + next to Yours.
  4. Under XYZ (not Mapbox), paste the same URL you used in the previous section.
  5. Your CartoDB map should now be using your Mapbox style.

Part 4: Adding data to Mapbox Studio

  1. Pick a relatively large dataset you would like to add to your Mapbox style. Consider MapPLUTO for one of the boroughs if you don't have anything in mind.
  2. In your Mapbox account, go to Tilesets and upload the data as a new tileset. If it is a shapefile leave it zipped.
  3. Edit your style.
  4. Click New layer and select the data you uploaded as the tileset next to Source.
  5. Consider adding filters if appropriate.
  6. Click Create layer.
  7. Style the layer as you would any other layer.
  8. Publish the resulting style.