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
In this tutorial series you will add custom icons inside Mapbox Studio. Mapbox Studio only supports SVG images. Other image formats are supported when using markers in Mapbox GL JS.
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.
Mapbox.js is no longer in active development. To learn more about our newer mapping tools see Add custom markers in Mapbox GL JS.
If you want to know how to add markers with Mapbox.js, read our Work with markers with Mapbox.js guide. In this guide, you will learn how to add markers, customize them, and make them interactive with Mapbox.js.