Search icon update (#21)

* added maptiler-sdk example * updated search icon (fixes #19)
maptiler · Jan 16, 2024 · 2742731 · 2742731
1 parent b8858b7
commit 2742731
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 4 deletions.
diff --git a/examples/maptiler-sdk/AppMapLibreGl.svelte b/examples/maptiler-sdk/AppMapLibreGl.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+  import * as maptilersdk from "@maptiler/sdk";
+  import "@maptiler/sdk/dist/maptiler-sdk.css";
+  import { onMount } from "svelte";
+  import { GeocodingControl } from "../../src/maptilersdk";
+
+  let containerElement: HTMLElement;
+
+  maptilersdk.config.apiKey = import.meta.env.VITE_API_KEY;
+
+  const apiKey = import.meta.env.VITE_API_KEY;
+
+  if (!apiKey) {
+    const errMsg = "missing VITE_API_KEY environment variable";
+
+    window.alert(errMsg);
+
+    throw new Error(errMsg);
+  }
+
+  onMount(() => {
+    const map = new maptilersdk.Map({
+      style: maptilersdk.MapStyle.STREETS,
+      container: containerElement,
+      navigationControl: true,
+    });
+
+    map.addControl(
+      new GeocodingControl({
+        enableReverse: "always",
+        collapsed: true,
+        // limit: 20,
+        // types: ["poi"],
+        // fetchParameters: { credentials: "include" },
+        // selectFirst: false,
+        iconsBaseUrl: "/icons/",
+        proximity: [
+          { type: "map-center", minZoom: 12 },
+          { type: "client-geolocation", minZoom: 8 },
+          { type: "server-geolocation", minZoom: 8 },
+        ],
+      }),
+    );
+  });
+</script>
+
+<main id="main" bind:this={containerElement} />
+
+<style>
+  #main {
+    position: absolute;
+    inset: 0;
+  }
+</style>
diff --git a/examples/maptiler-sdk/index.html b/examples/maptiler-sdk/index.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+<title>MapTiler Geocoding Control :: MapTiler SDK</title>
+
+<div id="app"></div>
+
+<script type="module" src="./main.ts"></script>
diff --git a/examples/maptiler-sdk/main.ts b/examples/maptiler-sdk/main.ts
@@ -0,0 +1,9 @@
+import App from "./AppMapLibreGl.svelte";
+
+const appElement = document.getElementById("app");
+
+if (!appElement) {
+  throw new Error("element with id 'app' not found");
+}
+
+export default new App({ target: appElement });
diff --git a/index.html b/index.html
@@ -12,6 +12,7 @@
 <h1>MapTiler Geocoding Control Examples</h1>
 
 <ul>
+  <li><a href="/examples/maptiler-sdk/">MapTiler SDK</a></li>
   <li><a href="/examples/maplibregl/">MapLibre GL JS</a></li>
   <li><a href="/examples/leaflet/">Leaflet</a></li>
   <li><a href="/examples/openlayers/">OpenLayers</a></li>

diff --git a/src/GeocodingControl.svelte b/src/GeocodingControl.svelte
@@ -923,6 +923,11 @@
     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;
@@ -958,7 +963,7 @@
 
     & form {
       &.can-collapse {
-        max-width: 34px;
+        max-width: 33px;
       }
 
       &,

diff --git a/src/SearchIcon.svelte b/src/SearchIcon.svelte
@@ -1,12 +1,19 @@
-<svg width="14" height="14" viewBox="0 0 15 15">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="13"
+  height="13"
+  viewBox="0 0 13 13"
+>
+  <circle cx="4.789" cy="4.787" r="3.85" style="stroke-width:1.875;fill:none" />
   <path
-    d="M13.101 14.261 8.74 9.899a4.797 4.797 0 0 1-1.425.748 5.165 5.165 0 0 1-1.603.248c-1.446 0-2.677-.5-3.693-1.503S.495 7.164.495 5.717c0-1.446.508-2.678 1.524-3.693C3.035 1.008 4.266.5 5.712.5c1.448 0 2.672.508 3.675 1.524 1.002 1.015 1.503 2.247 1.503 3.693 0 .558-.08 1.092-.239 1.603-.159.512-.411.98-.757 1.405l4.382 4.4a.74.74 0 0 1 .229.568.81.81 0 0 1-.249.568.787.787 0 0 1-.577.239.787.787 0 0 1-.578-.239ZM5.712 9.223c.97 0 1.796-.342 2.48-1.026a3.378 3.378 0 0 0 1.026-2.48c0-.982-.34-1.818-1.016-2.509-.677-.69-1.507-1.035-2.49-1.035a3.42 3.42 0 0 0-2.509 1.035 3.42 3.42 0 0 0-1.035 2.51c0 .982.345 1.812 1.035 2.488.691.678 1.527 1.017 2.51 1.017Z"
+    d="M12.063 12.063 7.635 7.635"
+    style="stroke-width:1.875;stroke-linecap:round"
   />
 </svg>
 
 <style>
   svg {
     display: block;
-    fill: var(--color-icon-button);
+    stroke: var(--color-icon-button);
   }
 </style>