From 04e0808d6d6ffc02726ea3bdfc0e2d7aee207c47 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kate=20Mih=C3=A1likov=C3=A1?= <kate@katemihalikova.cz>
Date: Fri, 5 Dec 2025 22:41:57 +0100
Subject: [PATCH 1/2] RD-1496 Fix global styles

---
 demos/01-standalone.html           |  1 +
 demos/02-maptiler-sdk.html         |  7 +--
 demos/03-maplibregl.html           |  7 +--
 demos/04-react.html                |  1 +
 src/components/marker.css          | 47 ++++++++-------------
 src/controls/leaflet-control.ts    |  6 ++-
 src/controls/maplibregl-control.ts | 19 ++++++---
 src/geocoder/geocoder-options.ts   | 14 +++---
 src/geocoder/geocoder.css          | 68 ++++++++++++++----------------
 src/geocoder/geocoder.ts           |  9 ++--
 10 files changed, 81 insertions(+), 98 deletions(-)
diff --git a/demos/01-standalone.html b/demos/01-standalone.html
index a99de33..91a9135 100644
--- 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
index 72595c3..8877c1a 100644
--- 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
index ba8124e..a57b663 100644
--- 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
index c3f7450..7710923 100644
--- 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
index 97819cb..07e8120 100644
--- 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
index 0aacbe9..f83ea9a 100644
--- 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";
     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
index dd0e953..c4a9bc3 100644
--- 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;
   }
 
@@ -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
index 4939c3d..80f8801 100644
--- 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
index ce330d9..dba47f8 100644
--- 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,18 +18,21 @@ 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:focus-within,
-form:hover {
+form {
   width: 270px;
   max-width: 270px;
 }
+form:focus-within,
+form:hover {
+  width: 270px !important;
+  max-width: 270px !important;
+}
 form input::placeholder,
 form:focus-within input::placeholder,
 form:hover input::placeholder {
@@ -91,7 +93,7 @@ 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;
@@ -99,13 +101,12 @@ div.error :global(svg) {
 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;
@@ -113,17 +114,13 @@ div.no-results {
   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;
+}
diff --git a/src/geocoder/geocoder.ts b/src/geocoder/geocoder.ts
index c359bce..8f90714 100644
--- a/src/geocoder/geocoder.ts
+++ b/src/geocoder/geocoder.ts
@@ -29,7 +29,6 @@ export class MaptilerGeocoderElement extends LitElement implements MaptilerGeoco
   @property({ type: String }) apiKey?: string;
   @property({ type: String }) apiUrl?: string;
   @property({ type: Array }) bbox?: BBox;
-  @property({ type: String }) class?: string;
   @property({ type: String }) clearButtonTitle?: string;
   @property({ type: Boolean }) clearListOnPick: boolean = false;
   @property({ type: Boolean }) clearOnBlur: boolean = false;
@@ -50,6 +49,7 @@ export class MaptilerGeocoderElement extends LitElement implements MaptilerGeoco
   @property({ type: Number }) limit?: number;
   @property({ type: Number }) minLength?: number;
   @property({ type: String }) noResultsMessage?: string;
+  @property({ type: Boolean }) openListOnTop: boolean = false;
   @property({ type: String }) placeholder?: string;
   @property({ type: Array }) proximity?: ProximityRule[] | null;
   @property({ type: Boolean }) reverseActive: boolean = false;
@@ -641,7 +641,7 @@ export class MaptilerGeocoderElement extends LitElement implements MaptilerGeoco
   render() {
     /* eslint-disable @typescript-eslint/unbound-method */
     return html`
-      <form @submit=${this.#handleSubmit} class=${classMap({ [this.class ?? ""]: true, "can-collapse": this.collapsed && this.searchValue === "" })}>
+      <form @submit=${this.#handleSubmit} class=${classMap({ "can-collapse": this.collapsed && this.searchValue === "" })}>
         <div class="input-group">
           <button
             class="search-button"
@@ -697,7 +697,6 @@ export class MaptilerGeocoderElement extends LitElement implements MaptilerGeoco
                 <maptiler-geocode-fail-icon></maptiler-geocode-fail-icon>
 
                 <div>${this.errorMessage ?? "Something went wrong…"}</div>
-                <div>${this.error}</div>
 
                 <button @click=${() => (this.error = undefined)}>
                   <maptiler-geocode-clear-icon></maptiler-geocode-clear-icon>
@@ -718,7 +717,7 @@ export class MaptilerGeocoderElement extends LitElement implements MaptilerGeoco
                   </div>
                 `
               : html`
-                  <ul class="options" @mouseleave=${this.#handleMouseLeave} @keydown=${this.#handleKeyDown} role="listbox">
+                  <ul class="options ${classMap({ "open-on-top": this.openListOnTop })}" @mouseleave=${this.#handleMouseLeave} @keydown=${this.#handleKeyDown} role="listbox">
                     ${repeat(
                       this.listFeatures,
                       (feature) => feature.id + (feature.address ? "," + feature.address : ""),
@@ -759,7 +758,6 @@ const propertyNames = [
   "apiKey",
   "apiUrl",
   "bbox",
-  "class",
   "clearButtonTitle",
   "clearListOnPick",
   "clearOnBlur",
@@ -782,6 +780,7 @@ const propertyNames = [
   "reverseGeocodingLimit",
   "minLength",
   "noResultsMessage",
+  "openListOnTop",
   "placeholder",
   "proximity",
   "reverseActive",

From 06bb9ad5c8e56da5d82991aae9588bc9302b6406 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kate=20Mih=C3=A1likov=C3=A1?= <kate@katemihalikova.cz>
Date: Tue, 9 Dec 2025 14:05:42 +0100
Subject: [PATCH 2/2] RD-1496 Fix review feedback

---
 src/controls/leaflet-control.ts    | 2 +-
 src/controls/maplibregl-control.ts | 2 +-
 src/geocoder/geocoder.css          | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/controls/leaflet-control.ts b/src/controls/leaflet-control.ts
index f83ea9a..a660368 100644
--- a/src/controls/leaflet-control.ts
+++ b/src/controls/leaflet-control.ts
@@ -72,7 +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";
+    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);
diff --git a/src/controls/maplibregl-control.ts b/src/controls/maplibregl-control.ts
index c4a9bc3..30cc897 100644
--- a/src/controls/maplibregl-control.ts
+++ b/src/controls/maplibregl-control.ts
@@ -381,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");
       }
     }
diff --git a/src/geocoder/geocoder.css b/src/geocoder/geocoder.css
index dba47f8..6da9045 100644
--- a/src/geocoder/geocoder.css
+++ b/src/geocoder/geocoder.css
@@ -30,8 +30,8 @@ form {
 }
 form:focus-within,
 form:hover {
-  width: 270px !important;
-  max-width: 270px !important;
+  width: 270px;
+  max-width: 270px;
 }
 form input::placeholder,
 form:focus-within input::placeholder,
