Marker playground

Use the marker playground below 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.

1Select a platform

To add an image marker to a map you need four things:

  • Map
  • Image: An image is loaded and added to the map.
  • Source: A data source specifies the geographic coordinate where the image marker gets placed.
  • Style layer: A style layer ties together the source and image and specifies how they are displayed on the map.

To add an image marker to a map you need four things:

  • Map
  • Image: An image is loaded and added to the map.
  • Source: A data source specifies the geographic coordinate where the image marker gets placed.
  • Style layer: A style layer ties together the source and image and specifies how they are displayed on the map.

To add an image marker to a map you need four things:

  • Map
  • Image: An image is loaded and added to the map.
  • Source: A data source specifies the geographic coordinate where the image marker gets placed.
  • Style layer: A style layer ties together the source and image and specifies how they are displayed on the map.

To add an image marker to a map you need four things:

  • Map
  • Image: An image is loaded and added to the map.
  • Source: A data source specifies the geographic coordinate where the image marker gets placed.
  • Style layer: A style layer ties together the source and image and specifies how they are displayed on the map.

To add an image marker to a map you need four things:

  • Map
  • Image: An image is loaded and added to the map.
  • Source: A data source specifies the geographic coordinate where the image marker gets placed.
  • Style layer: A style layer ties together the source and image and specifies how they are displayed on the map.

2Position the map and marker

iphone device frame android device frame
Map
Specify the style and position of the map.
Style:
Center:
Must be a number between -180 and 180.
Must be a number between -90 and 90.
Zoom:
Must be a number between 0 and 22.
Image
This is the image that you will add to the map.
Dimensions: 23px x 30px
Image location:
Source
Specify where in the world to place the marker.
Center:
Click on the map or enter coordinates here to add a marker to the map.
Must be a number between -180 and 180.
Must be a number between -90 and 90.
Enable editing the parameters and positioning the map. You will need to regenerate the starter code after repositioning the map.

3View starter code

Here are the resources you'll need to integrate this map with a marker image into your application.

Access token
Log in to your Mapbox account to find your access token.
Image
This example uses an image hosted on the web. You may use any image that's hosted on the same domain as your code or supports Cross-origin Resource Sharing (CORS).
Code
Save the code provided in your new HTML file or integrate it into an existing project file.
Or test out the code in your browser using JSBin.
Use JSBin to test out your code
Refer to the Mapbox GL JS documenation if you'd like to further customize your map.

Here are the resources you'll need to integrate this map with a marker image into your application.

Access token
Log in to your Mapbox account to find your access token.
Image
This example references a local image that will need to be added to your Xcode project. You can save this image where ever you store image assets and access it in your ViewController.swift file.
Download marker image
Code
Save the code provided in your ViewController.swift file.
If you need help setting up your first Mapbox project in Xcode, see our installation guide for the Mapbox Maps SDK for iOS.
Refer to the Mapbox Maps SDK for iOS documenation if you'd like to further customize your map.
File organization
If you are just getting started, consider organizing your code and other assets in this file structure.
Project folder
ViewController.swift
Assets.xcassets
custom-marker.imageset
custom_marker.png
Contents.js

Here are the resources you'll need to integrate this map with a marker image into your application.

Access token
Log in to your Mapbox account to find your access token.
Image
This example references a local image that will need to be added to your Xcode project. You can save this image where ever you store image assets and access it in your ViewController.m file.
Download marker image
Code
Save the code provided in your ViewController.m file.
If you need help setting up your first Mapbox project in Xcode, see our installation guide for the Mapbox Maps SDK for iOS.
Refer to the Mapbox Maps SDK for iOS documenation if you'd like to further customize your map.
File organization
If you are just getting started, consider organizing your code and other assets in this file structure.
Project folder
ViewController.m
Assets.xcassets
custom-marker.imageset
custom_marker.png
Contents.js

Here are the resources you'll need to integrate this map with a marker image into your application.

Access token
Log in to your Mapbox account to find your access token.
Image
This example references a local image that will need to be added to your Android Studio project. You can save this image where ever you store image assets and access it in your MainActivity.java file.
Download marker image
Code
There are two files you will need to edit in your Android Studio project. Save the code provided in your activity_main.xml and MainActivity.java file.
If you need help setting up your first Mapbox project in Android Studio, see our installation guide for the Mapbox Maps SDK for Android.
Refer to the Mapbox Maps SDK for Android documenation if you'd like to further customize your map.
File organization
If you are just getting started, consider organizing your code and other assets in this file structure.
Project folder
java
MainActivity.java
res
drawable
custom_marker.png
layout
activity_main.xml

Here are the resources you'll need to integrate this map with a marker image into your application.

Access token
Log in to your Mapbox account to find your access token.
Image
This example references a local image that will need to be added to your React Native project. You can save this image where ever you store image assets and access it in your App.js file.
Download marker image
Code
Save the code provided in your App.js file.
If you need help setting up your first Mapbox project in React Native, see our installation guide for the Mapbox Maps SDK for React Native.
Refer to the Mapbox Maps SDK for React Native documenation if you'd like to further customize your map.
File organization
If you are just getting started, consider organizing your code and other assets in this file structure.
Project folder
src
App.js
assets
custom_marker.png
(Code snippet will show up here)
(Code snippet will show up here)