Add zoom and rotate controls with id and type

Author: stfnkth

examples/standalone/polygons.py

@@ -8,6 +8,8 @@
 m = ol.Map(ol.View(projection="EPSG:4326"), layers=[BasemapLayer.osm(), countries])
 m.add_tooltip("{{ name }}")
 # m.add_tooltip()
+m.remove_control("zoom")
+m.add_control(ol.controls.ZoomControl(zoom_in_label="I", zoom_out_label="O"))
 m.add_control(ol.controls.ZoomSliderControl())
 m.add_control(ol.controls.InfoBox(
     html="PyOL",

notebooks/layers/geopandas.ipynb

@@ -116,7 +116,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 11,
    "id": "66b75334",
    "metadata": {},
    "outputs": [],
@@ -127,7 +127,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 8,
+   "execution_count": 12,
    "id": "da76acb0",
    "metadata": {},
    "outputs": [
@@ -140,7 +140,7 @@
        " 'controls': [{}, {}, {}]}"
       ]
      },
-     "execution_count": 8,
+     "execution_count": 12,
      "metadata": {},
      "output_type": "execute_result"
     }

src/openlayers/controls.py

@@ -9,6 +9,8 @@
     OverviewMapControl,
     ScaleLineControl,
     ZoomSliderControl,
+    ZoomControl,
+    RotateControl
 )
 
 __all__ = [

src/openlayers/js/openlayers.standalone.js

@@ -44,6 +44,14 @@ class OverviewMapControl(Control):
     layers: list[dict | LayerT] = [TileLayer(source=OSM())]
 
 
+class ZoomControl(Control):
+    zoom_in_label: str = Field("+", serialization_alias="zoomInLabel")
+    zoom_out_label: str = Field("-", serialization_alias="zoomOutLabel")
+
+
+class RotateControl(Control): ...
+
+
 # --- Custom controls
 class InfoBox(Control):
     html: str
@@ -59,5 +67,7 @@ class InfoBox(Control):
     ScaleLineControl,
     ZoomSliderControl,
     OverviewMapControl,
+    ZoomControl,
+    RotateControl,
     InfoBox,
 ]

src/openlayers/models/controls.py

@@ -3,16 +3,28 @@ import FullScreenControl from 'ol/control/FullScreen.js';
 import ZoomSliderControl from 'ol/control/ZoomSlider.js';
 import MousePositionControl from 'ol/control/MousePosition.js';
 import OverviewMapControl from 'ol/control/OverviewMap.js';
+import Zoom from 'ol/control/Zoom';
+import Rotate from 'ol/control/Rotate';
 
 import { InfoBox } from './custom-controls';
 
+const zoom = new Zoom();
+zoom.setProperties({ id: "zoom", type: "zoomControl" });
+
+const rotate = new Rotate();
+rotate.setProperties({ id: "rotate", type: "RotateControl" });
+
+const defaultControls = [zoom, rotate];
+
 const controlCatalog: ControlCatalog = {
     ScaleLineControl: ScaleLineControl,
     FullScreenControl: FullScreenControl,
     ZoomSliderControl: ZoomSliderControl,
     MousePositionControl: MousePositionControl,
     OverviewMapControl: OverviewMapControl,
+    ZoomControl: Zoom,
+    RotateControl: Rotate,
     InfoBox: InfoBox
 };
 
-export { controlCatalog };
+export { controlCatalog, defaultControls };

srcjs/ipywidget-ts/controls.ts

@@ -1,11 +1,12 @@
 import { Map, View } from "ol";
-import { defaults as defaultControls } from 'ol/control/defaults.js';
+// import { defaults as defaultControls } from 'ol/control/defaults.js';
 import GeoJSON from "ol/format/GeoJSON";
 import Overlay from "ol/Overlay";
 import Draw from 'ol/interaction/Draw.js';
 import { fromLonLat, transformExtent, useGeographic } from "ol/proj";
 
 import { JSONConverter } from "./json";
+import { defaultControls } from "./controls";
 import { addTooltipToMap } from "./tooltip";
 import { addSelectFeaturesToMap } from "./select-features";
 import { addDragAndDropToMap as addDragAndDropVectorLayersToMap } from "./drag-and-drop";
@@ -85,14 +86,15 @@ export default class MapWidget {
     this._model = model;
 
     const view = parseViewDef(mapOptions.view);
-    let baseControls: Control[] = [];
+    // let baseControls: Control[] = [];
     let baseLayers: Layer[] = [];
 
     this._container = mapElement;
     this._map = new Map({
       target: mapElement,
       view: view,
-      controls: defaultControls().extend(baseControls),
+      controls: defaultControls,
+      // controls: defaultControls().extend(baseControls),
       layers: baseLayers,
     });