Vector tile layer opacity and visible (#1210)

* Vector tile layer opacity and visible

* lint

Author: lopezvoliver

python/ipyleaflet/ipyleaflet/leaflet.py

@@ -1106,6 +1106,10 @@ class VectorTileLayer(Layer):
         Minimum zoom number the tile source has available. If it is specified, the tiles on all zoom levels lower than min_native_zoom will be loaded from min_native_zoom level and auto-scaled.
     max_native_zoom: int, default None
         Maximum zoom number the tile source has available. If it is specified, the tiles on all zoom levels higher than max_native_zoom will be loaded from max_native_zoom level and auto-scaled.
+    opacity: float, default 1.
+        Opacity of the layer between 0. (fully transparent) and 1. (fully opaque).
+    visible: boolean, default True
+        Whether the layer is visible or not.
     """
 
     _view_name = Unicode("LeafletVectorTileLayerView").tag(sync=True)
@@ -1115,7 +1119,8 @@ class VectorTileLayer(Layer):
     attribution = Unicode().tag(sync=True, o=True)
 
     vector_tile_layer_styles = Union([Dict(), Unicode()]).tag(sync=True, o=True)
-
+    opacity = Float(1.0, min=0.0, max=1.0).tag(sync=True)
+    visible = Bool(True).tag(sync=True)
     min_zoom = Int(0).tag(sync=True, o=True)
     max_zoom = Int(18).tag(sync=True, o=True)
     min_native_zoom = Int(default_value=None, allow_none=True).tag(sync=True, o=True)

python/jupyter_leaflet/src/layers/VectorTileLayer.ts

@@ -17,6 +17,9 @@ export class LeafletVectorTileLayerModel extends LeafletLayerModel {
       max_zoom: 18,
       min_native_zoom: null,
       max_native_zoom: null,
+      interactive: true,
+      visible: true,
+      opacity: 1.0,
     };
   }
 }
@@ -30,7 +33,7 @@ export class LeafletVectorTileLayerView extends LeafletLayerView {
     };
     options['rendererFactory'] = L.canvas.tile;
 
-    let x: any = this.model.get('vectorTileLayerStyles');
+    let x: any = options['vectorTileLayerStyles'];
     if (typeof x === 'string') {
       try {
         let blobCode = `const jsStyle=${x}; export { jsStyle };`;
@@ -55,6 +58,18 @@ export class LeafletVectorTileLayerView extends LeafletLayerView {
     this.listenTo(this.model, 'change:url', () => {
       this.obj.setUrl(this.model.get('url'));
     });
+    this.listenTo(this.model, 'change:opacity', () => {
+      if (this.model.get('visible')) {
+        this.obj.setOpacity(this.model.get('opacity'));
+      }
+    });
+    this.listenTo(this.model, 'change:visible', () => {
+      if (this.model.get('visible')) {
+        this.obj.setOpacity(this.model.get('opacity'));
+      } else {
+        this.obj.setOpacity(0);
+      }
+    });
   }
 
   handle_message(content: { msg: string }) {