maptiler · katemihalikova · Dec 9, 2025 · Dec 5, 2025 · Dec 9, 2025
diff --git a/demos/01-standalone.html b/demos/01-standalone.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>MapTiler Geocoding Control example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <style>
       body {
         display: flex;

diff --git a/demos/02-maptiler-sdk.html b/demos/02-maptiler-sdk.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>MapTiler Geocoding Control example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <style>
       html,
       body {
@@ -14,12 +15,6 @@
         height: 100vh;
         background: #ccc;
       }
-
-      #style-picker-container {
-        position: absolute;
-        z-index: 2;
-        margin: 10px;
-      }
     </style>
   </head>
 

diff --git a/demos/03-maplibregl.html b/demos/03-maplibregl.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>MapTiler Geocoding Control example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <style>
       html,
       body {
@@ -14,12 +15,6 @@
         height: 100vh;
         background: #ccc;
       }
-
-      #style-picker-container {
-        position: absolute;
-        z-index: 2;
-        margin: 10px;
-      }
     </style>
   </head>
 

diff --git a/demos/04-react.html b/demos/04-react.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>MapTiler Geocoding Control example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="https://unpkg.com/chota@latest" />
     <style>
       html,

diff --git a/src/components/marker.css b/src/components/marker.css
@@ -1,45 +1,34 @@
 svg {
   display: block;
-  fill: #6b7c93;
-  stroke: #6b7c93;
+  fill: var(--maptiler-geocode-marker-fill, #3170fe);
+  stroke: var(--maptiler-geocode-marker-stroke, #3170fe);
   height: 30px;
 }
 
-/* @TODO move extra styles to variables and outside of this component */
-/* :global(.maplibregl-canvas-container .marker-selected) {
-  z-index: 1;
+:host(.marker-selected) {
+  z-index: 2;
 }
 
-:global(.maplibregl-canvas-container) svg path,
-:global(.leaflet-map-pane) svg path {
-  fill: #3170fe;
-  stroke: #3170fe;
+:host(.marker-selected) svg path {
+  fill: var(--maptiler-geocode-marker-reverse-fill, #98b7ff);
+  stroke: var(--maptiler-geocode-marker-reverse-stroke, #3170fe);
 }
 
-:global(.marker-selected) svg path {
-  fill: #98b7ff;
-  stroke: #3170fe;
+:host(.marker-reverse) svg path {
+  fill: var(--maptiler-geocode-marker-reverse-fill, silver);
+  stroke: var(--maptiler-geocode-marker-reverse-stroke, gray);
 }
 
-:global(.marker-reverse) svg path {
-  fill: silver;
-  stroke: gray;
-}
-
-:global(.marker-interactive) {
+:host(.marker-interactive) {
   cursor: pointer !important;
 }
 
-/ * :global(.marker-fuzzy) svg path {
-  fill: silver;
-  stroke: gray;
+:host(.marker-fuzzy) svg path {
+  fill: var(--maptiler-geocode-marker-fuzzy-fill, silver);
+  stroke: var(--maptiler-geocode-marker-fuzzy-stroke, gray);
 }
 
-:global(.marker-fuzzy.marker-selected) svg path {
-  fill: #ddd;
-  stroke: silver;
-} * /
-
-:global(.maptiler-gc-popup > .maplibregl-popup-content) {
-  padding: 2px 8px;
-} */
+:host(.marker-fuzzy.marker-selected) svg path {
+  fill: var(--maptiler-geocode-marker-selected-fuzzy-fill, #ddd);
+  stroke: var(--maptiler-geocode-marker-selected-fuzzy-stroke, silver);
+}
diff --git a/src/controls/leaflet-control.ts b/src/controls/leaflet-control.ts
@@ -72,6 +72,7 @@ export class LeafletGeocodingControl extends EventedControl<LeafletGeocodingCont
 
     const div = map.getContainer().ownerDocument.createElement("div");
     div.classList.add("leaflet-ctrl-geocoder", "leaflet-bar");
+    div.style.zIndex = "850"; // Position the geocoder dropdown list above the default Leaflet control z-index of 800
     div.appendChild(this.#element as Node);
 
     DomEvent.disableClickPropagation(div);
@@ -254,6 +255,7 @@ export class LeafletGeocodingControl extends EventedControl<LeafletGeocodingCont
 
     this.#element.setOptions(this.options);
     this.#element.fetchFullGeometryOnPick = this.options.pickedResultStyle !== "marker-only";
+    this.#element.openListOnTop = this.options.position === "bottomleft" || this.options.position === "bottomright";
   }
 
   #addEventListeners() {
@@ -454,7 +456,7 @@ export class LeafletGeocodingControl extends EventedControl<LeafletGeocodingCont
 
     if (this.options.showResultMarkers !== false && this.options.showResultMarkers !== null) {
       for (const feature of markedFeatures ?? []) {
-        if (feature.id === picked?.id) {
+        if (feature.id === picked?.id || feature.place_type.includes("reverse")) {
           continue;
         }
 
@@ -509,7 +511,7 @@ export class LeafletGeocodingControl extends EventedControl<LeafletGeocodingCont
     this.#selectedMarker?.getElement()?.classList.toggle("marker-selected", false);
     this.#selectedMarker = undefined;
 
-    if (this.options.markerOnSelected) {
+    if (this.options.markerOnSelected !== false) {
       this.#selectedMarker = this.#markers.get(feature);
       this.#selectedMarker?.getElement()?.classList.toggle("marker-selected", true);
     }

diff --git a/src/controls/maplibregl-control.ts b/src/controls/maplibregl-control.ts
@@ -49,6 +49,10 @@ export class MaplibreglGeocodingControl extends Evented implements IControl {
   }
 
   onAdd(map: MLMap): HTMLElement {
+    this.#map = map;
+    this.#element = map._container.ownerDocument.createElement("maptiler-geocoder");
+    this.#element.classList.add("maplibregl-geocoder");
+
     /* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access */
     // Check if Maptiler SDK is present
     if ("getSdkConfig" in map && typeof map.getSdkConfig === "function") {
@@ -64,17 +68,20 @@ export class MaplibreglGeocodingControl extends Evented implements IControl {
           this.#options.language = match[1];
         }
       }
+
+      this.#element.classList.add("maptiler-geocoder");
     }
     /* eslint-enable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access */
 
-    this.#map = map;
-    this.#element = map._container.ownerDocument.createElement("maptiler-geocoder");
     this.#setElementOptions();
     this.#addEventListeners();
 
-    const div = document.createElement("div");
-    div.className = "mapboxgl-ctrl-geocoder mapboxgl-ctrl maplibregl-ctrl-geocoder maplibregl-ctrl mapboxgl-ctrl-group";
+    const div = map._container.ownerDocument.createElement("div");
+    div.classList.add("maplibregl-ctrl-geocoder", "maplibregl-ctrl", "maplibregl-ctrl-group");
+    div.style.position = "relative";
+    div.style.zIndex = "3";
     div.appendChild(this.#element as Node);
+    setTimeout(() => this.#element?.setOptions({ openListOnTop: div.matches(".maplibregl-ctrl-bottom-left *, .maplibregl-ctrl-bottom-right *") }));
     return div;
   }
 
@@ -374,7 +381,7 @@ export class MaplibreglGeocodingControl extends Evented implements IControl {
       if (this.#options.marker instanceof Function) {
         this.#reverseMarker = this.#options.marker(this.#map) ?? undefined;
       } else {
-        this.#reverseMarker = this.#createMarker(this.#options.marker).addTo(this.#map);
+        this.#reverseMarker = this.#createMarker(this.#options.marker).setLngLat(coordinates).addTo(this.#map);
         this.#reverseMarker.getElement().classList.add("marker-reverse");
       }
     }
@@ -447,7 +454,7 @@ export class MaplibreglGeocodingControl extends Evented implements IControl {
 
     if (this.#options.showResultMarkers !== false && this.#options.showResultMarkers !== null) {
       for (const feature of markedFeatures ?? []) {
-        if (feature.id === picked?.id) {
+        if (feature.id === picked?.id || feature.place_type.includes("reverse")) {
           continue;
         }
 
@@ -503,7 +510,7 @@ export class MaplibreglGeocodingControl extends Evented implements IControl {
     this.#selectedMarker?.getElement().classList.toggle("marker-selected", false);
     this.#selectedMarker = undefined;
 
-    if (this.#options.markerOnSelected) {
+    if (this.#options.markerOnSelected !== false) {
       this.#selectedMarker = this.#markers.get(feature);
       this.#selectedMarker?.getElement().classList.toggle("marker-selected", true);
     }

diff --git a/src/geocoder/geocoder-options.ts b/src/geocoder/geocoder-options.ts
@@ -29,13 +29,6 @@ export type MaptilerGeocoderOptions = {
    */
   bbox?: BBox;
 
-  /**
-   * CSS class for the root element.
-   *
-   * Default: `undefined`.
-   */
-  class?: string;
-
   /**
    * Title of the clear button.
    *
@@ -195,6 +188,13 @@ export type MaptilerGeocoderOptions = {
    */
   noResultsMessage?: string;
 
+  /**
+   * Opens the result list above the query input instead of below. Used when mounted at the bottom of a map.
+   *
+   * Default: `false`.
+   */
+  openListOnTop?: boolean;
+
   /**
    * Custom placeholder for the input box.
    *

diff --git a/src/geocoder/geocoder.css b/src/geocoder/geocoder.css
@@ -5,7 +5,6 @@ form {
   z-index: 10;
   border-radius: 4px;
   margin: 0;
-  padding: 2px;
   transition: max-width 0.25s;
   box-shadow: 0px 2px 5px rgba(51, 51, 89, 0.15);
   --color-text: #444952;
@@ -19,13 +18,16 @@ form *:before {
   box-sizing: border-box;
 }
 form.can-collapse {
-  max-width: 33px;
+  max-width: 29px;
 }
 form.can-collapse input::placeholder {
   transition: opacity 0.25s;
   opacity: 0;
 }
-form,
+form {
+  width: 270px;
+  max-width: 270px;
+}
 form:focus-within,
 form:hover {
   width: 270px;
@@ -91,39 +93,34 @@ div.error {
 div.error div {
   flex-grow: 1;
 }
-div.error :global(svg) {
+div.error maptiler-geocode-fail-icon {
   flex-shrink: 0;
   width: 20px;
   height: 20px;
 }
 div.error button {
   flex-shrink: 0;
 }
-div.error button > :global(svg) {
-  width: 13px;
-  fill: #e25041;
+div.error button maptiler-geocode-clear-icon {
+  --color-icon-button: #e25041;
 }
-div.error button:hover :global(svg),
-div.error button:active :global(svg) {
-  fill: #444952;
+div.error button:hover maptiler-geocode-clear-icon,
+div.error button:active maptiler-geocode-clear-icon {
+  --color-icon-button: inherit;
 }
 div.no-results {
   padding: 14px 24px 14px 16px;
   font-weight: 400;
   color: #6b7c93;
   box-shadow: 0px 5px 10px rgba(51, 51, 89, 0.15);
 }
-div.no-results :global(svg) {
+div.no-results maptiler-geocode-fail-icon {
   margin-top: 4px;
   flex-shrink: 0;
   width: 20px;
   height: 20px;
-  width: 30px;
-  height: 30px;
 }
-:global(.leaflet-bottom) ul.options,
-:global(.maplibregl-ctrl-bottom-left) ul.options,
-:global(.maplibregl-ctrl-bottom-right) ul.options {
+ul.options.open-on-top {
   top: auto;
   bottom: calc(100% + 6px);
 }
@@ -138,9 +135,9 @@ button {
 button:hover {
   background-color: transparent;
 }
-button:hover :global(svg),
-button:active :global(svg) {
-  fill: #2b8bfb;
+button:hover,
+button:active {
+  --color-icon-button: #2b8bfb;
 }
 .input-group {
   display: flex;
@@ -156,10 +153,6 @@ button:active :global(svg) {
 .search-button {
   flex-shrink: 0;
 }
-:global(.maplibregl-ctrl-geocoder:not(.maptiler-ctrl) .search-button svg) {
-  width: 12px !important;
-  transform: translate(0.5px, 0);
-}
 .clear-button-container {
   display: flex;
   display: none;
@@ -170,28 +163,29 @@ button:active :global(svg) {
   display: flex;
   flex-shrink: 0;
 }
-:global(.maplibregl-ctrl-geocoder) {
-  position: relative;
-  z-index: 3;
-}
-:global(.maptiler-ctrl):not(:empty) {
+:host(.maptiler-geocoder):not(:empty) {
   box-shadow: none;
 }
-:global(.maptiler-ctrl) .input-group {
-  padding-inline: 8px;
+:host(.maptiler-geocoder) .input-group {
   border: white solid 2px;
 }
-:global(.maptiler-ctrl) .input-group:focus-within {
+:host(.maptiler-geocoder) .input-group:focus-within {
   border: #2b8bfb solid 2px;
   outline: 0;
   outline: none;
 }
-:global(.maptiler-ctrl) form.can-collapse {
+:host(.maptiler-geocoder) form.can-collapse {
   max-width: 33px;
 }
-:global(.maptiler-ctrl) form,
-:global(.maptiler-ctrl) form:focus-within,
-:global(.maptiler-ctrl) form:hover {
+:host(.maptiler-geocoder) form,
+:host(.maptiler-geocoder) form:focus-within,
+:host(.maptiler-geocoder) form:hover {
   width: 270px;
   max-width: 270px;
 }
+:host(.leaflet-geocoder) .input-group {
+  border: white solid 1px;
+}
+:host(.leaflet-geocoder) form.can-collapse {
+  max-width: 30px;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,6 +2,7 @@ @@
     <html>
       <head>
         <title>MapTiler Geocoding Control example</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <style>
           body {
             display: flex;
@@ Expand Down @@