maptiler · katemihalikova · Dec 2, 2025
diff --git a/.npmignore b/.npmignore
@@ -3,10 +3,14 @@ demos
 public
 src
 !dist/src
+test
 *.tgz
 .github
 .husky
 .vscode
 vite*
 .*
 tsconfig.json
+tsconfig.*.json
+eslint.config.js
+tmp
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,2 @@
+dist
+tmp
diff --git a/demos/05-leaflet.html b/demos/05-leaflet.html
@@ -0,0 +1,23 @@
+<html>
+  <head>
+    <title>MapTiler Geocoding Control example</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+      }
+
+      #map {
+        position: absolute;
+        width: 100vw;
+        height: 100vh;
+        background: #ccc;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="map"></div>
+    <script type="module" src="/src/05-leaflet.ts"></script>
+  </body>
+</html>
diff --git a/demos/index.html b/demos/index.html
@@ -51,6 +51,7 @@
         <a href="02-maptiler-sdk.html">MapTiler SDK →</a>
         <a href="03-maplibregl.html">MapLibre GL →</a>
         <a href="04-react.html">React →</a>
+        <a href="05-leaflet.html">Leaflet →</a>
       </div>
     </div>
   </body>

diff --git a/demos/src/05-leaflet.ts b/demos/src/05-leaflet.ts
@@ -0,0 +1,95 @@
+import { control, map as LMap, Marker, Popup, tileLayer } from "leaflet";
+import "leaflet/dist/leaflet.css";
+
+import { GeocodingControl } from "../../src/leaflet.public";
+
+import { getApiKey } from "./demo-utils";
+
+const map = LMap("map", {
+  center: [0, 0],
+  zoom: 2,
+  zoomControl: false,
+});
+
+tileLayer(`https://api.maptiler.com/maps/streets-v2/{z}/{x}/{y}.png?key=${getApiKey()}`, {
+  tileSize: 512,
+  zoomOffset: -1,
+  minZoom: 1,
+  attribution:
+    '\u003ca href="https://www.maptiler.com/copyright/" target="_blank"\u003e\u0026copy; MapTiler\u003c/a\u003e \u003ca href="https://www.openstreetmap.org/copyright" target="_blank"\u003e\u0026copy; OpenStreetMap contributors\u003c/a\u003e',
+  crossOrigin: true,
+}).addTo(map);
+
+const geocodingControl = new GeocodingControl({
+  apiKey: getApiKey(),
+  enableReverse: "button",
+  collapsed: true,
+  // limit: 20,
+  // types: ["poi"],
+  // fetchParameters: { credentials: "include" },
+  // selectFirst: false,
+  iconsBaseUrl: "/assets/icons/",
+  proximity: [
+    { type: "map-center", minZoom: 12 },
+    { type: "client-geolocation", minZoom: 8 },
+    { type: "server-geolocation", minZoom: 8 },
+  ],
+  adjustUrl(url) {
+    // for reverse geocoding use only address type
+    if (/\/\d+\.?\d*%2C\d+.?\d*.json$/.test(url.pathname)) {
+      url.searchParams.set("types", "address");
+      url.searchParams.set("limit", "5");
+    }
+  },
+  marker(map, feature) {
+    if (!feature) {
+      return;
+    }
+
+    const marker = new Marker({ lng: feature.center[0], lat: feature.center[1] })
+      .bindPopup(new Popup({ closeButton: false }).setContent(feature.text))
+      .addTo(map)
+      .togglePopup();
+
+    const element = marker.getElement();
+
+    if (element) {
+      element.style.cursor = "pointer";
+
+      element.addEventListener("click", (e) => {
+        marker.togglePopup();
+        e.stopPropagation();
+      });
+    }
+
+    return marker;
+  },
+  showResultMarkers(map, feature) {
+    return new Marker({ lng: feature.center[0], lat: feature.center[1] })
+      .bindPopup(new Popup({ closeButton: false }).setContent(feature.text))
+      .addTo(map)
+      .togglePopup();
+  },
+});
+
+map.addControl(geocodingControl);
+
+geocodingControl.on("featureslisted", (e) => {
+  console.log(e);
+});
+
+map.addControl(
+  new GeocodingControl({
+    position: "topleft",
+    apiKey: getApiKey(),
+    keepListOpen: true,
+    enableReverse: "button",
+    collapsed: false,
+    pickedResultStyle: "full-geometry",
+    types: ["locality"],
+    fullGeometryStyle: true,
+    iconsBaseUrl: "/assets/icons/",
+  }),
+);
+
+map.addControl(control.zoom({ position: "topright" }));
diff --git a/eslint.config.js b/eslint.config.js
@@ -3,7 +3,7 @@ import { defineConfig, globalIgnores } from "eslint/config";
 import tseslint from "typescript-eslint";
 
 export default defineConfig(
-  globalIgnores(["dist/", "vite.config*.ts", "**/eslint.config.js"]),
+  globalIgnores(["dist/", "vite.config*.ts", "**/eslint.config.js", "tmp/"]),
   // https://typescript-eslint.io/getting-started/typed-linting/
   tseslint.configs.strictTypeChecked,
   tseslint.configs.stylisticTypeChecked,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,14 +30,21 @@
   ],
   "scripts": {
     "dev": "vite -c vite.config-dev.ts",
-    "make": "npm run clean && npm run build",
-    "build": "npm run build:index && npm run build:index:umd && npm run build:maptilersdk && npm run build:maptilersdk:umd && npm run build:maplibregl && npm run build:maplibregl:umd",
+    "make": "npm run clean && npm run build && npm run check-version",
+    "build": "npm run build:index && npm run build:index:umd && npm run build:maptilersdk && npm run build:maptilersdk:umd && npm run build:maplibregl && npm run build:maplibregl:umd && npm run build:leaflet && npm run build:leaflet:umd",
     "build:index": "FLAVOUR=index vite build",
     "build:index:umd": "FLAVOUR=index MODE=umd vite build",
     "build:maptilersdk": "FLAVOUR=maptilersdk vite build",
     "build:maptilersdk:umd": "FLAVOUR=maptilersdk MODE=umd vite build",
     "build:maplibregl": "FLAVOUR=maplibregl vite build",
     "build:maplibregl:umd": "FLAVOUR=maplibregl MODE=umd vite build",
+    "build:leaflet": "FLAVOUR=leaflet vite build",
+    "build:leaflet:umd": "FLAVOUR=leaflet MODE=umd vite build",
+    "check-version": "npm run check-version:leaflet-v1.5 && npm run check-version:leaflet-v1.7 && npm run check-version:leaflet-v1.9 && npm run check-version:leaflet-v2",
+    "check-version:leaflet-v1.5": "tsc -p tsconfig.leaflet-v1.5.json",
+    "check-version:leaflet-v1.7": "tsc -p tsconfig.leaflet-v1.7.json",
+    "check-version:leaflet-v1.9": "tsc -p tsconfig.leaflet-v1.9.json",
+    "check-version:leaflet-v2": "tsc -p tsconfig.leaflet-v2.json",
     "lint": "eslint -c eslint.config.js . && prettier --check . && tsc --noEmit",
     "lint:fix": "eslint -c eslint.config.js --fix && prettier --write . && tsc --noEmit",
     "test": "vitest run -c vite.config-test.ts --dom",
@@ -68,6 +75,7 @@
   },
   "dependencies": {
     "@turf/bbox": "^7.2.0",
+    "@turf/clone": "^7.2.0",
     "@turf/difference": "^7.2.0",
     "@turf/flatten": "^7.2.0",
     "@turf/helpers": "^7.2.0",
@@ -80,6 +88,9 @@
     "@canvas/image-data": "^1.1.0",
     "@maptiler/sdk": "^3.8.0",
     "@types/leaflet": "^1.9.21",
+    "@types/leaflet--v1.5": "npm:@types/leaflet@1.5",
+    "@types/leaflet--v1.7": "npm:@types/leaflet@1.7",
+    "@types/leaflet--v1.9": "npm:@types/leaflet@1.9",
     "@types/node": "ts5.8",
     "@types/react": "^19.2.6",
     "@types/react-dom": "^19.2.3",
@@ -91,7 +102,6 @@
     "happy-dom": "^20.0.10",
     "husky": "^9.1.7",
     "leaflet": "^1.9.4",
-    "leaflet-v2": "npm:leaflet@2.0.0-alpha.1",
     "ol": "^10.6.1",
     "prettier": "^3.6.2",
     "prettier-plugin-organize-imports": "^4.3.0",
@@ -107,8 +117,8 @@
     "vitest": "^4.0.8"
   },
   "peerDependencies": {
-    "@maptiler/sdk": "1 - 3",
-    "leaflet": "1.7 - 2",
+    "@maptiler/sdk": "1 - 4",
+    "leaflet": "1.5 - 2",
     "maplibre-gl": "2 - 5",
     "ol": "6 - 10"
   },