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
  • Video tutorial
  • Add List of Markers action
  1. Loading Markers

Adding multiple markers

PreviousStructuring your database for markersNextAdding a single marker

Last updated 4 months ago

You can add a list of markers to your Mapbox Map using the 'Add List of Markers Map To Mapbox Map' action. You can run this action page load - this way the markers will appear on the map almost instantly:

If you don't choose a , the default Mapbox marker icons will be used:

Video tutorial

The below video tutorial shows how you can add a list of markers to a map with the 'Add List of Markers' action:

Add List of Markers action

The 'Add List of Markers' action comes with the following fields:

Field
Type
Description

Element

Dropdown

The Mapbox Map you're adding the markers to

Longitudes

number (list)

A list of longitude values

Latitudes

number (list)

A list of latitude values

Popup Content

text (list)

A list of text values that will be displayed in a popup that appears when the user clicks on a marker

Draggable

yes/no

If set to 'yes', the user will be able to drag the marker

CUSTOM ICON INPUTS

Icon Image (Single)

image

A custom image that will be used for the marker icons

Icon Image (Multiple)

image (list)

A list of images. Each image in the list will be used as the marker icon for the corresponding location.

DIMENSIONS OF CUSTOM MARKERS

Width

number

The width of the custom marker icon image

Height

number

The height of the custom marker icon image

MARKERS WITH PRICES

Prices

number (list)

A list of numbers. If added, the each maker will be a price (like in an Airbnb-style map)

Currency

text

You can specify the currency symbol to be used with the prices.

OFFSET FOR MARKERS WITH SAME COORDINATES

Latitude offset

number

The offset applied to markers that have exactly the same coordinates. Can be useful if you have a number of markers that appearing in the exact same location and you want to differentiate them from one another.

UNIQUE IDs

Unique IDs

text (list)

A list of texts that can be used to identify each marker. Useful if you're planning to allow users to add/remove markers at a later stage.

HOVER MODE

Icon Image (Single)

image

A custom image that will be used for the marker icons when they are hovered by the user.

Icon Image (Multiple)

image (list)

A list of images. Each image in the list will be used as the marker icon for the corresponding location when they are hovered by the user.

custom icon