Improve vector tile layer (#1206)

* Add min/max/native zoom options for VectorTileLayers

* Pass vector_tile_layer_styles as string

* Fix typescript error

* Updated docstring

* lint

* Update python/jupyter_leaflet/src/layers/VectorTileLayer.ts

Co-authored-by: martinRenou <[email protected]>

* Update docstring

---------

Co-authored-by: martinRenou <[email protected]>

Author: lopezvoliver

python/ipyleaflet/ipyleaflet/leaflet.py

@@ -1096,8 +1096,16 @@ class VectorTileLayer(Layer):
         Url to the vector tile service.
     attribution: string, default ""
         Vector tile service attribution.
-    vector_tile_layer_styles: dict, default {}
+    vector_tile_layer_styles: dict or string, default {}. If string, it will be parsed as a javascript object (useful for defining styles that depend on properties and/or zoom).
         CSS Styles to apply to the vector data.
+    min_zoom: int, default 0
+        The minimum zoom level down to which this layer will be displayed (inclusive).
+    max_zoom: int, default 18
+        The maximum zoom level up to which this layer will be displayed (inclusive).
+    min_native_zoom: int, default None
+        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.
     """
 
     _view_name = Unicode("LeafletVectorTileLayerView").tag(sync=True)
@@ -1106,7 +1114,12 @@ class VectorTileLayer(Layer):
     url = Unicode().tag(sync=True, o=True)
     attribution = Unicode().tag(sync=True, o=True)
 
-    vector_tile_layer_styles = Dict().tag(sync=True, o=True)
+    vector_tile_layer_styles = Union([Dict(), Unicode()]).tag(sync=True, o=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)
+    max_native_zoom = Int(default_value=None, allow_none=True).tag(sync=True, o=True)
 
     def redraw(self):
         """Force redrawing the tiles.

python/jupyter_leaflet/src/layers/VectorTileLayer.ts

@@ -13,18 +13,39 @@ export class LeafletVectorTileLayerModel extends LeafletLayerModel {
       _model_name: 'LeafletVectorTileLayerModel',
       url: '',
       vectorTileLayerStyles: {},
+      min_zoom: 0,
+      max_zoom: 18,
+      min_native_zoom: null,
+      max_native_zoom: null,
     };
   }
 }
 
 export class LeafletVectorTileLayerView extends LeafletLayerView {
   obj: VectorGrid.Protobuf;
 
-  create_obj() {
-    const options = {
+  async create_obj() {
+    let options = {
       ...this.get_options(),
-      rendererFactory: L.canvas.tile,
     };
+    options['rendererFactory'] = L.canvas.tile;
+
+    let x: any = this.model.get('vectorTileLayerStyles');
+    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'] = {};
+      }
+    }
+
     this.obj = L.vectorGrid.protobuf(this.model.get('url'), options);
     this.model.on('msg:custom', this.handle_message.bind(this));
   }