Setting Marker Icons
There are two opportunities to set a marker icon:
- When the marker is created (using the
markers
method ormap
method) - After the marker already exists (using the
changeMarker
method)
# 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:
- Put the site into devMode (opens new window).
- 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.