Backwards compatiblity and update layer_styles

Author: lopezvoliver

python/ipyleaflet/ipyleaflet/leaflet.py

@@ -1125,7 +1125,6 @@ class VectorTileLayer(Layer):
     attribution = Unicode().tag(sync=True, o=True)
 
     layer_styles = Union([Dict(), Unicode()]).tag(sync=True, o=True)
-    vector_tile_layer_styles = Union([Dict(), Unicode()], allow_none=True, default_value=None)
     opacity = Float(1.0, min=0.0, max=1.0).tag(sync=True,o=True)
     visible = Bool(True).tag(sync=True, o=True)
     interactive = Bool(False).tag(sync=True, o=True)
@@ -1137,12 +1136,22 @@ class VectorTileLayer(Layer):
     feature_id = Unicode(allow_none=True, default_value=None).tag(sync=True, o=True)
     feature_style = Dict().tag(sync=True)
 
+    # Backwards compatibility: allow vector_tile_layer_styles as input:
+    @property
+    def vector_tile_layer_styles(self):
+        return self.layer_styles
+
+    @vector_tile_layer_styles.setter
+    def vector_tile_layer_styles(self, value):
+        self.layer_styles = value     
+
     def __init__(self, **kwargs):
         super(VectorTileLayer, self).__init__(**kwargs)
         # Backwards compatibility: allow vector_tile_layer_styles as input:
-        vtl_style = getattr(self, "vector_tile_layer_styles")
-        if(vtl_style):
-            self.layer_styles = vtl_style
+        if "vector_tile_layer_styles" in kwargs:
+            vtl_style = kwargs["vector_tile_layer_styles"]
+            if(vtl_style):
+                self.layer_styles = vtl_style
 
     def redraw(self):
         """Force redrawing the tiles.

python/jupyter_leaflet/src/layers/VectorTileLayer.ts

@@ -29,6 +29,28 @@ export class LeafletVectorTileLayerModel extends LeafletLayerModel {
 export class LeafletVectorTileLayerView extends LeafletLayerView {
   obj: VectorGrid.Protobuf;
 
+  async set_vector_tile_layer_styles(options: any) {
+    if ('layerStyles' in options) {
+      let x: any = options['layerStyles'];
+      options['vectorTileLayerStyles'] = x;
+      if (typeof x === 'string') {
+        try {
+          let blobCode = `const jsStyle=${x}; export { jsStyle };`;
+
+          const blob = new Blob([blobCode], { type: 'text/javascript' });
+          const url = URL.createObjectURL(blob);
+          const module = await import(/* webpackIgnore: true*/ url);
+          const jsStyle = module.jsStyle;
+
+          options['vectorTileLayerStyles'] = jsStyle;
+        } catch (error) {
+          options['vectorTileLayerStyles'] = {};
+        }
+      }
+    }
+    return options;
+  }
+
   async create_obj() {
     let options = {
       ...this.get_options(),
@@ -50,24 +72,7 @@ export class LeafletVectorTileLayerView extends LeafletLayerView {
       }
     }
 
-    if ('layerStyles' in options) {
-      let x: any = options['layerStyles'];
-      options['vectorTileLayerStyles'] = x;
-      if (typeof x === 'string') {
-        try {
-          let blobCode = `const jsStyle=${x}; export { jsStyle };`;
-
-          const blob = new Blob([blobCode], { type: 'text/javascript' });
-          const url = URL.createObjectURL(blob);
-          const module = await import(/* webpackIgnore: true*/ url);
-          const jsStyle = module.jsStyle;
-
-          options['vectorTileLayerStyles'] = jsStyle;
-        } catch (error) {
-          options['vectorTileLayerStyles'] = {};
-        }
-      }
-    }
+    options = await this.set_vector_tile_layer_styles(options);
 
     this.obj = L.vectorGrid.protobuf(this.model.get('url'), options);
     this.model.on('msg:custom', this.handle_message.bind(this));
@@ -76,6 +81,18 @@ export class LeafletVectorTileLayerView extends LeafletLayerView {
       this.obj.setOpacity(0);
     }
 
+    this.model.on('change:layer_styles', async () => {
+      let options = {
+        ...this.get_options(),
+      };
+      options = await this.set_vector_tile_layer_styles(options);
+      this.obj.options.vectorTileLayerStyles = options['vectorTileLayerStyles'];
+      if (this.model.get('visible') == false) {
+        this.obj.setOpacity(0);
+      }
+      this.obj.redraw();
+    });
+
     this.model.on('change:feature_style', () => {
       const feature_style = this.model.get('feature_style');
       const reset = feature_style['reset'];