openlayers-related improvements

README.md

@@ -178,6 +178,8 @@ If you import script from CDN using `<script src="https://cdn.maptiler.com/mapti
 | `vanilla.umd.js`               | `maptilerGeocoder`                      | `class GeocodingControl`                                           |
 | `leaflet-controller.umd.js`    | `leafletMaptilerGeocodingController`    | `function createLeafletMapController`                              |
 | `maplibregl-controller.umd.js` | `maplibreglMaptilerGeocodingController` | `function createMapLibreGlMapController`                           |
+| `leaflet-controller.umd.js`    | `leafletMaptilerGeocodingController`    | `function createLeafletMapController`                              |
+| `openlayers-controller.umd.js` | `openlayersMaptilerGeocodingController` | `function createOpenLayersMapController`                           |
 
 The variable is an object with properties representing library-exported variables, for example `maplibreglMaptilerGeocoder.GeocodingControl`.
 
@@ -208,7 +210,7 @@ Notes:
 - `marker`: `boolean | MarkerOptions` - If `true`, a [MapLibre GL JS Marker](https://maplibre.org/maplibre-gl-js-docs/api/markers/#marker) / [Leaflet Marker](https://leafletjs.com/reference.html#marker) will be added to the map at the location of the user-selected result using a default set of Marker options. If the value is an object, the marker will be constructed using these options. If `false`, no marker will be added to the map. Requires that `options.maplibregl` also be set. Default `true`.
 - `showResultMarkers`: `boolean | MarkerOptions` - If `true`, [MapLibre GL JS Marker](https://maplibre.org/maplibre-gl-js-docs/api/markers/#marker) / [Leaflet Marker](https://leafletjs.com/reference.html#marker) will be added to the map at the location the top results for the query. If the value is an object, the marker will be constructed using these options. If `false`, no marker will be added to the map. Requires that `options.maplibregl` also be set. Default `true`.
 - `zoom`: `number` - On geocoded result what zoom level should the map animate to when a bbox isn't found in the response. If a bbox is found the map will fit to the bbox. Default `16`.
-- `flyTo`: `boolean | (FlyToOptions & FitBoundsOptions)` - If `false`, animating the map to a selected result is disabled. If `true`, animating the map will use the default animation parameters. If an object, it will be passed as options to the map `flyTo` or `fitBounds` method providing control over the animation of the transition. Default `true`.
+- `flyTo`: `boolean | (FlyToOptions & FitBoundsOptions | ol.AnimationOptions & ol.FitOptions)` - If `false`, animating the map to a selected result is disabled. If `true`, animating the map will use the default animation parameters. If an object, it will be passed as options to the map `flyTo` or `fitBounds` method providing control over the animation of the transition. Default `true`.
 - `collapsed`: `boolean` - If `true`, the geocoder control will collapse until hovered or in focus. Default `false`.
 - `clearOnBlur`: `boolean` - If true, the geocoder control will clear its value when the input blurs. Default `false`.
 - `filter`: `(feature: Feature) => boolean` - A function which accepts a Feature in the Carmen GeoJSON format to filter out results from the Geocoding API response before they are included in the suggestions list. Return true to keep the item, false otherwise.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maptiler/geocoding-control",
-  "version": "0.0.97-alpha.1",
+  "version": "0.0.97-alpha.2",
   "type": "module",
   "author": {
     "name": "Martin Ždila",

src/AppOpenLayers.svelte

@@ -42,7 +42,13 @@
         center: [0, 0],
         zoom: 2,
       }),
-      controls: defaultControls().extend([new GeocodingControl({ apiKey })]),
+      controls: defaultControls().extend([
+        new GeocodingControl({
+          apiKey,
+          enableReverse: "always",
+          // collapsed: true,
+        }),
+      ]),
     });
   });
 </script>

src/lib/leaflet.ts

@@ -95,7 +95,7 @@ export class GeocodingControl extends L.Control {
       "optionsVisibilityChange",
       "reverseToggle",
       "queryChange",
-    ]) {
+    ] as const) {
       this.#gc.$on(eventName, (event) =>
         map.fire(eventName.toLowerCase(), event.detail)
       );

src/lib/openlayers-controller.ts

@@ -64,7 +64,7 @@ function defaultStyle(feature: FeatureLike) {
       }.svg`,
       anchor: [0.5, 1],
     }),
-    zIndex: properties.isSelected ? 2 : isMask ? 0 : 1,
+    zIndex: properties.isSelected ? 2 : properties.isReverse ? 0 : 1,
     text:
       properties.isSelected && properties.tooltip
         ? new Text({
@@ -84,8 +84,6 @@ function defaultStyle(feature: FeatureLike) {
 
 export function createOpenLayersMapController(
   map: Map,
-  marker: boolean | L.MarkerOptions = true,
-  showResultMarkers: boolean | L.MarkerOptions = true,
   flyToOptions: AnimationOptions = {},
   flyToBounds: FitOptions = {},
   fullGeometryStyle: StyleLike | FlatStyleLike = defaultStyle
@@ -202,7 +200,7 @@ export function createOpenLayersMapController(
 
     flyTo(center: [number, number], zoom: number) {
       map.getView().animate({
-        center,
+        center: fromLonLat(center, map.getView().getProjection()),
         zoom,
         duration: 2000,
         ...flyToOptions,
@@ -231,10 +229,6 @@ export function createOpenLayersMapController(
     },
 
     setReverseMarker(coordinates?: [number, number]) {
-      if (!marker) {
-        return;
-      }
-
       if (reverseMarker) {
         if (!coordinates) {
           source.removeFeature(reverseMarker);
@@ -262,10 +256,6 @@ export function createOpenLayersMapController(
       markedFeatures: FeatureType[] | undefined,
       picked: FeatureType | undefined
     ): void {
-      if (!marker) {
-        return;
-      }
-
       function setData(data?: FeatureCollection<Polygon | MultiPolygon>) {
         if (!data) {
           return;
@@ -368,37 +358,39 @@ export function createOpenLayersMapController(
         source.addFeature(new Feature(fromWgs84(new Point(picked.center))));
       }
 
-      if (showResultMarkers) {
-        for (const feature of markedFeatures ?? []) {
-          if (feature === picked) {
-            continue;
-          }
+      for (const feature of markedFeatures ?? []) {
+        if (feature === picked) {
+          continue;
+        }
 
-          const marker = new Feature(
-            new Point(fromLonLat(feature.center, map.getView().getProjection()))
-          );
+        const marker = new Feature(
+          new Point(fromLonLat(feature.center, map.getView().getProjection()))
+        );
 
-          marker.setId(feature.id);
+        marker.setId(feature.id);
 
-          marker.setProperties({
-            fuzzy: !!feature.matching_text,
-            tooltip: feature.place_name.replace(/,.*/, ""),
-          });
+        marker.setProperties({
+          fuzzy: !!feature.matching_text,
+          tooltip: feature.place_name.replace(/,.*/, ""),
+        });
 
-          source.addFeature(marker);
-        }
+        source.addFeature(marker);
       }
     },
 
     setSelectedMarker(index: number): void {
+      const features = source.getFeatures();
+
+      const offset = features[0]?.getProperties().isReverse ? 1 : 0;
+
       if (prevSelected > -1) {
-        source.getFeatures()[prevSelected]?.setProperties({
+        features[prevSelected + offset]?.setProperties({
           isSelected: false,
         });
       }
 
       if (index > -1) {
-        source.getFeatures()[index]?.setProperties({
+        features[index + offset]?.setProperties({
           isSelected: true,
         });
       }