Feature request: layer style expressions

[irjayjay]

Hi, and firstly, well done with the plugin. It is phenomenal!
Our team has been using the other unofficial plugin for a few years now. It was the best there was, but we had extreme performance issues and some difficulty adding custom layers, etc.
We finally hacked in layer/layer-style support, but it's not great.

Your plugin is extremely fast, I've been testing it for viability for the last two days.
So far only this one possible deal breaker.

In our app we use, e.g. symbol layers where the symbols have filters that make them disappear at zoom level 5 and below and also reduces their size linearly based on zoom level. We can also set symbol images on a single layer based on expressions such as the GET expression from the Mapbox docs.

Are there any plans to allow for adding these expressions?
I see currently when creating a layer you can only set a size of type double, as an example.

I'm gonna explore your code a bit and see if I can somehow pass in custom JSON directly somewhere, but the layer data classes do make things a lot easier.

[kamami]

This can already be achieved with interpolate:

{
    "circle-radius": [
        "interpolate", ["linear"], ["zoom"],
        // zoom is 5 (or less) -> circle radius will be 1px
        5, 1,
        // zoom is 10 (or greater) -> circle radius will be 5px
        10, 5
    ]
}

[irjayjay]

Hi, thanks for your reply.

Yeah, we used to use interpolate for that.
I just couldn't find mention of any layer styles in the readme or demo app.
Now searching for interpolate in the project I see it gets used with layer styles once. A bit of hay in a needle stack.

Thanks for this! Perhaps it can be mentioned in the readme?
I think most devs new to Mapbox wouldn't be aware of layer styles or even think to search for them in the demo app.

[yunikkk]

@irjayjay hey, there's not a lot of docs about expressions usage at the moment (though seems you've found the animated route page that uses interpolate).
We'll definitely work on adding more!

[irjayjay]

Hi there. I think for expression usage a simple link to the mapbox docs would be fine.
I was referring more to mentioning in the readme that you can create layers and layer styles the traditional way.

But I see it's already there. I don't know how I missed that before.

Once again, thanks for all the great work!

[demux79]

Can this "traditional way" also be used for the HeatmapLayer?

With mapboxMap.style.setStyleLayerProperty I only get: Unhandled Exception: PlatformException(StyleError(rawValue: "Layer heatmap is not in style"), null, null, null)

[geisterfurz007]

@demux79 Make sure the layer is added to the styles before you try to set the style layer property; for that, make sure to await the call to addLayer.

[demux79]

@geisterfurz007 Hi, thanks for getting back to me. Unfortunately, I am already awaiting everything but still get the error. Do you have an idea? Also the styleSourceExists in line 6 is never true.

void _onStyleLoaded(StyleLoadedEventData styleLoadedEventData) async {
    await _addLayerAndSource();
  }

  Future<void> _addLayerAndSource() async {
    await mapboxMap?.style.styleSourceExists("source").then((exists) async {
      if (!exists) {
        // TODO: Is never called for unknown reasons
        // If source exists - just update it
        // final source = await mapboxMap?.style.getSource("source");
        // (source as GeoJsonSource).updateGeoJSON(json.encode(geojsonHeatmap));
        // } else {
        await mapboxMap?.style.addSource(GeoJsonSource(
            id: "source", data: geojsonHeatmap.readAsStringSync()));
      }
    });

    mapboxMap?.style.styleLayerExists("heatmap").then((exists) async {
      if (!exists && geojsonHeatmap.existsSync()) {
        await mapboxMap?.style.addLayer(HeatmapLayer(
          id: 'heatmap',
          sourceId: 'source',
          minZoom: 4.0,
          heatmapIntensity: 0.1,
          heatmapOpacity: 0.5,
          heatmapRadius: 30,
          heatmapWeight: 1.0,
        ));
      }
    });

    await mapboxMap?.style.setStyleLayerProperty('heatmap', 'heatmap-radius', 40);
  }

[geisterfurz007]

@demux79 There is one await missing at the second larger block in front of mapboxMap?.style.styleLayerExists.

[demux79]

@geisterfurz007 Thanks, well spottet. I wish it made a difference. I tried all combinations with await only, then() only, both together. But the layer is never found.

UPDATE: It's the geojsonHeatmap.existsSync() that was causing the issue!