Marker API: add setColor, setScale, setLabel

[mariusa]

Motivation

When users select a location from a list (not on the map, a separate list), we want to highlight the corresponding marker on the map.

Marker has options to set initial color, scale, but can't change them:
https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker

Same for 'label', which is documented at
https://docs.mapbox.com/api/maps/#marker
but not at https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker

Hope 'label' support wasn't dropped, it's extremely useful to add 2 digit numbers/letters to standard markers, without going through the complexity of a custom marker.

Thanks!

Design Alternatives

Design

Mock-Up

Concepts

Implementation

[ryanhamley]

We had a PR #9427 submitted awhile back for Marker#setColor but it was closed because it wasn't flexible enough to accommodate any arbitrary marker element. It gets a bit tricky since the marker can be an SVG or a div or whatever.

Similarly, the PR #9414 that added the scale option almost included getter and setter methods but we backtracked at the last minute for the same reason as with setColor. It seems like there's developer need for these types of methods though so it's probably worth figuring out a proper way to do this type of runtime update of marker properties.

[andrewharvey]

We had a PR #9427 submitted awhile back for Marker#setColor but it was closed because it wasn't flexible enough to accommodate any arbitrary marker element. It gets a bit tricky since the marker can be an SVG or a div or whatever.

I think in hindsight a better design might have been to have HTMLElement as a stripped down class for building your own Markers, and then have plugins for different kinds of out of the box Markers like https://leafletjs.com/plugins.html#markers--renderers. So you could have a SimpleMarker plugin which extends it which adds the default icon with customisation colour, image, style, label/number etc, rather than try to pack in and endless list of features Marker supports.

Hope 'label' support wasn't dropped, it's extremely useful to add 2 digit numbers/letters to standard markers, without going through the complexity of a custom marker.

That was never supported in GL JS, https://docs.mapbox.com/api/maps/#marker is for the Static Images API.

[SephReed]

What if we made it so these options:
https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker-parameters

were updatable? I can't seem to find any way to scale a marker after it's been created.

[rolandm2017]

I still want to see an easy way to update a specific marker's color.

IMO there should be a way to say: Marker.updateColorOnMap({color: #FFFFFF })

Like that.

I guess currently I can select the marker, delete the marker, and then add a new one with a different color?

[jringeisen]

@Plutownium that's one option or you can update the fill attribute of the first path element within the svg, like so:

let element = data.marker.getElement();
let svg = element.getElementsByTagName("svg")[0];
let path = svg.getElementsByTagName("path")[0];
path.setAttribute("fill", "#dc2626");

This is what I ended up doing and it works great.

[nweissberg]

@Plutownium that's one option or you can update the fill attribute of the first path element within the svg, like so:

let element = data.marker.getElement();
let svg = element.getElementsByTagName("svg")[0];
let path = svg.getElementsByTagName("path")[0];
path.setAttribute("fill", "#dc2626");

This is what I ended up doing and it works great.

Gambiarra de qualidade ⭐