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
  • Instructions
  • Video tutorial
  • Demo app
  1. Loading Markers

Adding popups to markers

PreviousAdding a single markerNextUsing custom icons

Last updated 4 months ago

The Beautiful Maps - Mapbox plugin allows you to add custom popups that appear when the user clicks on a marker:

Instructions

You can add popups that appear when markers are clicked by adding a list of texts to the 'Popup Content' field on the 'Add List of Markers' action.

Please note that in the above example I'm using the 'formatted address' operator to transform geographic addresses to texts/

You can also pass through a list of HTMLs if you want to really customise the popups - this is how we created the example in the GIF at the top of this page:

Video tutorial

The below video tutorial shows how you can add custom popups to makers on your map. The relevant section is from 32:10 to 55:16.

Demo app

You can view an example of adding a popup to each marker at the demo app below:

The editor is public and can be accessed by clicking the 'View Editor' button at the top of the page.

IMPORTANT: The above video tutorial uses the to allow the plugin to access the HTML used for the popup content. This is no longer our recommended approach and the RepeatingGroup Tools (bdk) plugin is not necessary. Instead, we recommend you view the demo app at the link below for an alternative setup (which is very similar)

RepeatingGroup Tools (bdk) plugin
Bubble - Visual ProgrammingBubble
Logo