4

I am trying to rotate map icons based on an "orientation" attribute field (which provides the bearing in degrees). I've tested this in Mapbox studio and it is working fine. When I copy/paste the code from the studio window into my html/js project however, there is no rotation and I can't work out why.

My code looks like below.

  map.addSource('points', {
    type: 'vector',
    url: 'mapbox://tileset'
    });

  map.addLayer({
    'id': 'lights',
    'type': 'symbol',
    'source': 'points',
    'source-layer': 'layername',
    'layout': {
      'visibility': 'visible',
      'icon-size': 1,
      'icon-image': 'beer-15',
      'icon-rotate': [
        "interpolate",
        ["linear"],
        ["get", "orientation"],
        0, 0,
        350, 350
      ],
    },
  });

1 Answer 1

3

I am still not an expert, but your interpolate inside of the "icon-rotate" might be the problem. I am not positive. I can show you how I did mine, which works great using an external JSON. Hopefully it will work for you as well (or you can edit my code to work for you) :

In my JS code, it is :

map.addLayer({
        id: "direction_layer",
        type: 'symbol',
        source: 'direction',
        layout: {
            'icon-image': ['get', 'icon'],
            'icon-rotate': ['get', 'rotation']
        }
    })

And my JSON source looks like this :

{
    "type": "Feature",
    "geometry": {      "type": "Point",
      "coordinates": [-90,34]
     },
     "properties": {
        "description": " ",
        "icon": "direction_icon",
        "rotation": 200
     }
}
3
  • Thanks David. Yes, I agree, the problem must be somewhere in there. If I just set the rotation to a random angle it works fine. Not sure why Mapbox Studio shows the interpolate script for this. I like your more simple approach, but when I replace the interpolate with just ['get', 'orientation'] it still does not rotate. Makes me think it is not collecting the attributes correctly. But then again I can get it to work in Studio with the same file...
    – Benj
    Sep 5, 2020 at 3:33
  • Update: I got it to work now using your expression. The problem was that I had linked the wrong file. One where the 'orientation' field was a string instead of a number, and when I updated the file, I forgot to update it in the code. I suspect the Studio code works as well, but I like your approach better as it is clean and simple. Thanks for leading me onto the issue!
    – Benj
    Sep 5, 2020 at 3:42
  • No problem. I have found that Mapbox examples (and even here on SE) are often too complex. If they kept it simple, things like this would be much easier to understand.
    – David
    Sep 5, 2020 at 16:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.