tilelayer+ view center zoom+map

QuantStack · Jun 21, 2024 · ae78e6e · ae78e6e
1 parent 5014d8d
commit ae78e6e
Showing 1 changed file with 18 additions and 6 deletions.
diff --git a/src/widget.ts b/src/widget.ts
@@ -7,7 +7,7 @@ import {
   unpack_models,
   ViewList,
 } from '@jupyter-widgets/base';
-import { TileLayerModel, TileLayerView } from './tilelayer';
+import { LayerModel, LayerView } from './layer';
 import { BaseOverlayModel, BaseOverlayView } from './baseoverlay';
 import { BaseControlModel, BaseControlView } from './basecontrol';
 import { ViewObjectEventTypes } from 'ol/View';
@@ -74,6 +74,7 @@ export class MapView extends DOMWidgetView {
     this.mapContainer = document.createElement('div');
     this.mapContainer.className = 'ol-container';
     this.el.appendChild(this.mapContainer);
+
     this.layerViews = new ViewList(
       this.addLayerModel,
       this.removeLayerView,
@@ -99,6 +100,17 @@ export class MapView extends DOMWidgetView {
       }),
       layers: [new TileLayer()],
     });
+    this.map.getView().on('change:center', () => {
+      this.model.set('center', this.map.getView().getCenter());
+      this.model.save_changes();
+    });
+
+    this.map
+      .getView()
+      .on('change:resolution' as ViewObjectEventTypes, (event: ObjectEvent) => {
+        this.model.set('zoom', this.map.getView().getZoom());
+        this.model.save_changes();
+      });
 
     this.map.getView().on('change:center', () => {
       this.model.set('center', this.map.getView().getCenter());
@@ -123,7 +135,7 @@ export class MapView extends DOMWidgetView {
   }
 
   layersChanged() {
-    const layers = this.model.get('layers') as TileLayerModel[];
+    const layers = this.model.get('layers') as LayerModel[];
     this.layerViews.update(layers);
   }
 
@@ -151,7 +163,7 @@ export class MapView extends DOMWidgetView {
     }
   }
 
-  removeLayerView(child_view: TileLayerView) {
+  removeLayerView(child_view: LayerView) {
     this.map.removeLayer(child_view.obj);
     child_view.remove();
   }
@@ -168,8 +180,8 @@ export class MapView extends DOMWidgetView {
     child_view.remove();
   }
 
-  async addLayerModel(child_model: TileLayerModel) {
-    const view = await this.create_child_view<TileLayerView>(child_model, {
+  async addLayerModel(child_model: LayerModel) {
+    const view = await this.create_child_view<LayerView>(child_model, {
       map_view: this,
     });
     this.map.addLayer(view.obj);
@@ -208,7 +220,7 @@ export class MapView extends DOMWidgetView {
   imageElement: HTMLImageElement;
   mapContainer: HTMLDivElement;
   map: Map;
-  layerViews: ViewList<TileLayerView>;
+  layerViews: ViewList<LayerView>;
   overlayViews: ViewList<BaseOverlayView>;
   controlViews: ViewList<BaseControlView>;
 }