Send view state

Author: Stefan Kuethe

notebooks/layers/Untitled.ipynb

@@ -52,7 +52,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "ee4ebb74b08d4764ba14f4b4330800a8",
+       "model_id": "a745492caf154ef2ae3c8d43386174ed",
        "version_major": 2,
        "version_minor": 1
       },
@@ -69,6 +69,55 @@
     "m"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": 12,
+   "id": "705018de-ed98-4e03-9db6-5ddf35011282",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "{'layers': [{'id': 'carto-dark-all', 'type': 'TileLayer'},\n",
+       "  {'id': '8554b6c6-07b0-4016-a100-b03b889cf7d6', 'type': 'WebGLVectorLayer'}],\n",
+       " 'controls': [{'id': '09cfeacc-b435-473c-8dc2-5624b8fafe59',\n",
+       "   'type': 'ZoomSliderControl'},\n",
+       "  {'id': 'MyNiceCtrl', 'type': 'OverviewMapControl'}]}"
+      ]
+     },
+     "execution_count": 12,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "m.map_metadata"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 14,
+   "id": "8bc59002-4b1a-4caa-9b67-a64cd83a60c1",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "{'center': [873750.6090347767, 9696804.421408108],\n",
+       " 'projection': 'EPSG:3857',\n",
+       " 'zoom': 3.573608880492306,\n",
+       " 'center_lonlat': [7.849035266046803, 65.33362816204604]}"
+      ]
+     },
+     "execution_count": 14,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "m.map_view_state"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": 7,
@@ -77,8 +126,8 @@
    "outputs": [],
    "source": [
     "ctrl_id = \"MyNiceCtrl\"\n",
-    "# m.add_control(ol.controls.OverviewMapControl(id=ctrl_id))\n",
-    "m.remove_control(control_id=ctrl_id)"
+    "m.add_control(ol.controls.OverviewMapControl(id=ctrl_id))\n",
+    "# m.remove_control(control_id=ctrl_id)"
    ]
   },
   {
@@ -104,7 +153,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 8,
+   "execution_count": 6,
    "id": "1aa4155d",
    "metadata": {},
    "outputs": [],
@@ -115,14 +164,14 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 10,
+   "execution_count": 7,
    "id": "2e7cee1d",
    "metadata": {},
    "outputs": [],
    "source": [
-    "# m.add_layer(countries)\n",
+    "m.add_layer(countries)\n",
     "\n",
-    "m.remove_layer(countries.id)\n",
+    "# m.remove_layer(countries.id)\n",
     "# m.add_tooltip()\n",
     "#import geopandas as gpd\n",
     "#from openlayers.geopandas import OLGeoDataFrame"

src/openlayers/anywidget.py

@@ -22,8 +22,10 @@ class MapWidget(Map, AnyWidget):
     calls = traitlets.List().tag(sync=True)
     map_created = traitlets.Bool().tag(sync=True)
     map_options = traitlets.Dict().tag(sync=True)
-    map_clicked = traitlets.Dict().tag(sync=True)
-    debug_data = traitlets.Dict().tag(sync=True)
+    # map_clicked = traitlets.Dict().tag(sync=True)
+    map_view_state = traitlets.Dict().tag(sync=True)
+    map_metadata = traitlets.Dict().tag(sync=True)
+    # debug_data = traitlets.Dict().tag(sync=True)
 
     def __init__(
         self,

src/openlayers/js/openlayers.anywidget.js

@@ -1,13 +1,27 @@
 import "ol/ol.css";
 
 import MapWidget from "./map";
-import { parseClickEvent } from "./utils";
+import { parseClickEvent, parseView } from "./utils";
 
 // --- Types
 import type { AnyModel } from "@anywidget/types";
+import type { Map } from "ol";
 
 // --- Main function
 function render({ model, el }: { model: AnyModel; el: HTMLElement }): void {
+  function updateModelMetadata(): void {
+    model.set("map_metadata", mapWidget.getMetadata());
+    model.save_changes();
+  }
+
+  function updateModelViewState(): void {
+    const view = map.getView();
+    const value = parseView(view);
+    model.set("map_view_state", value);
+    model.save_changes()
+  }
+
+  // --- Main
   console.log("Welcome to ol-anywidget", el);
 
   const height = model.get("height") || "400px";
@@ -18,7 +32,7 @@ function render({ model, el }: { model: AnyModel; el: HTMLElement }): void {
   // ...
   const mapOptions = model.get("map_options");
   console.log("mapOptions", mapOptions);
-  const mapWidget = (window as any).anywidgetMapWidget = new MapWidget(mapElement, mapOptions);
+  const mapWidget = (window as any).anywidgetMapWidget = new MapWidget(mapElement, mapOptions, model);
 
   model.set("map_created", true);
   model.save_changes();
@@ -30,7 +44,15 @@ function render({ model, el }: { model: AnyModel; el: HTMLElement }): void {
     mapWidget[call.method](...call.args);
   }
 
+  updateModelMetadata();
+
   const map = mapWidget.getMap();
+  updateModelViewState();
+  map.on("moveend", (e) => {
+    // console.log("change event", map.getView());
+    updateModelViewState();
+  })
+
   /*
   map.on("click", (e) => {
     const info = parseClickEvent(e);
@@ -46,6 +68,7 @@ function render({ model, el }: { model: AnyModel; el: HTMLElement }): void {
     try {
       // @ts-expect-error
       mapWidget[msg.method](...msg.args);
+      updateModelMetadata();
     } catch (error) {
       console.log("error in anywidget msg call", error);
     }

src/openlayers/js/openlayers.standalone.js

@@ -15,6 +15,8 @@ import type WebGLVectorLayer from "ol/layer/WebGLVector";
 import type { Coordinate } from "ol/coordinate";
 import type { MyMapOptions } from ".";
 
+import type { AnyModel } from "@anywidget/types";
+
 type Metadata = {
   layers: any[];
   controls: any[];
@@ -62,8 +64,11 @@ export default class MapWidget {
   _container: HTMLElement;
   _map: Map;
   _metadata: Metadata = { layers: [], controls: [] };
+  _model: AnyModel | undefined;
+
+  constructor(mapElement: HTMLElement, mapOptions: MyMapOptions, model?: AnyModel | undefined) {
+    this._model = model;
 
-  constructor(mapElement: HTMLElement, mapOptions: MyMapOptions) {
     const view = parseViewDef(mapOptions.view);
     let baseControls: Control[] = [];
     let baseLayers: Layer[] = [];

srcjs/ipywidget-ts/anywidget.ts

@@ -1,25 +1,37 @@
 import type { MapBrowserEvent } from "ol";
 import type { FeatureLike } from "ol/Feature";
 import type { FeatureProps } from ".";
+import type { View } from "ol";
 
-import { transform as transformProj, toLonLat } from "ol/proj";
+import { toLonLat } from "ol/proj";
 
+// TODO: get 'info' from 'parseView' 
 function parseClickEvent(e: MapBrowserEvent): any {
     const view = e.target.getView();
     const projectionCode = view.getProjection().getCode();
     const info = {
         center: view.getCenter(),
         projection: projectionCode,
         zoom: view.getZoom(),
-        // lnglat: transformProj(e.coordinate, projectionCode, "EPSG:4326")
-        lonLat: toLonLat(e.coordinate)
+        centerLonLat: toLonLat(e.coordinate)
     };
     return info;
 }
 
+function parseView(view: View): any {
+    const center = view.getCenter() || [];
+    const projectionCode = view.getProjection().getCode();
+    return {
+        center: center,
+        projection: projectionCode,
+        zoom: view.getZoom(),
+        center_lonlat: toLonLat(center)
+    };
+}
+
 function getFeatureProperties(feature: FeatureLike): FeatureProps {
     let { geometry, ...props } = feature.getProperties();
     return props;
 }
 
-export { parseClickEvent, getFeatureProperties }
+export { parseClickEvent, getFeatureProperties, parseView }