Data-driven styling

[MapYourShow]

I am looking at the docs and noticed that the textSize style for a symbol layer only accepts a number. Is there another way to add stops to the textSize? Or is this something that is not available to mapboxx react native yet?

[nitaliano]

are you referring to being able to reference your properties in your feature? If so that is supported

textSize: MapboxGL.StyleSheet.identity('textSize')

There's also MapboxGL.StyleSheet.source, MapboxGL.StyleSheet.camera, and MapboxGL.StyleSheet.composite

[MapYourShow]

So sorry for not responding or closing this ticket. I have another question about stops. We are currently generating our stops dynamically and adding those values to an object of stops. How ever once we get to reading these values, it seems like the font size is simply defaulting to the standard font size. We have tried using all of the methods that you mentioned above, but we have kind of hit a small dead end. Any advice is greatly appreciated.

Here is how we are creating the text size stops:

boothLabelFeature.properties.textSize = {stops: [
                [10, 0],
                [11, ((Math.pow(2, 11 - 9) * fontSize))],
                [12, ((Math.pow(2, 12 - 9) * fontSize))],
                [13, ((Math.pow(2, 13 - 9) * fontSize))],
                [14, ((Math.pow(2, 14 - 9) * fontSize))],
                [15, ((Math.pow(2, 15 - 9) * fontSize))],
                [16, ((Math.pow(2, 16 - 9) * fontSize))],
                [17, ((Math.pow(2, 17 - 9) * fontSize))],
                [18, ((Math.pow(2, 18 - 9) * fontSize))],
                [19, ((Math.pow(2, 19 - 9) * fontSize))],
                [20, ((Math.pow(2, 20 - 9) * fontSize))],
                [21, ((Math.pow(2, 21 - 9) * fontSize))],
                [22, ((Math.pow(2, 22 - 9) * fontSize))],
                [23, ((Math.pow(2, 23 - 9) * fontSize))],
                [24, ((Math.pow(2, 24 - 9) * fontSize))],
                [25, ((Math.pow(2, 25 - 9) * fontSize))],
                [26, ((Math.pow(2, 26 - 9) * fontSize))],
                [27, ((Math.pow(2, 27 - 9) * fontSize))],
                [28, ((Math.pow(2, 28 - 9) * fontSize))],
                [29, ((Math.pow(2, 29 - 9) * fontSize))],
                [30, ((Math.pow(2, 30 - 9) * fontSize))]
                ]
            };

And this is how we are referencing this property in the stylesheet: textSize: Mapbox.StyleSheet.identity('textSize')

[nitaliano]

@MapYourShow you want the font size to change based on zoom level correct?

[MapYourShow]

Yes, that is exactly what we are looking for.

[nitaliano]

Ok, I'll work on an example for this in the example repo because this could be good to have and I'll post back with some code

[MapYourShow]

Dude you are a freaking rockstar. Thanks so much!

[nitaliano]

@MapYourShow so I just updated one of the examples, here is the code that's roughly used

{
    textSize: MapboxGL.StyleSheet.camera({
      10: fontSize,
      11: (Math.pow(2, 11 - 9) * fontSize),
      12: (Math.pow(2, 12 - 9) * fontSize),
      13: (Math.pow(2, 13 - 9) * fontSize),
      14: (Math.pow(2, 14 - 9) * fontSize),
      15: (Math.pow(2, 15 - 9) * fontSize),
      16: (Math.pow(2, 16 - 9) * fontSize),
      17: (Math.pow(2, 17 - 9) * fontSize),
      18: (Math.pow(2, 18 - 9) * fontSize),
    }, MapboxGL.InterpolationMode.Exponential)
}

You want to use the camera static method, all keys are camera zoom levels, and the values will be used at that zoom level, and using Exponential allows the font to grow/shrink between zoom levels. Mind giving something like this a try and getting back to me?

[MapYourShow]

Okay, that makes so much sense now that you mention it. I have one more question for you. Is there a way for us to create this textSize property in an external helper file and then read that value in the style using the Mapbox.StyleSheet.identity('textSize') function? Or is this something that we are not going to be able to accomplish currently?

Basically what we are doing is dynamically creating and scaling the text and text size for different shape sizes. This is done in an external helper file and then passed back to the file that I am drawing the map in. I am so sorry if this is worded in a confusing way and I would be more than happy to clarify on anything you need clarification on. Thanks!

[MapYourShow]

Disregard my question above. I have solved the problems that I was asking about. Thanks for your help!

[nitaliano]

Great glad you got it working, and sorry I didn't realize that you posted back!

[MrHazimAli]

@nitaliano is there any sample if we need to use range inside styling ? something like

{ textSize: MapboxGL.StyleSheet.source([ [>=0 && <50, 'white'], [>=50 && <100, 'blue'], [>=100, 'red'], ], 'height', MapboxGL.InterpolationMode.Exponential), }