rotation based on attribute

[halset]

I have a ORIENTATION attribute in a feature that I want to use as the value to the "icon-rotate" attribute. Like this.

"layout": {
"icon-image": "triangle-12",
"icon-rotation-alignment": "map",
"icon-rotate": "{ORIENTATION}"
}

Is there a way to have a "Number" data type that is based on a attribute like the "String" data type does with {}? It does not seem to work for me now.

[jfirebaugh]

👍, this is being tracked in mapbox/mapbox-gl-style-spec#105.

[andrewharvey]

For the benefit of anyone else who lands here you can now do this with dds identity function.

"icon-rotate": {
   "type": "identity",
   "property": "ORIENTATION"
}

Unfortunately although Mapbox Studio has DDS support now, it doesn't look like the identity function support is there yet 😞

[AbrahamArun]

I see this issue as closed, but I still cant figure out how Number data type for tokens/attributes work. I have tried the following two ways, and they don't work.

First method Layout property

      'text-rotate': {
         'type': 'identity',
         'property': 'rotation'
      },

Second method

      'text-rotate': '{rotation}',

[andrewharvey]

@AbrahamArun From the example at #873 (comment)

If your property is named rotation then in your style document you'll have:

"layout": {
   "icon-rotate": {
      "type": "identity",
      "property": "rotation"
   }
}

You shouldn't wrap it in braces like {...}.

[AbrahamArun]

@andrewharvey That is exactly what I have done. The {rotation} was just the 2nd method I tried, i.e., tokens.

[AbrahamArun]

And this I am trying for text-rotate

[andrewharvey]

@AbrahamArun Could you post a minimal jsbin example?

[AbrahamArun]

@andrewharvey This is how my style layer looks:

{
    'id': 104,
    'type': 'symbol',
    'source': sourceId,
    'paint': {
      'text-color': black
    },
    'layout': {
      'icon-allow-overlap': true,
      'icon-ignore-placement': true,
      'text-field': '{price}',
      'text-rotate': {
         'type': 'identity',
         'property': 'rotation'
      },
      'text-max-width': 10,
      'text-allow-overlap': true,
      'text-ignore-placement': true,
      'text-justify': 'center',
      'text-size': {
          'base': 1,
          'stops': [[15, 2], [16.63, 8], [18, 20], [19, 40]]
      }
      ,'text-offset':[0,-0.1]
    },
  };

Is this the right way to do it?

[MartinHerich]

Any solution to this? I have the same problem.

"layout": {
                "visibility": "visible",
                "text-field": "{TEXT}",
                "text-size": {
                    "base": 1,
                    "stops": [
                        [
                            19,
                            16
                        ],
                        [
                            22,
                            16
                        ]
                    ]
                },
                "text-rotate": {
					"type": "identity",
					"property": "ORIENTATION"
				}
            },

doesn't work

[andrewharvey]

@MartinHerich do you have a minimal jsbin example of it not working?

[MartinHerich]

OK. I found my way to use the field. Actually the problem was that MAPBOX changed the name of field from ORIENTATION to ORIENTATIO on import. Now it works. But I need to use formula on text-rotate as my values are in GONs with the beggining on south. My formula would be like
(ORIENTATION-300)*0.9
but when I write it in property then it won't be recognised and all the texts are on 0 grad. Is there any special syntax needed?

[rlanda123]

I have a property named "heading". When I am trying to rotate the icon by binding the rotation property to heading, it is not working. Please see below:
map.addLayer({
"id": "tracker",
"type": "symbol",
"source": 'trace',
"layout": {
"icon-image": "airport-15",
"icon-allow-overlap": true,
"icon-rotate" : {heading},
"text-field": "{name}",
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, 0.6],
"text-anchor": "top"
}
});

Can someone please help me how to make it work?
Thanks a lot in advance.

[rlanda123]

@MartinHerich Did you have it working? If so, would you please post the addLayer()? Thanks a lot.

[AddoSolutions]

Having the same issue as above:

  // Add current location marker
  map.addSource('current-location', {
    "type": "geojson",
    "data": {
      "type": "Point",
      "coordinates": this.start,
      "properties":{
        "rotation":315
      }
    }
  });

  map.addLayer({
    "id": "current-location-marker",
    "source": "current-location",
    "type": "symbol",
    "layout": {
      "icon-image": "sa-currentLocation",
      "icon-size": 0.4,
      "icon-padding":1,
      "icon-allow-overlap":true,
      "icon-anchor": "center",
      "icon-pitch-alignment":"map",
      //"icon-rotation-alignment":"map",
      "icon-rotate": { "type": "identity", "property": "rotation" }
    },
  });

Not working:

Working (without identity property, just static "icon-rotate": 315):

In my particular use case I am updating the icon pointer based upon an external NEMA GPS that gives a heading and more precise coordinates and need to issue MANY updates to the heading.

[AddoSolutions]

Solved my own issue (hopefully others too). The single "Point" needed upgrading to a "Feature"

      // Add current location marker
      map.addSource('current-location', {
        "type": "geojson",
        "data": {
          type: 'Feature',
          geometry: {
            "type": "Point",
            "coordinates": this.start
          },
          "properties":{
            "heading":315
          }
        }
      });

[cs09g]

For me, the property from mbtiles was string format. e, g, "123.0000". In this case, you can customize this code as:

feature.properties.YOUR_STRING_PROP = +feature.properties.YOUR_STRING_PROP;
const angle = layer.layout.get('icon-rotate').evaluate(feature, {}) * Math.PI / 180;

[DaveThePianoDude]

Hi. You can do something like

"layout": { "icon-image": "tunnel-exit", "icon-rotate": ["get","AOO"], "text-field": "Tunnel Mouth", "text-offset": [-5,2] },

where AOO is an attribute that returns the angle of orientation.