CODEWITHSUNDEEP
javascriptreactjsmapbox-gl-js
KurgerBing
KurgerBing

Reputation: 193

mapbox marker rotation/bearing

is there any chance to set the rotation for a marker? For now, I set the map bearing to the angle of one marker, but the others should have their own marker bearing.

At the moment, I'm using the marker definition like so:

var marker_el = document.createElement('div');
marker_el .className = 'marker';
var new_marker = new mapboxgl.Marker(marker_el)
    .setPopup(marker_PopUp);

and set it to the map:

new_marker.setLngLat([lon, lat]);
new_marker.addTo(map);

I'm using JS and react and for the map mapbox-gl

Upvotes: 2

Views: 2521

Answers (1)

KurgerBing
KurgerBing

Reputation: 193

so because there are no answers, I self answer my post with a working solution for me:

var angle = "yourAngle";
var rotateString = "rotate(" + angle + "deg)";

var marker_el = document.createElement('div');
marker_el.className = 'marker';
var new_marker = new mapboxgl.Marker(marker_el);
new_marker.addTo(map);

/* important here is to append the rotate property because the transform 
property is already being updated */
marker_el.style.transform = marker_el.style.transform + rotateString;

Upvotes: 3

Related Questions