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.
There are 3 resources you will need to follow along with this guide:
Download
button and download a GeoJSON file, which includes the coordinates and feature properties for 17 Bike Sheds in the New York City area.First let's create a new map style in Mapbox Studio:
Go to your Styles page in your mapbox account.
Click the New style button.
Click the blue Start with Standard button and the style editor will open automatically.
Double click Untitled in the upper left corner of your browser and rename your style. For example, rename the title to NYC Bike Sheds
.
Now you will create a new layer and add the data you downloaded earlier to your map.
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.Next, check that your data has loaded correctly by following these steps:
New York City
in the text field.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.
Missing Data
Let's style the data on our map by changing the circles' color, adding a stroke, and adjusting the size of the circles.
circle radius
to 10px.#675df4
and paste it into the text input next to HSL
.100
to 75
.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.
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:
To add a layer to a slot, follow these steps:
nyc-bike-parking-shelter
layer into the Top
slot by clicking and dragging the 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.
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.
So far you added data as a layer and customized the look of that data. Now you will customize the basemap.
light
, the font
, and the visibility
of certain basemap features.POI Labels
, to toggle this off.
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.
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
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:
nyc-bike-parking-shelter
layer and then click the Style tab if it's not already opened.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.
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.
Take a look at the Publish style section of the Mapbox Studio Manual to find out more information about publishing with Mapbox Studio.