diff --git a/.prettierrc b/.prettierrc
index 40859f0..ca43d6f 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,5 @@
 {
-	"plugins": ["prettier-plugin-svelte"],
-	"pluginSearchDirs": ["."],
-	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+  "plugins": ["prettier-plugin-svelte"],
+  "pluginSearchDirs": ["."],
+  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }
diff --git a/demo.html b/demo.html
index 71a0685..b45fb07 100644
--- a/demo.html
+++ b/demo.html
@@ -34,6 +34,7 @@
 
       const gc = new maptilerGeocoding.GeocodingControl({
         apiKey: "0iOk4fgsz9fOXyDYCirE",
+        maplibregl,
       });
 
       map.addControl(gc);
diff --git a/index.html b/index.html
index b5b1252..c6bbf66 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + Svelte + TS</title>
   </head>
diff --git a/src/App.svelte b/src/App.svelte
index be0e7ff..b9f1c83 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,29 +1,30 @@
 <script lang="ts">
-	import 'maplibre-gl/dist/maplibre-gl.css';
+  import "maplibre-gl/dist/maplibre-gl.css";
 
-	import { Map } from 'maplibre-gl';
-	import { onMount } from 'svelte';
-  import { GeocodingControl } from './lib/index';
+  import { Map } from "maplibre-gl";
+  import { onMount } from "svelte";
+  import { GeocodingControl } from "./lib/index";
+  import maplibregl from "maplibre-gl";
 
-	let containerElement: HTMLElement;
+  let containerElement: HTMLElement;
 
-  const apiKey = '0iOk4fgsz9fOXyDYCirE';
+  const apiKey = "0iOk4fgsz9fOXyDYCirE";
 
-	onMount(() => {
-		const map = new Map({
-			style: 'https://api.maptiler.com/maps/streets/style.json?key=' + apiKey,
-			container: containerElement
-		});
+  onMount(() => {
+    const map = new Map({
+      style: "https://api.maptiler.com/maps/streets/style.json?key=" + apiKey,
+      container: containerElement,
+    });
 
-		map.addControl(new GeocodingControl({ apiKey }));
-	});
+    map.addControl(new GeocodingControl({ apiKey, maplibregl }));
+  });
 </script>
 
 <main id="main" bind:this={containerElement} />
 
 <style>
-	#main {
-		position: absolute;
-		inset: 0;
-	}
+  #main {
+    position: absolute;
+    inset: 0;
+  }
 </style>
diff --git a/src/assets/svelte.svg b/src/assets/svelte.svg
deleted file mode 100644
index c5e0848..0000000
--- a/src/assets/svelte.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>
\ No newline at end of file
diff --git a/src/lib/Geocoding.svelte b/src/lib/Geocoding.svelte
index 62cc74a..670c29a 100644
--- a/src/lib/Geocoding.svelte
+++ b/src/lib/Geocoding.svelte
@@ -1,12 +1,52 @@
 <script type="ts">
-  import maplibregl from "maplibre-gl";
+  import type maplibregl1 from "maplibre-gl";
+  import { onMount } from "svelte";
   import MarkerIcon from "./MarkerIcon.svelte";
   import SuggestionIcon from "./SuggestionIcon.svelte";
 
+  export let maplibregl: typeof maplibregl1 = undefined;
+
   export let map: maplibregl.Map;
 
   export let apiKey: string;
 
+  export let debounceSearch = 200;
+
+  export let placeholder = "Search";
+
+  export let proximity: [number, number] = undefined;
+
+  export let bbox: [number, number, number, number] = undefined;
+
+  export let trackProximity = true;
+
+  export let minLength = 2;
+
+  export let limit = 5;
+
+  export let language = navigator.language.replace(/-.*/, "");
+
+  onMount(() => {
+    if (!trackProximity) {
+      return;
+    }
+
+    function handleMoveEnd() {
+      let c: maplibregl.LngLat;
+
+      proximity =
+        map.getZoom() > 9
+          ? [(c = map.getCenter().wrap()).lng, c.lat]
+          : undefined;
+    }
+
+    map.on("moveend", handleMoveEnd);
+
+    return () => {
+      map.off("moveend", handleMoveEnd);
+    };
+  });
+
   let focused = false;
 
   type FeatureCollection = {
@@ -21,9 +61,11 @@
     bbox: [number, number, number, number];
   };
 
-  let searchValue: string;
+  let searchValue = "";
+
+  let listFeatures: Feature[] = [];
 
-  let features: Feature[] = [];
+  let markedFeatures: Feature[] = [];
 
   let selected: Feature | undefined;
 
@@ -33,19 +75,26 @@
 
   $: if (picked) {
     map.fitBounds(picked.bbox);
-    features = [];
+    listFeatures = [];
+    markedFeatures = [];
     selected = undefined;
     index = -1;
   }
 
-  $: {
-    for (const [id, marker] of markers.entries()) {
+  $: markers: {
+    if (!maplibregl) {
+      break markers;
+    }
+
+    for (const marker of markers.values()) {
       marker.remove();
     }
 
     markers.clear();
 
-    for (const feature of picked ? [...features, picked] : features) {
+    for (const feature of picked
+      ? [...markedFeatures, picked]
+      : markedFeatures) {
       const element = document.createElement("div");
 
       new MarkerIcon({ target: element });
@@ -60,52 +109,77 @@
   $: if (!searchValue) {
     picked = undefined;
     selected = undefined;
-    features = [];
+    listFeatures = [];
+    markedFeatures = listFeatures;
   }
 
   const markers = new Map<string, maplibregl.Marker>();
 
-  async function handleOnSubmit() {
+  function handleOnSubmit() {
     if (selected) {
       searchValue = selected.text;
       picked = selected;
       selected = undefined;
-      features = [];
+      listFeatures = [];
+      markedFeatures = [];
       index = -1;
-      return;
+    } else if (searchValue) {
+      search(searchValue).then(() => {
+        markedFeatures = listFeatures;
+
+        zoomToResults();
+      }); // TODO handle async error
     }
+  }
 
-    if (!searchValue) {
-      return;
+  async function search(searchValue: string) {
+    const sp = new URLSearchParams();
+
+    sp.set("key", apiKey);
+
+    sp.set("limit", String(limit));
+
+    if (language) {
+      sp.set("language", String(language));
+    }
+
+    if (bbox) {
+      sp.set("bbox", bbox.join(","));
+    }
+
+    if (proximity) {
+      sp.set("proximity", proximity.join(","));
     }
 
     const res = await fetch(
       "https://api.maptiler.com/geocoding/" +
         encodeURIComponent(searchValue) +
-        ".json?key=" +
-        apiKey
+        ".json?" +
+        sp.toString()
     );
 
     const fc: FeatureCollection = await res.json();
 
-    const bbox: [number, number, number, number] = [180, 90, -180, -90];
+    listFeatures = fc.features;
+  }
 
-    for (const feature of fc.features) {
-      const element = document.createElement("div");
+  function zoomToResults() {
+    if (!markedFeatures.length) {
+      return;
+    }
 
-      new MarkerIcon({ target: element });
+    const bbox: [number, number, number, number] = [180, 90, -180, -90];
 
+    for (const feature of markedFeatures) {
       bbox[0] = Math.min(bbox[0], feature.bbox[0]);
       bbox[1] = Math.min(bbox[1], feature.bbox[1]);
       bbox[2] = Math.max(bbox[2], feature.bbox[2]);
       bbox[3] = Math.max(bbox[3], feature.bbox[3]);
     }
 
-    if (fc.features.length > 0) {
+    if (markedFeatures.length > 0) {
       map.fitBounds(bbox, { padding: 50 });
     }
-
-    features = fc.features;
   }
 
   // highlight selected marker
@@ -136,22 +210,42 @@
         index = 0;
       }
 
-      if (features.length > 0) {
-        index = (index + dir) % features.length;
+      if (listFeatures.length > 0) {
+        index = (index + dir) % listFeatures.length;
 
         if (index < 0) {
-          index += features.length;
+          index += listFeatures.length;
         }
 
-        selected = features[index];
+        selected = listFeatures[index];
       }
 
       e.preventDefault();
     }
   }
 
-  // clear selecion on edit
-  $: searchValue, (selected = undefined, index = -1);
+  $: {
+    searchValue; // clear selection on edit
+
+    selected = undefined;
+    index = -1;
+  }
+
+  let searchTimeoutRef: number;
+
+  function handleInput() {
+    if (searchValue.length > minLength) {
+      if (searchTimeoutRef) {
+        clearTimeout(searchTimeoutRef);
+      }
+
+      searchTimeoutRef = window.setTimeout(() => {
+        search(searchValue); // TODO handle async error
+      }, debounceSearch);
+    } else {
+      listFeatures = [];
+    }
+  }
 </script>
 
 <form on:submit|preventDefault={handleOnSubmit}>
@@ -162,14 +256,15 @@
     on:focus={() => (focused = true)}
     on:blur={() => (focused = false)}
     on:keydown={handleKeyDown}
+    on:input={handleInput}
     type="search"
-    placeholder="Search"
-    aria-label="Search"
+    {placeholder}
+    aria-label={placeholder}
   />
 
-  {#if focusedDelayed && features.length > 0}
+  {#if focusedDelayed && listFeatures.length > 0}
     <ul>
-      {#each features as feature}
+      {#each listFeatures as feature}
         <li
           tabindex="0"
           class:selected={feature === selected}
@@ -178,7 +273,7 @@
             picked = feature;
             searchValue = feature.text;
             selected = undefined;
-            features = [];
+            listFeatures = [];
             index = -1;
           }}
         >
diff --git a/src/lib/MarkerIcon.svelte b/src/lib/MarkerIcon.svelte
index 5ef0c2b..1608b19 100644
--- a/src/lib/MarkerIcon.svelte
+++ b/src/lib/MarkerIcon.svelte
@@ -13,7 +13,7 @@
 
 <style>
   svg {
-		grid-row: 1/3;
+    grid-row: 1/3;
     align-self: center;
     margin: 4px;
   }
@@ -23,6 +23,6 @@
   }
 
   :global(.marker-selected) svg path {
-		fill: red;
-	}
+    fill: red;
+  }
 </style>
diff --git a/src/lib/SuggestionIcon.svelte b/src/lib/SuggestionIcon.svelte
index 8da5941..8cd91a1 100644
--- a/src/lib/SuggestionIcon.svelte
+++ b/src/lib/SuggestionIcon.svelte
@@ -1,9 +1,4 @@
-<svg
-  viewBox="0 0 18 18"
-  xml:space="preserve"
-  width="30"
-  height="24"
->
+<svg viewBox="0 0 18 18" xml:space="preserve" width="30" height="24">
   <path
     d="M7.4 2.5c-2.7 0-4.9 2.2-4.9 4.9s2.2 4.9 4.9 4.9c1 0 1.8-.2 2.5-.8l3.7 3.7c.2.2.4.3.8.3.7 0 1.1-.4 1.1-1.1 0-.3-.1-.5-.3-.8L11.4 10c.4-.8.8-1.6.8-2.5.1-2.8-2.1-5-4.8-5zm0 1.6c1.8 0 3.2 1.4 3.2 3.2s-1.4 3.2-3.2 3.2-3.3-1.3-3.3-3.1 1.4-3.3 3.3-3.3z"
   />
diff --git a/src/lib/index.ts b/src/lib/index.ts
index dffea8c..d458dd7 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,26 +1,100 @@
 // Reexport your entry components here
 
-import type { Map, IControl } from 'maplibre-gl';
-import Geocoding from './Geocoding.svelte';
+import type { Map, IControl } from "maplibre-gl";
+import Geocoding from "./Geocoding.svelte";
+import type maplibregl1 from "maplibre-gl";
+
+type Options = {
+  apiKey: string;
+
+  /**
+   * A maplibre-gl instance to use when creating Markers. Required if options.marker is true.
+   */
+  maplibregl?: typeof maplibregl1;
+
+  /**
+   * Sets the amount of time, in milliseconds, to wait before querying the server when a user types into the Geocoder input box.
+   * This parameter may be useful for reducing the total number of API calls made for a single query.
+   *
+   * (optional, default `200`)
+   */
+  debounceSearch?: number;
+
+  /**
+   * A proximity argument: this is a geographical point given as an object with latitude and longitude properties.
+   * Search results closer to this point will be given higher priority.
+   */
+  proximity?: [number, number];
+
+  /**
+   * Override the default placeholder attribute value.
+   *
+   * (optional, default Search)
+   */
+  placeholder?: string;
+
+  /**
+   * If true, the geocoder proximity will automatically update based on the map view.
+   *
+   * (optional, default true)
+   */
+  trackProximity?: boolean;
+
+  /**
+   * Minimum number of characters to enter before results are shown.
+   *
+   * (optional, default 2)
+   */
+  minLength?: number;
+
+  /**
+   * A bounding box argument: this is a bounding box given as an array in the format [minX, minY, maxX, maxY].
+   * Search results will be limited to the bounding box.
+   */
+  bbox?: number;
+
+  /**
+   * Maximum number of results to show.
+   *
+   * (optional, default 5)
+   */
+  limit?: number;
+
+  /**
+   * Specify the language to use for response text and query result weighting.
+   * Options are IETF language tags comprised of a mandatory ISO 639-1 language code and optionally one or more IETF subtags for country or script.
+   * More than one value can also be specified, separated by commas.
+   * Defaults to the browser's language settings.
+   */
+  language?: string;
+
+  // TODO - missing and useful from maplibre-gl-geocoder
+  // zoom // 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. (optional, default 16)
+  // flyTo // (Boolean | Object) 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. (optional, default true)
+  // collapsed // If true, the geocoder control will collapse until hovered or in focus. (optional, default false)
+  // clearAndBlurOnEsc // If true, the geocoder control will clear it's contents and blur when user presses the escape key. (optional, default false)
+  // clearOnBlur // If true, the geocoder control will clear its value when the input blurs. (optional, default false)
+  // filter // 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.
+};
 
 export class GeocodingControl implements IControl {
   #gc?: Geocoding;
 
-  #apiKey: string;
+  #options: Options;
 
-  constructor({ apiKey }: { apiKey: string }) {
-    this.#apiKey = apiKey;
+  constructor(options: Options) {
+    this.#options = options;
   }
 
   onAdd(map: Map) {
-    const div = document.createElement('div');
+    const div = document.createElement("div");
 
     div.className =
-      'mapboxgl-ctrl-geocoder mapboxgl-ctrl maplibregl-ctrl-geocoder maplibregl-ctrl';
+      "mapboxgl-ctrl-geocoder mapboxgl-ctrl maplibregl-ctrl-geocoder maplibregl-ctrl";
 
     this.#gc = new Geocoding({
       target: div,
-      props: { map, apiKey: this.#apiKey }
+      props: { map, ...this.#options },
     });
 
     return div;
diff --git a/src/main.ts b/src/main.ts
index d8200ac..5332616 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,7 +1,7 @@
-import App from './App.svelte'
+import App from "./App.svelte";
 
 const app = new App({
-  target: document.getElementById('app')
-})
+  target: document.getElementById("app"),
+});
 
-export default app
+export default app;
diff --git a/svelte.config.js b/svelte.config.js
index aa911a7..7714a51 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,7 +1,7 @@
-import sveltePreprocess from 'svelte-preprocess'
+import sveltePreprocess from "svelte-preprocess";
 
 export default {
   // Consult https://github.com/sveltejs/svelte-preprocess
   // for more information about preprocessors
   preprocess: sveltePreprocess(),
-}
+};
