Add MapTiler Geocoding control

Author: Stefan Kuethe

README.md

@@ -1,9 +1,27 @@
 # OpenLayers for Python
 
+[![Release](https://img.shields.io/github/v/release/eoda-dev/py-openlayers)](https://img.shields.io/github/v/release/eoda-dev/py-openlayers)
+[![pypi](https://img.shields.io/pypi/v/openlayers.svg)](https://pypi.python.org/pypi/openlayers)
+[![License](https://img.shields.io/github/license/eoda-dev/py-openlayers)](https://img.shields.io/github/license/eoda-dev/py-openlayers)
+[![OpenLayers JS](https://img.shields.io/badge/OpenLayers-v10.5.0-blue.svg)](https://github.com/openlayers/openlayers/releases//tag/v10.5.0)
+
 ## Installation
 
 ```bash
 uv init
 
 uv add "git+https://github.com/eoda-dev/py-openlayers@main"
 ```
+
+## Quickstart
+
+```python
+import openlayers as ol
+
+# Jupyter or Marimo
+ol.MapWidget()
+
+# Standalone
+m = ol.Map()
+m.save()
+```

examples/standalone/maptiler_geocoding_control.py

@@ -0,0 +1,13 @@
+import openlayers as ol
+
+ctrl = ol.MapTilerGeocodingControl(
+    collapsed=True,
+    country="de",
+    limit=2
+    )
+
+m = ol.Map()
+m.add_control(ctrl)
+m.save()
+
+# print(ctrl.model_dump())

src/openlayers/controls.py

@@ -12,6 +12,7 @@
     ZoomControl,
     RotateControl,
     ZoomToExtentControl,
+    MapTilerGeocodingControl,
     DrawControl,
 )
 
@@ -22,5 +23,6 @@
     "ScaleLineControl",
     "ZoomSliderControl",
     "MousePositionControl",
+    "MapTilerGeocodingControl",
     "DrawControl",
 ]

src/openlayers/js/openlayers.standalone.css

@@ -1,9 +1,11 @@
 from __future__ import annotations
 
+import os
+
 from typing import Literal, Union
 from uuid import uuid4
 
-from pydantic import Field, field_validator
+from pydantic import Field, field_validator, ConfigDict
 
 from .core import OLBaseModel
 from .layers import LayerT, TileLayer
@@ -60,6 +62,16 @@ class ZoomToExtentControl(Control):
     ) = None
 
 
+# --- MapTiler
+class MapTilerGeocodingControl(Control):
+    api_key: str = Field(os.getenv("MAPTILER_API_TOKEN"), serialization_alias="apiKey", validate_default=True)
+    collapsed: bool | None = False
+    country: str | None = None
+    limit: int | None = 5
+    marker_on_selected: bool | None = Field(True, serialization_alias="markerOnSelected")
+    placeholder: str | None = "Search"
+
+
 # --- Custom controls
 class InfoBox(Control):
     html: str

src/openlayers/js/openlayers.standalone.js

@@ -8,9 +8,19 @@ import Rotate from 'ol/control/Rotate';
 import Attribution from 'ol/control/Attribution.js';
 import ZoomToExtent from 'ol/control/ZoomToExtent.js';
 
+import { GeocodingControl } from "@maptiler/geocoding-control/openlayers";
+
 import { InfoBox } from './custom-controls/info-box';
 import { DrawControl } from './custom-controls/draw';
 
+// MapTiler Geocoding css
+import "@maptiler/geocoding-control/style.css";
+
+const olSearchStyle = document.createElement("style");
+olSearchStyle.innerText = ".ol-search {position: absolute; top: .5em; right: .5em;}";
+document.head.appendChild(olSearchStyle);
+// ---
+
 const zoom = new Zoom();
 zoom.setProperties({ id: "zoom", type: "ZoomControl" });
 
@@ -33,7 +43,8 @@ const controlCatalog: ControlCatalog = {
     AttributionControl: Attribution,
     InfoBox: InfoBox,
     DrawControl: DrawControl,
-    ZoomToExtentControl: ZoomToExtent
+    ZoomToExtentControl: ZoomToExtent,
+    MapTilerGeocodingControl: GeocodingControl
 };
 
 export { controlCatalog, defaultControls };

src/openlayers/models/controls.py

@@ -23,6 +23,7 @@
     "vite": "^6.2.4"
   },
   "dependencies": {
+    "@maptiler/geocoding-control": "^2.1.6",
     "mustache": "^4.2.0",
     "ol": "^10.5.0",
     "ol-pmtiles": "^2.0.2"