Store map position in schema

examples/france_hiking.jGIS

@@ -0,0 +1,85 @@
+{
+  "layers": {
+    "7db81237-a579-4daa-938f-5e61fdfb17e7": {
+      "name": "NASAGIBS.ModisTerraTrueColorCR Layer",
+      "visible": true,
+      "parameters": {
+        "source": "52252f5d-3cb7-45a8-a724-5793bf9950ec",
+        "opacity": 0.3
+      },
+      "type": "RasterLayer"
+    },
+    "0bfee293-9e2f-4434-8c5a-c90d19836bab": {
+      "name": "WaymarkedTrails.hiking Layer",
+      "type": "RasterLayer",
+      "parameters": {
+        "opacity": 0.6,
+        "source": "82691e55-f9e2-43be-8a07-3ae0409af7b4"
+      },
+      "visible": true
+    },
+    "4a0703b3-ed56-4158-8a2e-e008c3d0fee2": {
+      "name": "OpenStreetMap.Mapnik Layer",
+      "visible": true,
+      "type": "RasterLayer",
+      "parameters": {
+        "source": "60da082e-8b70-4fa2-b2f0-48524468fea0"
+      }
+    }
+  },
+  "sources": {
+    "60da082e-8b70-4fa2-b2f0-48524468fea0": {
+      "type": "RasterSource",
+      "parameters": {
+        "url": "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+        "minZoom": 0.0,
+        "maxZoom": 19.0,
+        "urlParameters": {},
+        "provider": "OpenStreetMap",
+        "attribution": "(C) OpenStreetMap contributors"
+      },
+      "name": "OpenStreetMap.Mapnik"
+    },
+    "52252f5d-3cb7-45a8-a724-5793bf9950ec": {
+      "parameters": {
+        "urlParameters": {
+          "time": "2024-07-07",
+          "tilematrixset": "GoogleMapsCompatible_Level",
+          "format": "jpg",
+          "variant": "MODIS_Terra_CorrectedReflectance_TrueColor"
+        },
+        "url": "https://map1.vis.earthdata.nasa.gov/wmts-webmerc/{variant}/default/{time}/{tilematrixset}{max_zoom}/{z}/{y}/{x}.{format}",
+        "minZoom": 1.0,
+        "maxZoom": 9.0,
+        "attribution": "Imagery provided by services from the Global Imagery Browse Services (GIBS), operated by the NASA/GSFC/Earth Science Data and Information System (ESDIS) with funding provided by NASA/HQ.",
+        "provider": "NASAGIBS"
+      },
+      "name": "NASAGIBS.ModisTerraTrueColorCR",
+      "type": "RasterSource"
+    },
+    "82691e55-f9e2-43be-8a07-3ae0409af7b4": {
+      "name": "WaymarkedTrails.hiking",
+      "type": "RasterSource",
+      "parameters": {
+        "minZoom": 0.0,
+        "url": "https://tile.waymarkedtrails.org/{variant}/{z}/{x}/{y}.png",
+        "attribution": "Map data: (C) OpenStreetMap contributors | Map style: (C) waymarkedtrails.org (CC-BY-SA)",
+        "maxZoom": 18.0,
+        "provider": "WaymarkedTrails",
+        "urlParameters": {
+          "variant": "hiking"
+        }
+      }
+    }
+  },
+  "options": {
+    "latitude": 46.623742146769416,
+    "zoom": 4.947275971927249,
+    "longitude": 1.6082511087276998
+  },
+  "layerTree": [
+    "4a0703b3-ed56-4158-8a2e-e008c3d0fee2",
+    "7db81237-a579-4daa-938f-5e61fdfb17e7",
+    "0bfee293-9e2f-4434-8c5a-c90d19836bab"
+  ]
+}

examples/test.jGIS

@@ -54,7 +54,11 @@
       }
     }
   },
-  "options": {},
+  "options": {
+    "latitude": 0,
+    "longitude": 0,
+    "zoom": 0
+  },
   "layerTree": [
     "2467576f-b527-4cb7-998d-fa1d056fb8a1",
     {
@@ -70,4 +74,4 @@
       "name": "level 1 group"
     }
   ]
-}
+}

packages/base/src/mainview/mainview.tsx

@@ -100,6 +100,28 @@ export class MainView extends React.Component<IProps, IStates> {
         container: this.divRef.current
       });
 
+      this._Map.on('zoomend', () => {
+        if (!this._initializedPosition) {
+          return;
+        }
+
+        const zoom = this._Map.getZoom();
+        this._model.setOptions({ ...this._model.getOptions(), zoom });
+      });
+
+      this._Map.on('moveend', () => {
+        if (!this._initializedPosition) {
+          return;
+        }
+
+        const center = this._Map.getCenter();
+        this._model.setOptions({
+          ...this._model.getOptions(),
+          latitude: center.lat,
+          longitude: center.lng
+        });
+      });
+
       this.setState(old => ({ ...old, loading: false }));
     }
   };
@@ -386,7 +408,21 @@ export class MainView extends React.Component<IProps, IStates> {
     sender: IJupyterGISDoc,
     change: MapChange
   ): void {
-    // TODO SOMETHING
+    if (!this._initializedPosition) {
+      const options = this._model.getOptions();
+
+      // It is important to call setZoom first, otherwise maplibre does set the center properly
+      this._Map.setZoom(options.zoom || 0);
+      this._Map.setCenter(
+        (options.longitude &&
+          options.latitude && {
+            lng: options.longitude,
+            lat: options.latitude
+          }) || [0, 0]
+      );
+
+      this._initializedPosition = true;
+    }
   }
 
   private _onViewChanged(
@@ -486,6 +522,7 @@ export class MainView extends React.Component<IProps, IStates> {
     );
   }
 
+  private _initializedPosition = false;
   private divRef = React.createRef<HTMLDivElement>(); // Reference of render div
 
   private _Map: MapLibre.Map;

packages/schema/src/doc.ts

@@ -1,5 +1,5 @@
 import { Delta, MapChange, YDocument } from '@jupyter/ydoc';
-import { JSONExt, JSONObject } from '@lumino/coreutils';
+import { JSONExt } from '@lumino/coreutils';
 import { ISignal, Signal } from '@lumino/signaling';
 import * as Y from 'yjs';
 
@@ -106,8 +106,8 @@ export class JupyterGISDoc
     });
   }
 
-  get options(): JSONObject {
-    return JSONExt.deepCopy(this._options.toJSON());
+  get options(): IJGISOptions {
+    return JSONExt.deepCopy(this._options.toJSON()) as IJGISOptions;
   }
 
   get layersChanged(): ISignal<IJupyterGISDoc, IJGISLayerDocChange> {

packages/schema/src/interfaces.ts

@@ -146,6 +146,8 @@ export interface IJupyterGISModel extends DocumentRegistry.IModel {
     groupName?: string,
     position?: number
   ): void;
+  getOptions(): IJGISOptions;
+  setOptions(value: IJGISOptions): void;
 
   syncSelected(value: { [key: string]: ISelection }, emitter?: string): void;
   setUserToFollow(userId?: number): void;

packages/schema/src/model.ts

@@ -13,7 +13,8 @@ import {
   IJGISLayerGroup,
   IJGISLayerTree,
   IJGISSource,
-  IJGISSources
+  IJGISSources,
+  IJGISOptions
 } from './_interface/jgis';
 import { JupyterGISDoc } from './doc';
 import {
@@ -164,7 +165,11 @@ export class JupyterGISModel implements IJupyterGISModel {
       this.sharedModel.sources = jsonData.sources ?? {};
       this.sharedModel.layers = jsonData.layers ?? {};
       this.sharedModel.layerTree = jsonData.layerTree ?? [];
-      this.sharedModel.options = jsonData.options ?? {};
+      this.sharedModel.options = jsonData.options ?? {
+        latitude: 0,
+        longitude: 0,
+        zoom: 0
+      };
     });
     this.dirty = true;
   }
@@ -274,6 +279,14 @@ export class JupyterGISModel implements IJupyterGISModel {
     this._addLayerTreeItem(id, groupName, position);
   }
 
+  setOptions(value: IJGISOptions) {
+    this._sharedModel.options = value;
+  }
+
+  getOptions(): IJGISOptions {
+    return this._sharedModel.options;
+  }
+
   syncSelected(value: { [key: string]: ISelection }, emitter?: string): void {
     this.sharedModel.awareness.setLocalStateField('selected', {
       value,

packages/schema/src/schema/jgis.json

@@ -115,8 +115,22 @@
       "title": "IJGISOptions",
       "type": "object",
       "default": {},
+      "required": ["latitude", "longitude", "zoom"],
       "additionalProperties": false,
-      "properties": {}
+      "properties": {
+        "latitude": {
+          "type": "number",
+          "default": 0
+        },
+        "longitude": {
+          "type": "number",
+          "default": 0
+        },
+        "zoom": {
+          "type": "number",
+          "default": 0
+        }
+      }
     },
     "jGISLayerItem": {
       "title": "IJGISLayerItem",

python/jupytergis_core/src/jgisplugin/plugins.ts

@@ -111,7 +111,7 @@ const activate = (
         format: 'text',
         size: undefined,
         content:
-          '{\n\t"layers": {},\n\t"sources": {},\n\t"options": {},\n\t"layerTree": []\n}'
+          '{\n\t"layers": {},\n\t"sources": {},\n\t"options": {"latitude": 0, "longitude": 0, "zoom": 0},\n\t"layerTree": []\n}'
       });
 
       // Open the newly created file with the 'Editor'