Getting started with Mapbox Standard in Studio

Join the Mapbox Developers Discord Communityarrow-right

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.

Getting started

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

• Mapbox account. Sign up for a free account on Mapbox.
• Data. Download this GeoJSON file, which includes the coordinates and feature properties for 17 Bike Sheds in the New York City area.

arrow-downDownload GeoJSON

Create a new style

To begin, you will create a new map style in Mapbox Studio:

1. Log in to your Mapbox account and navigate to your Styles page.
2. Click the New style button. Click the option to Start with Standard. The style editor will open automatically.
3. Rename your style so you can find it later. In the Mapbox Studio style editor, click the title field in the upper left side of your screen and change the title of your style to NYC Bike Sheds.

Style your data

Create a new layer

Now you will add a new layer with the data you downloaded earlier.

1. In the style editor, make sure you are in the Layers tab.
2. Click Upload data, then drag in the GeoJSON file you downloaded or choose it from your file system.
3. Once it has loaded click None selected under Source and choose the source. If you can’t find it try searching by the name nyc-bike-parking-shelters. The name will likely have a few extra characters at the end.
4. Set the Type of the layer to circle Circle. This will display a circle for every bike shelter in the data.

To check that your data loaded correctly, go to New York City on your map. You can click the search button on the right side of your screen to find a location on the map.

Style your layer

Now you will add some light styling to these circles by changing the color, adding a stroke, and adjusting the size of the circles.

1. Click the Style tab to the left of Select data.
2. Click Radius and change the circle radius to 10px.
3. Click Color and change the color. To follow along, copy and paste #675df4 as the color. Turn down the alpha of the color partway, to about 75%.
4. Click Stroke Width and set it to 1px. This will make the stroke visible.
5. Click Stroke Color  and set it to a darker color. To follow along, copy and paste #675df4 as the color.

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

Place layer in a slot

If you look at the map you can tell the circles are above everything else on the map. This is the default behavior for new layers and works for many use cases.

To place a layer below certain map features you can use Slots. Mapbox map designers have placed slots at optimal positions in the basemap so you can insert your custom layers into the map.

Slots

There are three slots in the Mapbox Standard basemap. Here are recommendations for what to place in each:- Top: Layers placed in this slot are placed above point-of-interest (POI) labels and behind Place and Transit labels. This is an ideal slot for adding custom POI data layers.- Middle: Layers placed in this slot are placed above lines (for example: roads) and behind 3D buildings.- Bottom: Layers placed in this slot are placed above polygons (for example: land, landuse, water, etc.)In Studio, hover over the slot name to see a description of that slot.

Try using slots:

• Click the chevron-down on Mapbox Standard to view the basemap's slots.
• Use the drag drag handle on your layer to drag it into the Middle slot.

If you zoom in, you’ll notice that the 3D buildings hide the circles, which is not ideal in this case. For this type of layer, filled with points or symbols, the Top slot is better. Drag your layer into the Top slot.

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.

Customize the map

Configure the basemap

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

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 visibly 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.

Click on Mapbox Standard in the Layers tab. This will open a configuration panel for the Standard basemap, which includes options to change the light, the font, and the visibility of certain basemap features.

1. Change the font to Roboto Mono. This gives the map a “techy” look.
2. The extra point-of-interest context in this map is unnecessary, so turn off the visibility of POI Labels.
3. To continue with that “techy” look, change the Light presets configuration to Night.

Use dynamic lighting

You may have noticed that your circles appeared black when you changed the Light preset to Night.

This is because Mapbox Standard uses dynamic 3D lighting to light the whole map like a scene. So when the light was dimmed, it also dimmed out your custom layer. Sometimes that’s the behavior you may want, for example when adding custom layers that need to integrate into the basemap subtly (for example: custom landuse or custom road layers). In this case though, the desired behavior is for the circles to still be bright and visible even in the dark mode.

To keep the brightness of the circles when using Night as the light option, you can adjust the emission-strength, which defaults to 0.

Emission strength

Emission-strength determines how much light a layer emits. Learn more in the Layer spec.

1. Click on your layer and make sure you are on the Style tab.
2. Choose Emission Strength from the layer properties and change the emission strength to 1.0.

Setting the emission strength to 1 would roughly mean that the layer would be the same brightness in the Day mode as in the Night light mode.

Publish and Share

When you have finished editing your new map style, you will publish your changes.

1. Click the Publish button in the upper right side of the screen. When you click the publish button, a window will display the original style (or the previous version) with the current version containing the edits you made.
2. If you're happy with the edits you made, click Publish. Your style will now be available to share from a variety of tools and applications. Click the Share button in the top toolbar to see all options.

Take a look at the Publish style section of the Mapbox Studio Manual to learn more.

Join the Mapbox Developers Discord Communityarrow-right

Was this page helpful?