There are many different ways to style point data in Mapbox Studio, Mapbox GL JS, and the Mapbox iOS and Android SDKs. In these tutorials, we’ll walk you through several ways to visualize your point data across platforms with custom icons and markers. There’s no one right way to build your map, and this guide is designed to provide you with a better understanding of which methods make the most sense for your project.
Use the marker playground
Use the marker playground to add an image marker to the map and view the platform-specific code to recreate this map in your own iOS, Android, React Native, or web application.
Add markers in Mapbox GL JS
If you already have GeoJSON data that you would like to visualize, you can use Mapbox GL JS to add custom markers to your map. When using the Mapbox GL JS Marker method, you can use any file type that can be used as an image in CSS as a marker on your map. To build a custom marker map entirely in Mapbox GL JS, follow the Add custom markers in Mapbox GL JS tutorial. This tutorial is code-based.
Add custom icons in Mapbox Studio
If you are starting from scratch and need to draw data to be added to a map, start with the Add points to a map tutorial series. In this tutorial series, you’ll learn how to draw data from scratch in the Mapbox Studio dataset editor, add custom icons to a map in the Mapbox Studio style editor, and make your map interactive using Mapbox GL JS. Making your map interactive will require writing code.
Part 1: create a dataset
Learn how to create a new dataset in the Mapbox Studio dataset editor, draw new points, save your dataset, and export it as a tileset. Add points to a web map, Part 1: create a dataset
Part 2: create a style
Learn to create a new style with one of the Mapbox default styles, add a tileset as a layer, and style the points with custom icons in the Mapbox Studio style editor. Add points to a web map, Part 2: create a style
Part 3: add interactivity
Learn how to use Mapbox GL JS to add popups when each point is clicked. This part requires writing code. Add points to a web map, Part 3: add interactivity
Add markers in iOS
The Mapbox Maps SDK for iOS offers a few different methods for visualizing point data on your map. Each method has its merits and drawbacks, so be sure to take a quick look, particularly if you anticipate adding a lot of markers or displaying highly customized markers.
See the Adding Points to a Map guide for the Mapbox Maps SDK for iOS for more information on how to use the available methods for visualizing point data on your map and to learn about each method’s trade-offs.
Add markers in Android
The Mapbox Maps SDK for Android includes a few different methods for visualizing point data on your map. Each method has its merits and drawbacks, so be sure to take a quick look, particularly if you anticipate adding a lot of markers or displaying highly customized markers.
- Add a marker with
MarkerOptions()if you plan to add a lot of markers on top of your map and don’t require a high level of customization.
- Add a marker with
MarkerViewOptions()if you plan to add a smaller number of markers on top of your map and require a high level of customization.
- See the Draw a marker view example.
- Add a layer to your style with
SymbolLayerif you plan to add a lot of markers to you map and would like to utilize the full power of the GL map rendering engine. Adding markers to your map with
SymbolLayerallows you to define where in the layer stack your markers will appear (below contextual map layers, for example) and is the most performant option when displaying a lot of markers simultaneously.
- See the SymbolLayer activity from the Mapbox demo app.
Add markers in Mapbox.js
If you’re looking for how to add markers with Mapbox.js, check out our Work with markers with Mapbox.js guide. In this guide, we’ll show how to add markers, customize them, and make them interactive with Mapbox.js.