How to use data driven properties

[dawid-niedzwiecki]

Hello, how can I use data driven properties to pass a color for a line on LineLayer? The LineLayer object takes an int for the line-layer property, so I can't pass the ['get', 'custom-color'] to it :/ Actually that applies to any property in any type of layer...

[ivan-ljubicic]

You can first add the layer with default properties and then use mapboxMap.style.setStyleLayerProperty('layer_id', 'color', jsonEncode(['get','custom-color']))

[dawid-niedzwiecki]

You can first add the layer with default properties and then use mapboxMap.style.setStyleLayerProperty('layer_id', 'color', jsonEncode(['get','custom-color']))

Hey, I just tried that and I get this error:

PlatformException (PlatformException(Throwable, java.lang.Throwable: layer doesn't support this property, Cause: null, Stacktrace: java.lang.Throwable: layer doesn't support this property
    at com.mapbox.maps.mapbox_maps.StyleController.setStyleLayerProperty$lambda-18(StyleController.kt:212)
    at com.mapbox.maps.mapbox_maps.StyleController.$r8$lambda$WKv9Hkp6n6Ramjn-IsD3ANd83Co(Unknown Source:0)
    at com.mapbox.maps.mapbox_maps.StyleController$$ExternalSyntheticLambda35.onStyleLoaded(Unknown Source:8)
    at com.mapbox.maps.MapboxMap.getStyle(MapboxMap.kt:355)
    at com.mapbox.maps.mapbox_maps.StyleController.setStyleLayerProperty(StyleController.kt:208)
    at com.mapbox.maps.pigeons.FLTMapInterfaces$StyleManager$-CC.lambda$setup$15(FLTMapInterfaces.java:7200)
    at com.mapbox.maps.pigeons.FLTMapInterfaces$StyleManager$$ExternalSyntheticLambda40.onMessage(Unknown Source:2)
    at io.flutter.plugin.common.BasicMessageChannel$IncomingMessageHandler.onMessage(BasicMessageChannel.java:217)
    at io.flutter.embedding.engine.dart.DartMessenger.invokeHandler(DartMessenger.java:295)
    at io.flutter.embedding.engine.dart.DartMessenger.lambda$dispatchMessageToQueue$0$io-flutter-embedding-engine-dart-DartMessenger(DartMessenger.java:319)
    at io.flutter.embedding.engine.dart.DartMessenger$$ExternalSyntheticLambda0.run(Unknown Source:12)
    at android.os.Handler.handleCallback(Handler.java:938)
    at android.os.Handler.dispatchMessage(Handler.java:99)
    at android.os.Looper.loop(Looper.java:250)
    at android.app.ActivityThread.main(ActivityThread.java:7806)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:592)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:958)
, null))

This is how I create the layer:

await mapController.style.addSource(GeoJsonSource(id: 'styleSource', data: json.encode(geojson))); // Here geojson is a Map<String, dynamic>
await mapController.style.addLayer(
  LineLayer(
    id: 'styleLayer',
    sourceId: 'styleSource',
    lineCap: LineCap.ROUND,
    lineWidth: 3,
  ),
);
await mapController.style.setStyleLayerProperty(
  'styleLayer',
  'color',
  json.encode(['get', 'line-color']),
);

[ivan-ljubicic]

Line layer does not have 'color' property, it is 'line-color'.

Check out this: https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#line

[dawid-niedzwiecki]

Oh, okay, that's where the names come from :D Thanks!