Skip to main content

Getting started with Mapbox Standard in Studio

Additional Developer Resources

This tutorial will walk you through the process of adding custom data to a style that uses the Mapbox Standard basemap. By the end you'll have uploaded data with the locations of bike sheds in New York City, styled that data, and customized the look and feel of the basemap.

Prerequisites​

There are 3 resources you will need to follow along with this guide:

  • Mapbox account. Sign up for a free account on Mapbox.
  • Data. Click the blue Download button and download a GeoJSON file, which includes the coordinates and feature properties for 17 Bike Sheds in the New York City area.
arrow-downDownload GeoJSON

Step 1: Create a new style​

First let's create a new map style in Mapbox Studio:

  1. Go to your Styles page in your mapbox account.
    • If you haven't done so already, you will need to have an account and be logged in.
  2. Click the New style button.
  3. Click the blue Start with Standard button and the style editor will open automatically.
  4. Double click Untitled in the upper left corner of your browser and rename your style. For example, rename the title to NYC Bike Sheds.

Step 2: Import your data on a new layer​

Now you will create a new layer and add the data you downloaded earlier to your map.

  1. In the style editor, click the word Layers in the top left corner, to make sure you are in the Layers tab.
  2. Click the + button to create a new layer.
  3. Click Upload data then drag and drop in the nyc-bike-parking-shelters.geojson file you downloaded.
    • You can also click the Select a file button to find the file on your computer.
  4. Click the blue confirm button once you've selected the GeoJSON file.
  5. Once your data has finished uploading, click the None selected dropdown under Source and a list of datasets will appear.
  6. Select the dropdown named nyc-bike-parking-shelters with a few random characters at the end of the title and then select the option that appears with the same name.
  7. Click the Style tab above Source to view your data on the globe.

Step 3: Check your data​

Next, check that your data has loaded correctly by following these steps:

  1. Click the search icon.
  2. Type New York City in the text field.
  3. Select the New York City from the search results.

Once selected, rotate the globe around to New York and you should be able to see a set of black circles on the map. These circles represent each of the New York bike sheds.

Troubleshooting

Missing Data

  • If your map is missing data, set Type to circle Circle in the Select data tab. This setting displays a circle for every bike shelter on the map. Token Expired
  • If your GEOJSON won't load when you drag it into the upload panel, try refreshing the page.

Step 4: Style your layer​

Let's style the data on our map by changing the circles' color, adding a stroke, and adjusting the size of the circles.

  1. Make sure you are on the Style tab by clicking the word Style to the left of Select data.
  2. To change the circles' size, click Radius and change the circle radius to 10px.
  3. To change the circles' color, click Color and change the color. You can do this by adjusting the sliders or pasting a color value.
    • For this example, copy the hexcode #675df4 and paste it into the text input next to HSL.
  4. To make the circles transparent, click the slider button, and change the text input next to A (known as the alpha) from 100 to 75.
  5. To add a stroke to the circles, click Stroke Width and set it to 1px. This will make the stroke visible.
  6. To change the stroke color, click Stroke Color and change the color like you did in step 3.
    • For this example, set the Stroke Color to match the transparent center. To do so, copy the hexcode #675df4 and paste it into the text input next to HSL.

This bright color helps the circles stand out against the map colors, and the slight transparency makes it possible to distinguish circles where they are overlapping.

Step 5: Place your layer in a slot​

If you look at your map, the circles render above everything else by default. This means they will spawn over paths, buildings and even street and city names.

To change where a layer renders on your map, use Slots. The positions of these slots have been selected to fit most use-cases of custom-layers.

There are three slots in the Mapbox Standard basemap:

  • Top: Layers in the top slot are placed above point-of-interest (POI) labels and behind Place and Transit labels.
  • Middle: Layers in the middle slot are placed above roads and behind 3D buildings and POIs.
  • Bottom: Layers in the bottom slot are placed above polygons (for example: land, landuse, water, etc.)

To add a layer to a slot, follow these steps:

  1. On the left side of the screen, click the chevron-down button next to Mapbox Standard to view the basemap's slots.
  2. Place the nyc-bike-parking-shelter layer into the Top slot by clicking and dragging the drag icon into the dotted lines around the Top slot.
    • We'll use the top slot for this example, because it's the ideal slot for adding custom POI data layers.
Layer render order

Any layers at the top of the layers list (where they appear by default), will render above every element in the Mapbox Standard basemap and above any layers in a slot. It’s worth testing your layer in different positions to see which works for your data and use case.

Step 6: Customize the basemap​

So far you added data as a layer and customized the look of that data. Now you will customize the basemap.

  1. Click on the title Mapbox Standard in the Layers tab to open the configuration panel for the Standard basemap.
    • This menu includes options to change the light, the font, and the visibility of certain basemap features.
  2. Click the dropdown next to Font to select a font. Let's use Roboto Mono for this example.
  3. Under Visibility, click the toggle next to POI Labels, to toggle this off.
    • The extra POI context is unnecessary in this example, because we don't have labels for each of these data points. So in this case, we'll turn off POI label visibility on this map.
  4. Lastly, change the Light presets configuration. For this example, let's change the preset from Day to Night.
Basemap customization

Standard makes it quick to tweak your basemap to fit your needs while guaranteeing a beautiful, well-crafted map experience. All the available options to customize (or configure) the basemap are visible by clicking on the import of the Standard basemap in the Layers tab. Learn more about the philosophy behind this type of customization in the Map Design Getting Started guide.

Step 7: Adjust your map's lighting​

If we look at our map, you'll see our circles now appear black.

This is because Mapbox Standard uses dynamic 3D lighting to light the whole map like a scene. So when we set the Light preset to Night, the light was dimmed and also dimmed out your custom layer. You may want this behavior in some use cases, for example when adding custom layers that need to integrate into the basemap subtly like a custom landuse or custom road layers.

But in this example, we want circles to still be bright, so users can better view the data on the map.

To keep the brightness of the circles when using Night as the light option, you can adjust the emissive-strength.

Emissive strength

Emissive-strength determines how much light a layer emits. This default to a value of 0. Learn more in the Layer spec.

To adjust the emissive-strength of your circles, follow these steps:

  1. Click on the nyc-bike-parking-shelter layer and then click the Style tab if it's not already opened.
  1. At the bottom of the Style tab, click on Emissive Strength
  2. Back at the top of the tab, under Circle emissive strength, change the value to 1.0.

By setting the emissive strength to 1, the layer would be around the same brightness in the Day mode as it is in Night mode.

Step 8: Publish your changes​

When you have finished editing your new map style, you will publish your changes, so you can use them with other mapbox products, such as Mapbox GL JS, the Mapbox Mobile SDKs, etc.

  1. Click the Publish button in the upper right side of the screen to open the publishing menu.
    • When you click the publish button, a window will display the original style (or the previous version) and current version containing the edits you made in a side by side comparison.
  2. If you're happy with the edits you made, click Publish button at the bottom of the window.
  3. Click the okay button.
  4. If you'd like to share your map, click the Share button in the top toolbar to see all the share options.
    • Your style will now be available to share from a variety of tools and applications.
To learn more about publishing

Take a look at the Publish style section of the Mapbox Studio Manual to find out more information about publishing with Mapbox Studio.

Additional Developer Resources
Was this page helpful?