Add method to set source

Author: stfnkth

notebooks/geopandas/icon_layer.ipynb

@@ -8,7 +8,7 @@
    "outputs": [],
    "source": [
     "import openlayers as ol\n",
-    "from openlayers.geopandas import GeoDataFrame"
+    "from openlayers.geopandas import GeoDataFrame, gdf_to_geojson"
    ]
   },
   {
@@ -212,32 +212,32 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 7,
+   "execution_count": 5,
    "id": "fa678da4-ead3-489c-9296-5907060d9077",
    "metadata": {},
    "outputs": [],
    "source": [
-    "m = gdf.ol.icon(icon_src=\"https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png\", icon_scale=0.1).explore()"
+    "m = gdf[0:10].ol.icon(icon_src=\"https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png\", icon_scale=0.1).explore()"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 9,
+   "execution_count": 6,
    "id": "f25f4d6d-bf6a-4c0c-9f99-99382b8e9dfb",
    "metadata": {},
    "outputs": [
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "4b717fb6022b4d05b03bfda16129f179",
+       "model_id": "158bb835125f444080430a06ea50d3fc",
        "version_major": 2,
        "version_minor": 1
       },
       "text/plain": [
        "MapWidget(calls=[{'method': 'addLayer', 'args': ({'id': 'geopandas', 'source': {'@@geojson': {'type': 'Feature…"
       ]
      },
-     "execution_count": 9,
+     "execution_count": 6,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -248,18 +248,94 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 1,
+   "execution_count": 12,
    "id": "74dea72b-2158-4347-984f-6d62c130c01e",
    "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "{'layers': [{'id': 'osm', 'type': 'TileLayer'},\n",
+       "  {'id': 'geopandas', 'type': 'WebGLVectorLayer'}],\n",
+       " 'controls': []}"
+      ]
+     },
+     "execution_count": 12,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "m.metadata"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 12,
+   "id": "beca60c5-3925-45f1-a7d5-1a409deb6272",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# m.add_call(\"setVectorSource\", \"geopandas\", ol.VectorSource(geojson=gdf_to_geojson(gdf[20:100])).model_dump())"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 8,
+   "id": "dcc1f821-ecf7-4bf0-8dab-7b6e141824e5",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "new_src = ol.VectorSource(geojson=gdf_to_geojson(gdf[20:100]))"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 9,
+   "id": "41c064ca-b232-49a5-a597-ce69746446da",
+   "metadata": {},
    "outputs": [],
    "source": [
-    "# gdf[0:10]"
+    "m.set_source(layer_id=\"geopandas\", source=new_src)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 10,
+   "id": "24a5bdfa-a5f0-4493-999a-89f5876a57d8",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m.remove_layer(\"osm\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 13,
+   "id": "31fdcb7d-b5b0-4755-adb2-d192e7e89114",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "{'layers': [{'id': 'osm', 'type': 'TileLayer'},\n",
+       "  {'id': 'geopandas', 'type': 'WebGLVectorLayer'}],\n",
+       " 'controls': []}"
+      ]
+     },
+     "execution_count": 13,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "m.metadata"
    ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
-   "id": "beca60c5-3925-45f1-a7d5-1a409deb6272",
+   "id": "50db0b70-4efc-4f68-a6ec-e3bab5dde7be",
    "metadata": {},
    "outputs": [],
    "source": []

src/openlayers/js/openlayers.anywidget.js

@@ -9,7 +9,7 @@
 from .models.controls import ControlT
 from .models.layers import LayerT, TileLayer
 from .models.map_options import MapOptions
-from .models.sources import OSM
+from .models.sources import OSM, SourceT
 from .models.view import View
 from .styles import FlatStyle
 
@@ -182,6 +182,18 @@ def set_style(self, layer_id: str, style: FlatStyle | dict) -> None:
 
         self.add_layer_call(layer_id, "setStyle", style)
 
+    def set_source(self, layer_id: str, source: SourceT | dict) -> None:
+        """Set / Update the source of a layer
+        
+        Args:
+            layer_id {str}: The ID of the layer
+            source (SourceT | dict): The source of the layer
+        """
+        if isinstance(source, SourceT):
+            source = source.model_dump()
+
+        self.add_call("setSource", layer_id, source)
+
     def to_html(self, **kwargs) -> str:
         """Render map to HTML"""
         data = self.options | dict(calls=self.calls)

src/openlayers/js/openlayers.standalone.js

@@ -69,6 +69,8 @@ function render({ model, el }: { model: AnyModel; el: HTMLElement }): void {
     try {
       // @ts-expect-error
       mapWidget[msg.method](...msg.args);
+
+      // TODO: Move to 'map.ts'
       updateModelMetadata();
     } catch (error) {
       console.log("error in anywidget msg call", error);

src/openlayers/map.py

@@ -197,6 +197,17 @@ export default class MapWidget {
     layer[call.method](...call.args)
   }
 
+  setSource(layerId: string, sourceDef: JSONDef): void {
+    const layer = this.getLayer(layerId);
+    if (layer) {
+      const source = jsonConverter.parse(sourceDef);
+      layer.setSource(source);
+      const features = sourceDef[GEOJSON_IDENTIFIER];
+      if (features)
+        source.addFeatures(new GeoJSON().readFeatures(features));
+    }
+  }
+
   // --- Control methods
   getControl(controlId: string): Control | undefined {
     for (let control of this._map.getControls().getArray()) {