Enable property functions for icon-rotate

[lucaswoj]

ref mapbox/mapbox-gl-test-suite#110

cc @jfirebaugh @mourner @mollymerp @lbud

fixes #2736

[lbud]

@danpat!

[jfirebaugh]

The rendering looks pixelated:

Is this another case where we need to switch to linear texture interpolation rather than nearest?

[lucaswoj]

Is this another case where we need to switch to linear texture interpolation rather than nearest?

Yes, I will look into this now.

[lucaswoj]

Just built a fun demo using http://restbus.info/ (thanks @peterqliu @ericfischer!)

This demo really highlights the need for better interpolation 😄

http://bl.ocks.org/lucaswoj/raw/ce18d1fb581a229624fb84c5549eb899/

[lucaswoj]

Pushed a new commit and (updated the demo) to use linear interpolation for rotated icons

[danpat]

[jfirebaugh]

That looks great!

[swratten]

@lucaswoj is there a way for me to individually rotate icons in the FeatureCollection like in: http://bl.ocks.org/lucaswoj/ce18d1fb581a229624fb84c5549eb899

That is, instead of the entire set of icons.

I am using: v0.20.1

I have tried copy pasting the relevant code from that blocks url and the result does not reflect what resides in the url provided.

[lucaswoj]

@swratten I cannot see anything wrong with your code as posted. Please open a question on Stack Overflow with a functioning demo.

[lucaswoj]

@swratten My apologies. The problem is that property functions for icon-rotate hasn't yet been released. Expect a release sometime this week! In the interim, you may use a build of master https://github.com/mapbox/mapbox-gl-js/blob/master/CONTRIBUTING.md#creating-a-standalone-build

[swratten]

No problem, thanks for that the master build works perfectly cheers!

[dvonlehman]

Do property functions work for the text-anchor style property? Trying to do something like the following:

map.addLayer({
  layout: {
    'text-anchor': {
       property: 'textAnchor',
       stops: [
          ['top-left', 'top-left'],
          ['top-right', 'top-right']
        ]
     }
  }
});

Where the feature object has a textAnchor property. Really in my case the stops are not relevant, it'd be cleaner were it possible to simply pull in the value of a feature property like you can do with {title}.

map.addLayer({
  layout: {
    'text-anchor': '{textAnchor}'
  }
});

[lucaswoj]

@dvonlehman Please see https://www.mapbox.com/mapbox-gl-style-spec/, which now lists the current status of data-driven styling support.

[ilyatrunov]

I'm on version 0.22, still no support for "icon-rotate" from properties
Error: layout.icon-rotate: number expected, string found

[danpat]

@ilyatrunov icon-rotate data driven styling is available in 0.23 and onwards.

[ilyatrunov]

@danpat ok, can you please update the version here:
https://www.mapbox.com/mapbox-gl-style-spec/#layout-symbol-icon-rotate
it is also appears in release notes for 0.21

thank you

[danpat]

Sorry, my bad, it works from 0.21 and onwards. @ilyatrunov can you paste a sample of your style? It sounds like you might have the syntax wrong.

[ilyatrunov]

@danpat
map.addLayer({
id: id,
source: id,
type: 'symbol',
layout: {
'icon-image': "harbor-15",
'icon-rotate': '{heading}'
})

my data set has a "heading" property in "properties". and it's numeric.

I've updated to v0.24, but still - same error

[jfirebaugh]

@ilyatrunov The interpolated string syntax is only for icon-image and text-field. Data-driven styling uses property functions and zoom-and-property functions. See here for an example.

[ilyatrunov]

@jfirebaugh thank you! it's all good now. can this be added to the documentation, for the people who will need this? thanks again!

[ilyatrunov]

I used intervals of 30 deg, like this:
stops: [
[0, 0], [30, 30], [60, 60], [90, 90],
[120, 120], [150, 150], [180, 180], [210, 210],
[240, 240], [270, 270], [300, 300], [330, 330], [360, 360]
]

On Wed, Sep 28, 2016 at 3:55 PM, Simona [email protected] wrote:

Hey guys,
not sure I'm getting it anyways. I read about property function here, so
if ilyatrunov has a property 'heading', and it could be anything between 0
and 360, icon-rotate property should look something like this?

'icon-rotate': {
'property': 'heading',
'stops': [
[0, 0],
[1, 1]
and so on till 360?
]
}

I must be wrong since that would be really long array. But I didn't find
anything about intervals/ranges in the documentatio. Could you help me out
on this, @jfirebaugh https://github.com/jfirebaugh or @ilyatrunov
https://github.com/ilyatrunov ?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#2738 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AQnd1gs0rAHF5qgLwC4aTrwyXRp7IRLnks5qumPOgaJpZM4I1tVv
.

[lucaswoj]

@ilyatrunov The stops are interpolated so you should only need to include stops: [[0, 0], [360, 360]]

[rlanda123]

@jfirebaugh Hi, would you please help me in finding a solution for my problem? I am trying to bind the icon-rotate property to one of the properties called "heading" in my feature. It is not working and I am not sure how to proceed further. Please see the following:
map.addLayer({
"id": "tracks",
"type": "symbol",
// Add a GeoJSON source containing place coordinates and information.
"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"
}
});

I would greatly appreciate if you could please point me to a right direction. Thank you so much in advance.

[lbud]

@rlanda123 the {token syntax} is only for text-field and icon-image, as noted above; see "identity functions" in the documentation for your use case. In the future please direct "how do I" questions to StackOverflow.

[rlanda123]

@lbud Thank you soooooo much for your help. I used the identity function as you suggested like below and it works now! I have no words to express my thanks to you. Thanks million for your quick response.
For those of who, who is struggling: here is my updated code:

map.addLayer({
       "id": "tracks",
       "type": "symbol",
       // Add a GeoJSON source containing place coordinates and information.
       "source": 'trace',
       "layout": {
           "icon-image": "airport-15",
           "icon-ignore-placement": true,
           "icon-allow-overlap": true,
           "icon-rotate" : {
               "type" : "identity",
               "property": "heading",
               "default" : 90
           },
           "text-field": "{name}",
           "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
           "text-offset": [0, 0.6],
           "text-anchor": "top"
       },
       "paint" : {
           "icon-opacity" : 1
       }
   });

[rlanda123]

I will follow your suggestion and post in StackOverflow next time. Sorry for this time, I did not know. Thanks a lot again. From: Lauren Budorick [mailto:[email protected]] Sent: Tuesday, February 06, 2018 12:49 PM To: mapbox/mapbox-gl-js Cc: Landa, Ravee; Mention Subject: Re: [mapbox/mapbox-gl-js] Enable property functions for icon-rotate (#2738) @rlanda123<https://github.com/rlanda123> the {token syntax} is only for text-field and icon-image, as noted above<#2738 (comment)>; see "identity functions" in the documentation<https://www.mapbox.com/mapbox-gl-js/style-spec/#function-type> for your use case. In the future please direct "how do I" questions to StackOverflow. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#2738 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AAIP1Fg-8zMfWNPMjwp5Gb3K6i9wWbt5ks5tSLqggaJpZM4I1tVv>.