beginner
Varies
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.

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.

screenshot of the marker playground

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.

animation of points in the dataset editor and custom icons in the style editor

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.
  • Add a layer to your style with SymbolLayer if 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 SymbolLayer allows 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.

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.