Beautiful Maps - Mapbox
  • Introduction
    • 👋Welcome
    • Key use cases
    • Key features
    • Demo apps
  • Getting Started
    • Registering for a Mapbox account
    • Install the plugin
    • Adding the access token
    • Adding a map to your app
  • Loading a Map
    • Selecting a default location
    • Setting zoom levels
    • Setting a map style
    • Adding controls to a map
  • Loading Markers
    • Structuring your database for markers
    • Adding multiple markers
    • Adding a single marker
    • Adding popups to markers
    • Using custom icons
    • Changing marker on hover
    • Removing markers from a map
    • Trigger an action when marker is clicked
  • Geolocation
    • Show the user's current location
  • Drawing Mode
    • Drawing shapes on a map
    • Saving drawings
    • Loading drawings
  • Route Navigation
    • Adding navigation
Powered by GitBook
On this page
  • The same custom icon for all markers
  • Multiple different custom icons
  • Video tutorial
  • Demo app
  1. Loading Markers

Using custom icons

PreviousAdding popups to markersNextChanging marker on hover

Last updated 4 months ago

You can use your own images for marker icons.

The same custom icon for all markers

You can add a custom marker that will be the same for all icons by adding an image to the 'Icon Image (Single)' field (in the Custom Icon Inputs section) of the 'Add a List of Markers' action:

Multiple different custom icons

You can use different custom icons for your markers by adding a list of images to the 'Icon Image (Multiple)' field (in the Custom Icon Inputs section) of the 'Add a List of Markers' action. The icon image will appear for its associated location:

Video tutorial

The below video tutorial shows how you can add custom icons to a map:

Demo app

You can view an example of how to add custom icons for markers at the demo app below. The relevant section is the 'Adding different style markers on the same Map' section:

Bubble - Visual ProgrammingBubble
Logo