Add useGeographic() so that we can pass lon lat coordinates

Author: stfnkth

docs/api/map.md

@@ -2,4 +2,7 @@
 
 ::: openlayers.Map
 
+::: openlayers.view.View
+
 ::: openlayers.MapWidget
+

examples/standalone/ol_express.py

@@ -1,9 +1,10 @@
 # import json
 # import openlayers as ol
-import openlayers.express as olx
+import openlayers.express as ox
 from openlayers.basemaps import BasemapLayer
+from openlayers import View
 
-icon_layer = olx.IconLayer(
+icon_layer = ox.IconLayer(
     # id="icon-layer",
     data="https://openlayers.org/data/vector/populated-places.json",
     icon_src="https://openlayers.org/en/latest/examples/data/icon.png",
@@ -20,7 +21,7 @@
 
 line_data = "https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart.geo.json"
 
-generic_geojson_layer = olx.GeoJSONLayer(
+generic_geojson_layer = ox.GeoJSONLayer(
     data = line_data,
     #stroke_width = 5,
     #stroke_color = "green",
@@ -30,12 +31,12 @@
     #circle_radius = 7
 )
 
-circle_layer = olx.CircleLayer(
+circle_layer = ox.CircleLayer(
     data="https://openlayers.org/data/vector/populated-places.json",
     circle_fill_color="yellow"
     )
 
-fill_layer = olx.FillLayer(
+fill_layer = ox.FillLayer(
     data=None ,#"https://openlayers.org/en/v4.6.5/examples/data/geojson/countries.geojson",
     stroke_width=4,
     fill_color="yellow",
@@ -53,4 +54,6 @@
 # print(json.dumps(m.calls))
 # print(json.dumps(m.map_options))
 
+# m.set_center((9.5, 51.31667))
+m.set_view(View(center=(9.5, 51.31667), zoom=14))
 m.save()

src/openlayers/anywidget.py

@@ -12,7 +12,11 @@
 
 
 class MapWidget(Map, AnyWidget):
-    """Map widget"""
+    """Initialize a new `MapWidget`instance
+    
+    Note:
+        See [Map](openlayers.Map) for details.
+    """
 
     _esm = Path(__file__).parent / "js" / "openlayers.anywidget.js"
     _css = Path(__file__).parent / "js" / "openlayers.anywidget.css"

src/openlayers/js/openlayers.standalone.js

@@ -57,6 +57,14 @@ def add_view_call(self, method_name: str, *args: Any) -> None:
         view_call = dict(method=method_name, args=args)
         self.add_call("applyCallToView", view_call)
 
+    def set_view(self, view: View) -> None:
+        """Set the view state of the map
+
+        Args:
+            view (View): The view state of the map
+        """
+        self.add_call("setView", view.model_dump())
+
     def set_zoom(self, zoom_level: float | int) -> None:
         """Set the zoom level ot the map view
 
@@ -66,15 +74,17 @@ def set_zoom(self, zoom_level: float | int) -> None:
         self.add_view_call("setZoom", zoom_level)
 
     def set_center(
-        self, lonlat: tuple[float, float] = None, center: tuple[float, float] = None
+        self, lonlat: tuple[float, float] = None, transform: bool = True
     ) -> None:
         """Set the center of the map view
-        
+
         Args:
-            lonlat (tuple[float, float]): center as (lon, lat)
-            center (tuple[float, float]) center as (x, y) of view projection
+            lonlat (tuple[float, float]): The centerpoint of the map as `(lon, lat)` pair
+            transform (bool): Whether coordinates should be transformed to `EPSG:3857`,
+                which is the default projection of the view
         """
-        center = center or default_crs_transformer().transform(*lonlat)
+        # center = default_crs_transformer().transform(*lonlat) if transform else lonlat
+        center = lonlat
         self.add_view_call("setCenter", center)
 
     def add_layer(self, layer: LayerT | LayerLike | dict) -> None:
@@ -165,8 +175,6 @@ def set_style(self, layer_id: str, style: FlatStyle | dict) -> None:
 
         self.add_layer_call(layer_id, "setStyle", style)
 
-    def set_view(self, view: View) -> None: ...
-
     def to_html(self, **kwargs) -> str:
         """Render map to HTML"""
         data = self.map_options | dict(calls=self.calls)

src/openlayers/map.py

@@ -1,9 +1,12 @@
 from __future__ import annotations
 
-from ..abstracts import MyBaseModel
+from pydantic import Field
+
+# from ..abstracts import MyBaseModel
 from .core import OLBaseModel
 
 
+# TODO: Use pyproj instead
 class Projection(object):
     MERCATOR = "EPSG:4326"
     WEB_MERCATOR = "EPSG:3857"
@@ -13,17 +16,32 @@ def from_epsg(code: int) -> str:
         return f"EPSG:{code}"
 
 
+# TODO: Obsolete, remove
+"""
 class ViewOptions(MyBaseModel):
     center: tuple[float, float] | None = (0, 0)
     zoom: float | None = 0
     projection: str | None = Projection.WEB_MERCATOR
     min_zoom: int | float | None = None
     max_zoom: int | float | None = None
+"""
 
 
 class View(OLBaseModel):
+    """View object
+
+    Note:
+        See [module-ol_View-View.html](https://openlayers.org/en/latest/apidoc/module-ol_View-View.html) for details.
+
+    Attributes:
+        center (tuple[float, float]): The centerpoint of the map as `(lon, lat)` pair
+        zoom (float | int): The zoom level of the map
+        min_zoom (float | int): The minimum zoom level of the map
+        max_zoom (float | int): The maximum zoom level of the map
+    """
+
     center: tuple[float, float] | None = (0, 0)
-    zoom: float | None = 0
+    zoom: float | int | None = 0
     projection: str | None = Projection.WEB_MERCATOR
-    min_zoom: int | float | None = None
-    max_zoom: int | float | None = None
+    min_zoom: int | float | None = Field(None, serialization_alias="minZoom")
+    max_zoom: int | float | None = Field(None, serialization_alias="maxZoom")

src/openlayers/models/view.py

@@ -2,7 +2,9 @@
 
 import base64
 from pathlib import Path
-from pyproj import Transformer, CRS
+
+from pyproj import CRS, Transformer
+
 
 def create_icon_src_from_file(filename: str) -> bytes:
     with open(filename, "rb") as f:
@@ -11,6 +13,7 @@ def create_icon_src_from_file(filename: str) -> bytes:
     image_type = Path(filename).suffix.replace(".", "")
     return f"data:image/{image_type};base64," + encoded_image
 
+
 def default_crs_transformer() -> Transformer:
     crs_from = CRS.from_epsg(4326)
     crs_to = CRS.from_epsg(3857)

src/openlayers/utils.py

@@ -2,7 +2,7 @@ import { Map, View } from "ol";
 import { defaults as defaultControls } from 'ol/control/defaults.js';
 import GeoJSON from "ol/format/GeoJSON";
 import Overlay from "ol/Overlay";
-import { fromLonLat, transformExtent } from "ol/proj";
+import { fromLonLat, transformExtent, useGeographic } from "ol/proj";
 import { JSONConverter } from "./json";
 import { addTooltip2 } from "./tooltip2";
 
@@ -29,16 +29,21 @@ const GEOJSON_IDENTIFIER = "@@geojson";
 
 const jsonConverter = new JSONConverter();
 
+// ...
+useGeographic();
+
 // --- Helpers
 function parseViewDef(viewDef: JSONDef): View {
   const view = jsonConverter.parse(viewDef) as View;
   const center = view.getCenter();
-  console.log("view center", center)
+  console.log("view center", center);
+  // Not needed anymore because of `useGeographic()`
+  /*
   if (center && view.getProjection().getCode() !== "EPSG:4326") {
     const centerTransformed = fromLonLat(center);
     console.log("view center transformed", centerTransformed);
     view.setCenter(centerTransformed);
-  }
+  }*/
 
   return view;
 }
@@ -128,11 +133,17 @@ export default class MapWidget {
     this._map.getView().fit(extent);
   }
 
+  // TODO: obsolete since `useGeographic()` does this for us
   fitBoundsFromLonLat(extentLonLat: any): void {
     const exent = transformExtent(extentLonLat, "EPSG:4326", this._map.getView().getProjection());
     this.fitBounds(exent);
   }
 
+  setView(viewDef: JSONDef): void {
+    const view = jsonConverter.parse(viewDef) as View;
+    this._map.setView(view);
+  }
+
   // --- View Methods
   applyCallToView(call: OLAnyWidgetCall): void {
     const view = this._map.getView();