Mapbox plugin for Craft CMS

Setting Marker Icons

There are two opportunities to set a marker icon:

# Creating Marker Icons

When the map is initially created, or markers are initially placed, you can use the markerOptions option to control how the marker looks and behaves.

If you've got multiple groups of markers, you can specify different marker options for each batch of markers.

// Get all bars & restaurants
const bars        = {'lng':  -73.935242, 'lat': 40.730610}; // Coords only in JS
const restaurants = {'lng': -118.243683, 'lat': 34.052235}; // Coords only in JS

// Create a dynamic map (with no markers)
const map = mapbox.map();

// Add all bar markers (blue)
map.markers(bars, {
    'markerOptions': {'color': '#197BBD'}
});

// Add all restaurant markers (red)
map.markers(restaurants, {
    'markerOptions': {'color': '#BE3100'}
});

// Display map (inject into `#my-map-container`)
map.tag({'parentId': 'my-map-container'});

# Changing Marker Icons

It's also possible to change the options of an existing marker. The changeMarker method accepts all the same Marker parameters (opens new window) as the initial map or marker creation.

map.changeMarker(markerId, options);

Using the changeMarker method, it's possible to change one or more markers at a time.

// Change one marker
map.changeMarker('33-address', {'color': '#197BBD'});

// Change specified markers
map.changeMarker(['33-address', '42-address'], {'color': '#197BBD'});

// Change all markers
map.changeMarker('*', {'color': '#197BBD'});

Getting the Marker IDs

To see the existing marker IDs (if you didn't manually specify them), do the following:

  1. Put the site into devMode (opens new window).
  2. View the JS console while the map is being rendered.

In the JavaScript console, you should see a complete play-by-play of every map component being created. Simply copy & paste the marker ID's you need from there, or take note of the pattern for your own needs.

← Opening Popups →