Tutorials
beginner
Varies

Add markers to a map

There are many different ways to style point data in Mapbox Studio, Mapbox GL JS, the Mapbox Maps SDKs for iOS and Android, and the Mapbox Static Images API. In this guide, we point you to example code and tutorials that illustrate how to add a few markers to a map across different platforms.

Add a marker to your application

If you want to add a default marker to a map, you can use the examples below as a starting point.

Web maps

Use Mapbox GL JS's Marker method to add a default marker image to your map as an HTML element at runtime.

ExampleAPI reference

Android apps

Use the Mapbox Maps SDK for Android's SymbolLayer method to add the R.drawable.mapbox_marker_icon_default to the map at runtime.

ExampleAPI reference

iOS apps

Use the following Mapbox Maps SDK for iOS methods to add a point annotation as a symbol layer at runtime:

  • Use MGLPointAnnotation to define where the markers will be displayed.
  • Add the data to a new source using MGLShapeSource.
  • Render the data source with the MGLSymbolStyleLayer.
ExampleAPI reference

Static maps

Use the Mapbox Static Images API's overlay option to add a default marker to a static map.

API reference

Add markers in 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.

Supported image formats

In this tutorial series you will add custom icons inside Mapbox Studio. Mapbox Studio only supports SVG images. When you use markers in Mapbox GL JS or the Maps SDKs, other image formats are supported.

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

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

Part 3: add interactivity

Learn how to use Mapbox GL JS to add popups when each point is clicked. The instructions in this part of the tutorial require you to write code.

Add points to a web map, Part 3

Was this page helpful?