Implementation of toggling layer visibility (#1197)

* Implementation of toggling layer visibility * Added documentation to setVisibility, added check if layerId exists * Fixed linter errors Co-authored-by: Simon Irmančnik <simon@naviter.com>
flutter-mapbox-gl · May 5, 2023 · 318078a · 318078a
1 parent 61b435e
commit 318078a
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 0 deletions.
diff --git a/android/src/main/java/com/mapbox/mapboxgl/MapboxMapController.java b/android/src/main/java/com/mapbox/mapboxgl/MapboxMapController.java
@@ -4,6 +4,9 @@
 
 package com.mapbox.mapboxgl;
 
+import static com.mapbox.mapboxsdk.style.layers.Property.*;
+import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.visibility;
+
 import android.Manifest;
 import android.annotation.SuppressLint;
 import android.content.Context;
@@ -1330,6 +1333,24 @@ public void onFailure(@NonNull Exception exception) {
             break;
           }
 
+          result.success(null);
+          break;
+        }
+      case "style#setVisibility":
+        {
+          if (style == null) {
+            result.error(
+                "STYLE IS NULL",
+                "The style is null. Has onStyleLoaded() already been invoked?",
+                null);
+          }
+          String layerId = call.argument("layerId");
+          boolean isVisible = call.argument("isVisible");
+          Layer layer = style.getLayer(layerId);
+          if (layer != null) {
+            layer.setProperties(isVisible ? visibility(VISIBLE) : visibility(NONE));
+          }
+
           result.success(null);
           break;
         }

diff --git a/example/lib/layer.dart b/example/lib/layer.dart
@@ -24,7 +24,9 @@ class LayerState extends State {
   late MapboxMapController controller;
   Timer? bikeTimer;
   Timer? filterTimer;
+  Timer? visibilityTimer;
   int filteredId = 0;
+  bool isVisible = true;
 
   @override
   Widget build(BuildContext context) {
@@ -148,12 +150,18 @@ class LayerState extends State {
       filteredId = filteredId == 0 ? 1 : 0;
       controller.setFilter('fills', ['==', 'id', filteredId]);
     });
+
+    visibilityTimer = Timer.periodic(Duration(seconds: 5), (t) {
+      isVisible = !isVisible;
+      controller.setVisibility('water', isVisible);
+    });
   }
 
   @override
   void dispose() {
     bikeTimer?.cancel();
     filterTimer?.cancel();
+    visibilityTimer?.cancel();
     super.dispose();
   }
 }

diff --git a/ios/Classes/MapboxMapController.swift b/ios/Classes/MapboxMapController.swift
@@ -755,6 +755,17 @@ class MapboxMapController: NSObject, FlutterPlatformView, MGLMapViewDelegate, Ma
             case let .failure(error): result(error.flutterError)
             }
 
+        case "map#setVisibility":
+            guard let arguments = methodCall.arguments as? [String: Any] else { return }
+            guard let layerId = arguments["layerId"] as? String else { return }
+            guard let isVisible = arguments["isVisible"] as? Bool else { return }
+            guard let layer = mapView.style?.layer(withIdentifier: layerId) else {
+                result(nil)
+                return
+            }
+            layer.isVisible = isVisible
+            result(nil)
+
         case "source#addGeoJson":
             guard let arguments = methodCall.arguments as? [String: Any] else { return }
             guard let sourceId = arguments["sourceId"] as? String else { return }

diff --git a/lib/src/controller.dart b/lib/src/controller.dart
@@ -1208,6 +1208,13 @@ class MapboxMapController extends ChangeNotifier {
     return _mapboxGlPlatform.setFilter(layerId, filter);
   }
 
+  /// Sets the visibility by specifying [isVisible] of the layer with
+  /// the specified id [layerId].
+  /// Returns silently if [layerId] does not exist.
+  Future<void> setVisibility(String layerId, bool isVisible) {
+    return _mapboxGlPlatform.setVisibility(layerId, isVisible);
+  }
+
   /// Returns the point on the screen that corresponds to a geographical coordinate ([latLng]). The screen location is in screen pixels (not display pixels) relative to the top left of the map (not of the whole screen)
   ///
   /// Note: The resulting x and y coordinates are rounded to [int] on web, on other platforms they may differ very slightly (in the range of about 10^-10) from the actual nearest screen coordinate.

diff --git a/mapbox_gl_platform_interface/lib/src/mapbox_gl_platform_interface.dart b/mapbox_gl_platform_interface/lib/src/mapbox_gl_platform_interface.dart
@@ -94,6 +94,8 @@ abstract class MapboxGlPlatform {
 
   Future<void> setFilter(String layerId, dynamic filter);
 
+  Future<void> setVisibility(String layerId, bool isVisible);
+
   Future<Point> toScreenLocation(LatLng latLng);
 
   Future<List<Point>> toScreenLocationBatch(Iterable<LatLng> latLngs);

diff --git a/mapbox_gl_platform_interface/lib/src/method_channel_mapbox_gl.dart b/mapbox_gl_platform_interface/lib/src/method_channel_mapbox_gl.dart
@@ -504,6 +504,16 @@ class MethodChannelMapboxGl extends MapboxGlPlatform {
     }
   }
 
+  @override
+  Future<void> setVisibility(String layerId, bool isVisible) async {
+    try {
+      return await _channel.invokeMethod('style#setVisibility',
+          <String, Object>{'layerId': layerId, 'isVisible': isVisible});
+    } on PlatformException catch (e) {
+      return new Future.error(e);
+    }
+  }
+
   @override
   Future<LatLng> toLatLng(Point screenLocation) async {
     try {

diff --git a/mapbox_gl_web/lib/src/mapbox_web_gl_platform.dart b/mapbox_gl_web/lib/src/mapbox_web_gl_platform.dart
@@ -703,6 +703,15 @@ class MapboxWebGlPlatform extends MapboxGlPlatform
     _map.setFilter(layerId, filter);
   }
 
+  @override
+  Future<void> setVisibility(String layerId, bool isVisible) async {
+    final layer = _map.getLayer(layerId);
+    if (layer != null) {
+      _map.setLayoutProperty(
+          layerId, 'visibility', isVisible ? 'visible' : 'none');
+    }
+  }
+
   @override
   Future<void> addGeoJsonSource(String sourceId, Map<String, dynamic> geojson,
       {String? promoteId}) async {