Add nominatim search to maputnik (#873)

This replaces PR:
- #785

Before:

![image](https://github.com/maplibre/maputnik/assets/3269297/95297211-4108-43d8-8a43-42f87e2fbe16)
After:

![image](https://github.com/maplibre/maputnik/assets/3269297/86c3ae58-1bb7-4d2c-8ad9-6b84a21c96f7)

This is based on the geocoder example in maplibre docs:
https://maplibre.org/maplibre-gl-js/docs/examples/geocoder/

cypress/e2e/map.cy.ts

@@ -23,4 +23,10 @@ describe("map", () => {
       );
     });
   });
+  
+  describe("search", () => {
+    it('should exist', () => {
+      then(get.searchControl()).shouldBeVisible();
+    });
+  });
 });

cypress/e2e/maputnik-driver.ts

@@ -177,5 +177,6 @@ export class MaputnikDriver {
     skipTargetLayerEditor: () =>
       this.helper.get.elementByTestId("skip-target-layer-editor"),
     canvas: () => this.helper.get.element("canvas"),
+    searchControl: () => this.helper.get.element('.maplibregl-ctrl-geocoder')
   };
 }

package-lock.json

@@ -1,15 +1,16 @@
 {
   "name": "maputnik",
-  "version": "2.0.0-pre.2",
+  "version": "2.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "maputnik",
-      "version": "2.0.0-pre.2",
+      "version": "2.0.0",
       "license": "MIT",
       "dependencies": {
         "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
+        "@maplibre/maplibre-gl-geocoder": "^1.5.0",
         "@maplibre/maplibre-gl-style-spec": "^20.1.0",
         "@mdi/js": "^6.6.96",
         "@mdi/react": "^1.5.0",
@@ -33,7 +34,7 @@
         "lodash.isequal": "^4.5.0",
         "lodash.throttle": "^4.1.1",
         "mapbox-gl-inspect": "^1.3.1",
-        "maplibre-gl": "^4.0.0-pre.4",
+        "maplibre-gl": "^4.0.0",
         "maputnik-design": "github:maputnik/design#172b06c",
         "ol": "^6.14.1",
         "ol-mapbox-style": "^7.1.1",
@@ -103,7 +104,7 @@
         "stylelint-scss": "^4.2.0",
         "typescript": "^5.3.3",
         "uuid": "^8.3.2",
-        "vite": "^5.0.0",
+        "vite": "^5.0.12",
         "vite-plugin-istanbul": "^5.0.0"
       }
     },
@@ -2572,6 +2573,23 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@maplibre/maplibre-gl-geocoder": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-geocoder/-/maplibre-gl-geocoder-1.5.0.tgz",
+      "integrity": "sha512-PsAbV7WFIOu5QYZne95FiXoV7AV1/6ULMjQxgInhZ5DdB0hDLjciQPegnyDgkzI8JfeqoUMZVS/MglZnSZYhyQ==",
+      "dependencies": {
+        "lodash.debounce": "^4.0.6",
+        "subtag": "^0.5.0",
+        "suggestions-list": "^0.0.2",
+        "xtend": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "peerDependencies": {
+        "maplibre-gl": ">=1.14.0"
+      }
+    },
     "node_modules/@maplibre/maplibre-gl-style-spec": {
       "version": "20.1.0",
       "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-20.1.0.tgz",
@@ -7229,6 +7247,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/fuzzy": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/fuzzy/-/fuzzy-0.1.3.tgz",
+      "integrity": "sha512-/gZffu4ykarLrCiP3Ygsa86UAo1E5vEVlvTrpkKywXSbP9Xhln3oSp9QSV57gEq3JFFpGJ4GZ+5zdEp3FcUh4w==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -9211,9 +9237,7 @@
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
-      "dev": true,
-      "peer": true
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
     },
     "node_modules/lodash.flattendeep": {
       "version": "4.4.0",
@@ -9531,9 +9555,9 @@
       "integrity": "sha512-f+NBjJJY4T3dHtlEz1wCG7YFlkODEjFIYlxDdLIDMNpkSksqTt+l/d4rjuwItxuzkuMFvPyrjzV2lxRM4ePcIA=="
     },
     "node_modules/maplibre-gl": {
-      "version": "4.0.0-pre.4",
-      "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-4.0.0-pre.4.tgz",
-      "integrity": "sha512-rY+8cqyFHEKrKPyxTSqBXb4B3VwEefKfyUPy9j6zUaG2dcvIWmDR/+YU8Y6FHv+Hq3GET1ubMnvyKlVwvRbsJg==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-4.0.0.tgz",
+      "integrity": "sha512-bzVQ2pdOWITwbE+JHKSiAB/viVBBx4Aa1puydc1xizOWGbvRHD9pXpy3dsaW2ZlbmZKbv9r9sHpcvM9fTLGsKA==",
       "dependencies": {
         "@mapbox/geojson-rewind": "^0.5.2",
         "@mapbox/jsonlint-lines-primitives": "^2.0.2",
@@ -9542,7 +9566,7 @@
         "@mapbox/unitbezier": "^0.0.1",
         "@mapbox/vector-tile": "^1.3.1",
         "@mapbox/whoots-js": "^3.1.0",
-        "@maplibre/maplibre-gl-style-spec": "^20.0.0",
+        "@maplibre/maplibre-gl-style-spec": "^20.1.0",
         "@types/geojson": "^7946.0.13",
         "@types/geojson-vt": "3.2.5",
         "@types/mapbox__point-geometry": "^0.1.4",
@@ -12756,6 +12780,20 @@
         "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
       }
     },
+    "node_modules/subtag": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/subtag/-/subtag-0.5.0.tgz",
+      "integrity": "sha512-CaIBcTSb/nyk4xiiSOtZYz1B+F12ZxW8NEp54CdT+84vmh/h4sUnHGC6+KQXUfED8u22PQjCYWfZny8d2ELXwg=="
+    },
+    "node_modules/suggestions-list": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/suggestions-list/-/suggestions-list-0.0.2.tgz",
+      "integrity": "sha512-Yw0fdq14c6RQWQIfE1/8WEi9Dp8rjyCD6FhYA/Tit2/ADbE9Y4ADG4ezlvivsa8Civ5nz++pyVVBMjOMlgIUJw==",
+      "dependencies": {
+        "fuzzy": "^0.1.1",
+        "xtend": "^4.0.0"
+      }
+    },
     "node_modules/supercluster": {
       "version": "7.1.5",
       "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-7.1.5.tgz",
@@ -13608,9 +13646,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.0.10",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.10.tgz",
-      "integrity": "sha512-2P8J7WWgmc355HUMlFrwofacvr98DAjoE52BfdbwQtyLH06XKwaL/FMnmKM2crF0iX4MpmMKoDlNCB1ok7zHCw==",
+      "version": "5.0.12",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.12.tgz",
+      "integrity": "sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.19.3",
@@ -14417,6 +14455,14 @@
       "resolved": "https://registry.npmjs.org/xml-utils/-/xml-utils-1.7.0.tgz",
       "integrity": "sha512-bWB489+RQQclC7A9OW8e5BzbT8Tu//jtAOvkYwewFr+Q9T9KDGvfzC1lp0pYPEQPEoPQLDkmxkepSC/2gIAZGw=="
     },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "maputnik",
-  "version": "2.0.0-pre.2",
+  "version": "2.0.0",
   "description": "A MapLibre GL visual style editor",
   "type": "module",
   "main": "''",
@@ -21,6 +21,7 @@
   "homepage": "https://github.com/maplibre/maputnik#readme",
   "dependencies": {
     "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
+    "@maplibre/maplibre-gl-geocoder": "^1.5.0",
     "@maplibre/maplibre-gl-style-spec": "^20.1.0",
     "@mdi/js": "^6.6.96",
     "@mdi/react": "^1.5.0",
@@ -44,7 +45,7 @@
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "mapbox-gl-inspect": "^1.3.1",
-    "maplibre-gl": "^4.0.0-pre.4",
+    "maplibre-gl": "^4.0.0",
     "maputnik-design": "github:maputnik/design#172b06c",
     "ol": "^6.14.1",
     "ol-mapbox-style": "^7.1.1",
@@ -131,7 +132,7 @@
     "stylelint-scss": "^4.2.0",
     "typescript": "^5.3.3",
     "uuid": "^8.3.2",
-    "vite": "^5.0.0",
+    "vite": "^5.0.12",
     "vite-plugin-istanbul": "^5.0.0"
   }
 }

src/components/MapMaplibreGl.tsx

@@ -13,6 +13,9 @@ import { HighlightedLayer, colorHighlightedLayer } from '../libs/highlight'
 import 'maplibre-gl/dist/maplibre-gl.css'
 import '../maplibregl.css'
 import '../libs/maplibre-rtl'
+//@ts-ignore
+import MaplibreGeocoder from '@maplibre/maplibre-gl-geocoder';
+import '@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css';
 
 function renderPopup(popup: JSX.Element, mountNode: ReactDOM.Container) {
   ReactDOM.render(popup, mountNode);
@@ -160,6 +163,8 @@ export default class MapMaplibreGl extends React.Component<MapMaplibreGlProps, M
     map.showCollisionBoxes = mapOpts.showCollisionBoxes!;
     map.showOverdrawInspector = mapOpts.showOverdrawInspector!;
 
+    this.initGeocoder(map);
+
     const zoomControl = new ZoomControl;
     map.addControl(zoomControl, 'top-right');
 
@@ -225,6 +230,47 @@ export default class MapMaplibreGl extends React.Component<MapMaplibreGlProps, M
     this.props.onLayerSelect(index);
   }
 
+  initGeocoder(map: Map) {
+    const geocoderConfig = {
+      forwardGeocode: async (config:{query: string, limit: number, language: string[]}) => {
+        const features = [];
+        try {
+          const request = `https://nominatim.openstreetmap.org/search?q=${config.query}&format=geojson&polygon_geojson=1&addressdetails=1`;
+          const response = await fetch(request);
+          const geojson = await response.json();
+          for (const feature of geojson.features) {
+            const center = [
+              feature.bbox[0] +
+                  (feature.bbox[2] - feature.bbox[0]) / 2,
+              feature.bbox[1] +
+                  (feature.bbox[3] - feature.bbox[1]) / 2
+            ];
+            const point = {
+              type: 'Feature',
+              geometry: {
+                type: 'Point',
+                coordinates: center
+              },
+              place_name: feature.properties.display_name,
+              properties: feature.properties,
+              text: feature.properties.display_name,
+              place_type: ['place'],
+              center
+            };
+            features.push(point);
+          }
+        } catch (e) {
+          console.error(`Failed to forwardGeocode with error: ${e}`);
+        }
+        return {
+          features
+        };
+      }
+    };
+    const geocoder = new MaplibreGeocoder(geocoderConfig, {maplibregl: MapLibreGl});
+    map.addControl(geocoder, 'top-left');
+  }
+
   render() {
     return <div
       className="maputnik-map__map"