fix flicker effect on web, when style is loaded slowly (#377)

We had an issue that the default style
`https://demotiles.maplibre.org/style.json` is shown for some frames
whenever the style is not loaded immediately.

Also fixed #362

android/src/main/java/com/mapbox/mapboxgl/MapboxMapBuilder.java

@@ -21,14 +21,15 @@ class MapboxMapBuilder implements MapboxMapOptionsSink {
   private boolean dragEnabled = true;
   private int myLocationTrackingMode = 0;
   private int myLocationRenderMode = 0;
-  private String styleString = "https://demotiles.maplibre.org/style.json";
+  private String styleString = "";
   private LatLngBounds bounds = null;
 
   MapboxMapController build(
       int id,
       Context context,
       BinaryMessenger messenger,
       MapboxMapsPlugin.LifecycleProvider lifecycleProvider) {
+
     final MapboxMapController controller =
         new MapboxMapController(
             id, context, messenger, lifecycleProvider, options, styleString, dragEnabled);

android/src/main/java/com/mapbox/mapboxgl/MapboxMapFactory.java

@@ -1,6 +1,9 @@
 package com.mapbox.mapboxgl;
 
 import android.content.Context;
+
+import androidx.annotation.NonNull;
+
 import com.mapbox.mapboxsdk.camera.CameraPosition;
 import io.flutter.plugin.common.BinaryMessenger;
 import io.flutter.plugin.common.StandardMessageCodec;
@@ -20,6 +23,7 @@ public MapboxMapFactory(
     this.lifecycleProvider = lifecycleProvider;
   }
 
+  @NonNull
   @Override
   public PlatformView create(Context context, int id, Object args) {
     Map<String, Object> params = (Map<String, Object>) args;
@@ -34,6 +38,11 @@ public PlatformView create(Context context, int id, Object args) {
       boolean dragEnabled = Convert.toBoolean(params.get("dragEnabled"));
       builder.setDragEnabled(dragEnabled);
     }
+    if(params.containsKey("styleString")) {
+      String styleString = Convert.toString(params.get("styleString"));
+      builder.setStyleString(styleString);
+    }
+
     return builder.build(id, context, messenger, lifecycleProvider);
   }
 }

example/lib/local_style.dart

@@ -55,6 +55,8 @@ class LocalStyleState extends State<LocalStyle> {
 
   @override
   Widget build(BuildContext context) {
+    final styleAbsoluteFilePath = this.styleAbsoluteFilePath;
+
     if (styleAbsoluteFilePath == null) {
       return const Scaffold(
         body: Center(child: Text('Creating local style file...')),

lib/src/maplibre_map.dart

@@ -14,12 +14,12 @@ class MaplibreMap extends StatefulWidget {
   const MaplibreMap({
     Key? key,
     required this.initialCameraPosition,
+    this.styleString = "https://demotiles.maplibre.org/style.json",
     this.onMapCreated,
     this.onStyleLoadedCallback,
     this.gestureRecognizers,
     this.compassEnabled = true,
     this.cameraTargetBounds = CameraTargetBounds.unbounded,
-    this.styleString,
     this.minMaxZoomPreference = MinMaxZoomPreference.unbounded,
     this.rotateGesturesEnabled = true,
     this.scrollGesturesEnabled = true,
@@ -115,7 +115,7 @@ class MaplibreMap extends StatefulWidget {
   /// 2. Passing the style as a local asset. Create a JSON file in the `assets` and add a reference in `pubspec.yml`. Set the style string to the relative path for this asset in order to load it into the map.
   /// 3. Passing the style as a local file. create an JSON file in app directory (e.g. ApplicationDocumentsDirectory). Set the style string to the absolute path of this JSON file.
   /// 4. Passing the raw JSON of the map style. This is only supported on Android.
-  final String? styleString;
+  final String styleString;
 
   /// Preferred bounds for the camera zoom level.
   ///
@@ -263,8 +263,8 @@ class _MaplibreMapState extends State<MaplibreMap> {
         "annotationOrder must not have duplicate types");
     final Map<String, dynamic> creationParams = <String, dynamic>{
       'initialCameraPosition': widget.initialCameraPosition.toMap(),
+      'styleString': widget.styleString,
       'options': _MaplibreMapOptions.fromWidget(widget).toMap(),
-      //'onAttributionClickOverride': widget.onAttributionClick != null,
       'dragEnabled': widget.dragEnabled,
       if (widget.iosLongClickDuration != null)
         'iosLongClickDurationMilliseconds':

maplibre_gl_web/lib/src/maplibre_web_gl_platform.dart

@@ -69,7 +69,7 @@ class MaplibreMapController extends MapLibreGlPlatform
       _map = MapLibreMap(
         MapOptions(
           container: _mapElement,
-          style: 'https://demotiles.maplibre.org/style.json',
+          style: _creationParams["styleString"],
           center: LngLat(camera['target'][1], camera['target'][0]),
           zoom: camera['zoom'],
           bearing: camera['bearing'],