Mapbox GL JS Change the color from the default marker

Question

I’m starting to loose my mind.

According to Mapbox API I should be able to change the default marker color but I didn't find any exemple in the documentation that doesn't use custom markers and the most likely syntax doesn't work.

I am using mapbox-gl-js/v0.44.2

var marker = new mapboxgl.Marker({ "color": "#b40219" })
                .setLngLat([0, 0])
                .addTo(map);

With this code, the map is shown without the marker and if I remove the color option the marker does display correctly but with the wrong color.

Any suggestion to where I messed up ?

score 8 · Answer 1 · answered Feb 05 '21 at 17:52

8

Screw jQuery

setMarkerColor(marker, color) {
      let markerElement = marker.getElement();
      markerElement
        .querySelectorAll('svg g[fill="' + marker._color + '"]')[0]
        .setAttribute("fill", color);
      marker._color = color;
    },

answered Feb 05 '21 at 17:52

Max

834
8
19

This code changes color of the marker's shade if previous color is `#000000`: https://i.stack.imgur.com/3pILu.png – Pavel Chuchuva Jul 19 '22 at 00:01

score 6 · Accepted Answer · answered Jun 17 '18 at 21:25

6

Support for custom colors when using the default Marker SVG element is available since v0.45.0, you are using v0.44.2.

Release notes:

https://github.com/mapbox/mapbox-gl-js/releases

answered Jun 17 '18 at 21:25

pathmapper

1,777
1
11
19

5

The syntax is correct `const marker = new mapboxgl.Marker({ "color": "#b40219" })` – Mark Swardstrom Feb 24 '21 at 23:57

score 4 · Answer 3 · answered Dec 10 '18 at 09:17

4

And if you need to change the color of the default marker on the fly you may use this kind of function (used jQuery to get element's children):

function setMarkerColor(marker, color) {
    var $elem = jQuery(marker.getElement());
    $elem.find('svg g[fill="' + marker._color + '"]').attr('fill', color);
    marker._color = color;
}

answered Dec 10 '18 at 09:17

Anton Suslov

103
5

I've just copied and pasted it and works perfectly. Thanks. – sugaith Oct 31 '20 at 18:38

score 1 · Answer 4 · answered Feb 03 '22 at 17:40

1

when setting up the marker, put the color in the brackets:

new mapboxgl.Marker({ "color": "#b40219" }) //this changes color to a dark red// .setLngLat([-74.5, 40]) .addTo(map);

answered Feb 03 '22 at 17:40

Jordan Davis

11
1

Francisco F · Answer 5 · 2021-11-12T11:51:36.863

0

marker = new mapboxgl.Marker({
        color: $parameters.UpdatedMarkerColor,
        draggable: false
    });

edited Nov 12 '21 at 11:51

answered Nov 12 '21 at 11:46

Francisco F

43
4

Please consider adding a brief explanation of [how and why this solves the problem](https://meta.stackoverflow.com/q/392712/13138364). This will help readers to better understand your solution. – tdy Nov 16 '21 at 04:22

Mapbox GL JS Change the color from the default marker

5 Answers5