Mapbox Studio and iOS

Join the Mapbox Developers Discord Communityarrow-right

A newer version of the Maps SDK is available

This page uses v6.4.1 of the Mapbox Maps SDK. A newer version of the SDK is available. Learn about the latest version, v11.5.1, in the Maps SDK documentation.

The Mapbox Studio style editor is Mapbox’s tool for creating custom map styles. It also serves as an excellent tool for rapidly prototyping dynamic maps and runtime styling interactions for iOS.

Prototype with data

Using Mapbox Studio is an efficient way to test data presentation assumptions as quickly as possible. With Mapbox Studio, you can prototype with existing Mapbox data, import a small subset of your own real data, or create placeholder data.

Prototyping with Mapbox data

The default Mapbox Streets tileset might offer data like your own that you can use to style before you swap in your own data at runtime.

For example, if you’re looking to prototype points of interest, consider the poi_label layer; if you want to style GPS traces, the roads layer might be a good proxy. Take a look at what’s available in Mapbox Streets to find a layer that could serve as a proxy for your data.

Upload real data

If you can’t find a good approximation for your data in Mapbox Streets, consider uploading a small subset of your data into Mapbox Studio as a custom tileset.

Upload data on the Tilesets page in Mapbox Studio. Click New tileset to upload a geospatial data file. Read more about uploads, including accepted file types and transfer limits, in the Uploads guide.

Create placeholder data

If you don’t have any custom data on hand or your data is not an accepted file type or exceeds transfer limits, you can create placeholder data with the Mapbox Studio dataset editor.

For a complete reference of the capabilities of the dataset editor see the Datasets section of the Mapbox Studio manual. For a quickstart, see below:

1. Visit the Datasets page in Mapbox Studio.
2. Click New Dataset and use the Blank dataset option to create a dataset from scratch.
3. Zoom into your desired location.
4. Use the draw tools on the left to start creating a set of sample data.
5. Add data properties you’d like to use to drive your style. Some guidelines for data properties include:
   • Consider categorical properties or numeric properties that can be used to filter and group your data.
   • To display text along a line, add line feature with a text property.
   • Text at specific points on a line or polygon: besides the line, create points at the specific points you’d like with text properties.
   • If you want circles where scale doesn’t matter relative to the geography (For example, always 20 pixels), you can add as a point and style with a circle layer or a symbol.
   • If you want circles or arcs where the scale matters (For example, a 10 mile radius), you’ll need to approximately freehand a polygon that you can create more precisely later in code.
6. When you’re done, save your dataset and export as a tileset. When that’s complete, add your tileset to your style.

Add data to a style

Whether you started by uploading data as a tileset or creating a dataset in the dataset editor and exporting as a tileset, once your data is in tileset form you can add it to a style in the style editor.

Visit the Styles page in Mapbox Studio and create a new style. Your style will open in the style editor, and you will be able to add a new layer. For more details on adding a new layer to a style, see the Styles section of the Mapbox Studio manual.

Create a custom style

Mapbox Studio shines for styling your data and the process is much faster than attempting to style natively. To learn more about custom styles see the Mapbox Studio manual and our Create a custom style tutorial.

Implement on iOS with runtime styling

Once you’re happy with the style you’ve created, it’s time to get setup with Mapbox in your app.

To implement your prototypes with runtime styling:

1. Implement -[MGLMapViewDelegate mapView:didFinishLoadingStyle:].
2. Add your real data as a source:
   • Use vector data from tileset editor, custom vector tiles, added as GeoJSON (example, or added manually through the app via MGLShapeSource (example)
3. For each layer you’ve prototyped in Studio, add its corresponding MGLStyleLayer subclass. See “Configuring the map content’s appearance” for the available style layer classes.

Translating style attributes from Studio

For each property you’ve edited in Studio, you can hover over the property name to find the corresponding property in the iOS SDK. It’ll generally be the camelCased version of the Property ID, but see “Configuring the map content’s appearance” for a table of properties that differ between Mapbox Studio and the Maps SDK for iOS.

Next steps

To learn more about Mapbox Studio, read the Mapbox Studio manual and our step-by-step tutorials for Mapbox Studio.

To see Mapbox Studio styles in action with the Maps SDK for iOS, see iOS code examples.

Join the Mapbox Developers Discord Communityarrow-right