CODEWITHSUNDEEP
htmlrotationmapboxmarkerangle
Matthieu Faure
Matthieu Faure

Reputation: 41

Mapbox Custom Marker Rotation

After having followed a mapbox tutorial, I managed to display a drone on a map. My only question is : How can I add a rotation parameter in my code (to display the drone-marker on different angles) ? I have spent hours looking for examples but none corresponds to what I already wrote...

Thank you !

Here's the script :

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.css' rel='stylesheet' />
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    
      }
      
      .marker {
          background-image: url('MQ-1_Predator_silhouette.svg.png');
          background-size: cover;
          width: 61px;
          height: 35px;
          border-radius: 50%;
          cursor: pointer;
        
        }
        
    </style>
</head>
<body>

<div id='map'></div>

<script>

mapboxgl.accessToken = 'pk.eyJ1IjoibWF0dGhpZXU2MyIsImEiOiJjamNob3I3cmgxam1kMzFzNzdja2ZvNmhuIn0.AyFos9o0afaaBU21CgrxXg';

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v9',
  center: [-96, 37.8],
  zoom: 3
});



// code from the next step will go here!

var geojson = {
  type: 'FeatureCollection',
  features: [{
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [-90,40]
    },
    properties: {
      title: 'Mapbox'
    }
  }]
};

// add markers to map
geojson.features.forEach(function(marker) {

  // create a HTML element for each feature
  var el = document.createElement('div');
  el.className = 'marker';

  // make a marker for each feature and add to the map
  new mapboxgl.Marker(el)
  .setLngLat(marker.geometry.coordinates)
  .addTo(map);
});

</script>

</body>
</html>

Upvotes: 4

Views: 9195

Answers (2)

samarth sharma
samarth sharma

Reputation: 61

Mapbox offers inbuilt icon rotation feature under the heading of get bearing and icon rotation is handled internally once you find out geographical bearing between two pairs of LatLng and feed that value to get Bearing.

If you are using mapbox marker and are keen on rotating it, you can use css transform property (rotate()) and dynamically calculate the angle between two pairs of latLng and use that value in rotate property.

        var dLon = destination[0]-origin[0];
        var dLat = destination[1]-origin[1];
        var angle = 180+(Math.atan2(dLon, dLat) * 180 / Math.PI);
        var rotateString = "rotate(" + angle + "deg)";

        var el = document.createElement('div');
        el.className = 'marker';
        var truckMarker = new mapboxgl.Marker(el)
        el.style.transform = el.style.transform + rotateString;

In the last line it is important to append the rotate property because the transform property is already being updated as translate is called because of animation. Works perfectly fine for me!!

Upvotes: 6

AndrewHarvey
AndrewHarvey

Reputation: 3055

If you're using Markers then you'll need to do the rotation yourself as part of the marker element style. This would probably only work if you disable map rotation, or unless you do something like https://github.com/mapbox/mapbox-gl-js/issues/3937#issuecomment-304916394 to account for the map rotation yourself.

If you're using Symbols then it's much easier as you can use https://www.mapbox.com/mapbox-gl-js/style-spec#layout-symbol-icon-rotate to set your rotation.

Upvotes: 2

Related Questions