How to create expression for a specific case in Mapbox-gl-js?

user_10102695 0
Viewed 107

Our Goal is to create Geo-json as light-weight as possible. In order to achieve this we are making Geo-json properties key and value as small as possible.

From:

{
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": []//coordinates
        },
        "properties": {
          "rotation": 0, //<-- Notice Keys
          "size": 0.609524,
          "text": "143",
          "text-justify" : "left"
        }
      },

To

{
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": []//coordinates
        },
        "properties": {
          "r": 0,
          "s": 0.609524,
          "t": "143",
          "tj": "l" //"l" is "left", "r" is right and "c" is center
        }
      },

And then on frontend while adding layer, will do something like below:

"layout": {
                "text-justify": ['get', 'tj'] //<--- How to create this expression
                "text-field": ['get', 't'],
                "text-size":
                    [
                        'interpolate',
                        ['exponential', 1.75],
                        ['zoom'],
                        1, ["/", ["get", "s"], 5.15],
                        11, ["/", ["get", "s"], 0.01]
                    ],
                "text-rotate": ['get', 'r'],
            }

So my question is: How to write expression for "text-justify" property as value's are "l"/"r"/"c" to be "left"/"right"/"center"?

mapbox-gl-js javascript
1 Answers

You can write it like this:

"text-justify": ['match', ['get', 'tj'],
  'l', 'left',
  'r', 'right',
  //...
  'center'
]

If your goal is to send large data files statically to the browser, you might want to look at Geobuf as a more space-efficient format.

user_2632680
Related