mapbox-maps-flutter icon indicating copy to clipboard operation
mapbox-maps-flutter copied to clipboard

Adding GeoJSON Layer in onMapCreated is unreliable

Open marcellangmaier opened this issue 1 year ago • 6 comments

When I add a GeoJSON Layer in onMapCreated, sometimes it gets displayed, sometimes not. https://github.com/mapbox/mapbox-maps-flutter/assets/26068556/0027f248-5a57-46d8-ad06-332f4a6fa58e https://github.com/mapbox/mapbox-maps-flutter/assets/26068556/856634f2-d741-45c4-85f5-178b61050aa1

pubspec.yaml: mapbox_maps_flutter: ^2.0.0-rc.1

My _onMapCreated method:

 _onMapCreated(map.MapboxMap mapboxMap) async {
   this.mapboxMap = mapboxMap;
   await drawRoute();
 }

The method which adds the geojson layer

 Future<void> drawRoute() async {
   var data = await rootBundle.loadString('assets/line.geojson');
   var source = map.GeoJsonSource(id: "line", data: data);

   await mapboxMap?.style.addSource(source);
   var lineLayer = map.LineLayer(
     id: "line_layer",
     sourceId: "line",
     lineJoin: map.LineJoin.ROUND,
     lineCap: map.LineCap.ROUND,
     lineColor: Colors.red.value,
     lineWidth: 6.0,
     //   slot: map.LayerSlot.TOP
   );
   await mapboxMap?.style.addLayer(lineLayer!);
 }

Simple example: main.dart.zip GeoJson file: line.geojson.zip

marcellangmaier avatar May 29 '24 04:05 marcellangmaier

@marcellangmaier does this happen only on Android on your side or also on iOS?

I have similar problems using the latest mapbox plugin (v. 2.0.0), but only on Android.

I am trying to load a custom json style inside the onMapCreated handler.

_onMapCreated(MapboxMap mapboxMap) async {
    final styleJson = await rootBundle.loadString("assets/map-styles/style1.json");
    mapboxMap.style.setStyleJSON(styleJson);

    print("style loaded");
}

I can see the log-message in the console, so the onMapCreated handler is executed, but the map is still showing the default style.

In addition, when adding a geojson source and a layer inside the onStyleLoadedListener like this:,

_onMapStyleLoaded(StyleLoadedEventData eventData) async {
    final data = await rootBundle.loadString('assets/data.json');

    await mapboxMap?.style.addSource(
        GeoJsonSource(
            id: "my_source",
            data: jsonEncode(data)
        )
    );

    await mapboxMap?.style.addLayer(
        SymbolLayer(
            id: "my_layer",
            sourceId: "my_source"
        )
    );

    //...
}

then the layer is visible (on the default map style instead of the custom json style that is not getting loaded correctly), but I also get an exception on Android.

E/flutter ( 8826): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(Throwable, java.lang.Throwable: Source my_source already exists, Cause: null, Stacktrace: java.lang.Throwable: Source my_source already exists E/flutter ( 8826): at com.mapbox.maps.mapbox_maps.StyleController.addStyleSource(StyleController.kt:289) E/flutter ( 8826): at com.mapbox.maps.mapbox_maps.pigeons.StyleManager$Companion.setUp$lambda-51$lambda-50(MapInterfaces.kt:6490) E/flutter ( 8826): at com.mapbox.maps.mapbox_maps.pigeons.StyleManager$Companion.$r8$lambda$DXAQ35E-7m0eWhGSNgtBkwfDJqQ(Unknown Source:0) E/flutter ( 8826): at com.mapbox.maps.mapbox_maps.pigeons.StyleManager$Companion$$ExternalSyntheticLambda8.onMessage(Unknown Source:2) E/flutter ( 8826): at io.flutter.plugin.common.BasicMessageChannel$IncomingMessageHandler.onMessage(BasicMessageChannel.java:261) E/flutter ( 8826): at io.flutter.embedding.engine.dart.DartMessenger.invokeHandler(DartMessenger.java:292) E/flutter ( 8826): at io.flutter.embedding.engine.dart.DartMessenger.lambda$dispatchMessageToQueue$0$io-flutter-embedding-engine-dart-DartMessenger(DartMessenger.java:319) E/flutter ( 8826): at io.flutter.embedding.engine.dart.DartMessenger$$ExternalSyntheticLambda0.run(Unknown Source:12) E/flutter ( 8826): at android.os.Handler.handleCallback(Handler.java:958) E/flutter ( 8826): at android.os.Handler.dispatchMessage(Handler.java:99) E/flutter ( 8826): at android.os.Looper.loopOnce(Looper.java:205) E/flutter ( 8826): at android.os.Looper.loop(Looper.java:294) E/flutter ( 8826): at android.app.ActivityThread.main(ActivityThread.java:8177) E/flutter ( 8826): at java.lang.reflect.Method.invoke(Native Method) E/flutter ( 8826): at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:552) E/flutter ( 8826): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:971) E/flutter ( 8826): , null) E/flutter ( 8826): #0 StyleManager.addStyleSource (package:mapbox_maps_flutter/src/pigeons/map_interfaces.dart:6373:7) E/flutter ( 8826): E/flutter ( 8826): #1 StyleSource.addSource. (package:mapbox_maps_flutter/src/style/style.dart:308:66) E/flutter ( 8826): E/flutter ( 8826): #2 MapPageState._onMapStyleLoaded (package:flutter_mapbox/main.dart:63:5) E/flutter ( 8826):

Everything was working correctly with plugin version 1.1.0 on Android and iOS, and with version 2.0.0 it is still working on iOS, but NOT on Android.

felixkrautschuk avatar May 30 '24 16:05 felixkrautschuk

I do have a similiar problem after upgrading to 2.0.0 on android. With 1.1.0 everything worked fine.

In my onMapCreated i add a terrain Source:

_onMapCreated(MapboxMap mapboxMap) {
    this.mapboxMap = mapboxMap;
    _addTerrainToMap();
  }
_addTerrainToMap() async {
    await mapboxMap?.style.addSource(RasterDemSource(id: "mapbox-raster-dem", url: mapboxTerrainDem, tileSize: 512, maxzoom: 14));
    var terrain = {'source': 'mapbox-raster-dem'};
    mapboxMap?.style.setStyleTerrain(json.encode(terrain));
  }

and I got an error:

I/flutter (14176): PlatformException(Throwable, java.lang.Throwable: Source mapbox-raster-dem is not in style, Cause: null, Stacktrace: java.lang.Throwable: Source mapbox-raster-dem is not in style
I/flutter (14176): 	at com.mapbox.maps.mapbox_maps.StyleController.setStyleSourceProperties(StyleController.kt:340)

fighterii avatar Jun 13 '24 08:06 fighterii

For reliable results, use onStyleLoaded event to perform runtime styling.

evil159 avatar Jun 13 '24 08:06 evil159

@evil159 as I mentioned above, I still have similar issues on Android after upgrading to 2.0,0, even when adding sources and layers in onStyleLoaded.

felixkrautschuk avatar Jun 13 '24 08:06 felixkrautschuk

@felixkrautschuk It appears you have another issue, you are trying to add a source that already exists E/flutter ( 8826): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(Throwable, java.lang.Throwable: Source my_source already exists, Cause: null, Stacktrace: java.lang.Throwable: Source my_source already exists

evil159 avatar Jun 13 '24 08:06 evil159

@evil159 alright, I created another thread for my issue here: https://github.com/mapbox/mapbox-maps-flutter/issues/601

felixkrautschuk avatar Jun 28 '24 13:06 felixkrautschuk