Add WebGLVectorTileLayer

Author: stfnkth

examples/standalone/layers/pmtiles_vector_layer.py

@@ -4,7 +4,10 @@
 
 url = "https://r2-public.protomaps.com/protomaps-sample-datasets/nz-buildings-v3.pmtiles"
 
-pmtiles = ol.layers.VectorTileLayer(
+LayerModel = ol.layers.VectorTileLayer
+LayerModel = ol.layers.WebGLVectorTileLayer
+
+pmtiles = LayerModel(
     id="pmtiles",
     style=default_style(stroke_color="green", stroke_with=3),
     source=PMTilesVectorSource(

src/openlayers/js/openlayers.standalone.js

@@ -8,7 +8,8 @@
     VectorLayer,
     WebGLTileLayer,
     WebGLVectorLayer,
-    VectorTileLayer
+    VectorTileLayer,
+    WebGLVectorTileLayer
 )
 
 __all__ = [

src/openlayers/layers.py

@@ -55,9 +55,15 @@ def validate_style(cls, v):
 
         return v
 
+
+class WebGLVectorTileLayer(VectorTileLayer): ...
+
+
 class WebGLTileLayer(Layer):
     style: dict | None = None
 
 
 # --- Layer type
-LayerT = Union[Layer, TileLayer, VectorLayer, WebGLVectorLayer, WebGLTileLayer, VectorTileLayer]
+LayerT = Union[
+    Layer, TileLayer, VectorLayer, WebGLVectorLayer, WebGLTileLayer, VectorTileLayer
+]

src/openlayers/models/layers.py

@@ -5,16 +5,20 @@ import MousePositionControl from 'ol/control/MousePosition.js';
 import OverviewMapControl from 'ol/control/OverviewMap.js';
 import Zoom from 'ol/control/Zoom';
 import Rotate from 'ol/control/Rotate';
+import Attribution from 'ol/control/Attribution.js';
 
 import { InfoBox } from './custom-controls';
 
 const zoom = new Zoom();
-zoom.setProperties({ id: "zoom", type: "zoomControl" });
+zoom.setProperties({ id: "zoom", type: "ZoomControl" });
 
 const rotate = new Rotate();
 rotate.setProperties({ id: "rotate", type: "RotateControl" });
 
-const defaultControls = [zoom, rotate];
+const attribution = new Attribution();
+attribution.setProperties({ id: "attribution", type: "AttributionControl" });
+
+const defaultControls = [zoom, rotate, attribution];
 
 const controlCatalog: ControlCatalog = {
     ScaleLineControl: ScaleLineControl,
@@ -24,6 +28,7 @@ const controlCatalog: ControlCatalog = {
     OverviewMapControl: OverviewMapControl,
     ZoomControl: Zoom,
     RotateControl: Rotate,
+    AttributionControl: Attribution,
     InfoBox: InfoBox
 };
 

srcjs/ipywidget-ts/controls.ts

@@ -1,8 +1,13 @@
-import TileLayer from "ol/layer/Tile";
 import VectorLayer from "ol/layer/Vector";
+import TileLayer from "ol/layer/Tile";
+import VectorTileLayer from "ol/layer/VectorTile";
+
+import ImageLayer from "ol/layer/Image";
+
+// WebGL
 import WebGLVectorLayer from 'ol/layer/WebGLVector.js';
 import WebGLTileLayer from 'ol/layer/WebGLTile.js';
-import VectorTileLayer from "ol/layer/VectorTile";
+import WebGLVectorTileLayer from 'ol/layer/WebGLVectorTile.js';
 
 import VectorSource from "ol/source/Vector";
 
@@ -11,7 +16,9 @@ const layerCatalog: LayerCatalog = {
     VectorLayer: VectorLayer,
     WebGLVectorLayer: WebGLVectorLayer,
     WebGLTileLayer: WebGLTileLayer,
-    VectorTileLayer: VectorTileLayer
+    VectorTileLayer: VectorTileLayer,
+    WebGLVectorTileLayer: WebGLVectorTileLayer,
+    ImageLayer: ImageLayer
 };
 
 // Draw interaction

srcjs/ipywidget-ts/layers.ts

@@ -14,7 +14,8 @@ type LayerCatalog = {
     VectorLayer: any;
     WebGLVectorLayer: any;
     WebGLTileLayer: any;
-    VectorTileLayer: any
+    VectorTileLayer: any;
+    [key: string]: any;
 }
 type LayerCatalogKey = keyof LayerCatalog;