Add custom icons or markers
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.
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.
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.
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
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
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
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 expect to add a lot of markers or display 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.
The Annotation plugin is the recommended way to add markers to a map when using the Maps SDK for Android. The Annotation plugin simplifies the way to set and adjust the visual properties of annotations on a Mapbox map.
Directly using the Maps SDK for Android's sources and layers instead of the Annotation plugin, is the advanced way to add annotations.