Advanced GIS

In-class Exercise

Part 1: Creating styles with Mapbox

  1. Create an account with Mapbox if you don't already have one.
  2. Go to Styles and create a new style. When picking a template style, start with anything but the Satellite Streets template. Basic is fine for this activity.
  3. Consider what kind of features you want to highlight on your map try to highlight those features, optionally considering how your final project data would look on top of the basemap you are making.
  4. Edit the style. Attempt to change various properties in components and in specific layers.
  5. Complete the following sentences (you may be asked to share some responses):
    1. "One nice thing about Mapbox Studio is..."
    2. "Something I don't quite understand about Mapbox Studio is..."
    3. "I want to use Mapbox Studio to..."

Part 2: Using Mapbox styles in Carto

  1. Publish your style from Part 1.
  2. Click the Share button once you publish it, then select Third party and CARTO.
  3. Copy the URL next to Integration URL.
  4. Open a Carto map.
  5. Click on the base map (the bottom layer).
  6. Under Source scroll over to and click Mapbox, then click the + under Style and paste the url you copied from Mapbox under the Mapbox tab.
  7. Click Add basemap and your basemap from Mapbox should appear.
  8. Publish your Carto map (you don't need to use JavaScript here).

Part 3: Using Mapbox styles in JavaScript

  1. Copy the same basemap URL from Mapbox as you did in Part 2.
  2. Edit a Glitch site with a Carto map made in JavaScript, using this one if you need a starter.
  3. In JavaScript, paste the URL from Mapbox on the line starting with L.tileLayer.
  4. Confirm that your Mapbox style is visible as the basemap.
  5. Share a link to your Glitch site in the chat.

Part 4: Adding your own data to Mapbox

  1. Download today's data.
  2. From your Mapbox dashboard, go to Tilesets > New Tileset and upload the disputed-areas zip file in today's data.
  3. Continue with your style from earlier or create a new one.
  4. While editing your style, click + in the top of the Layers tab, then click the Source button. Find and click on the data you uploaded under Unused sources.
  5. Click Style and style the layer.