add location button, add icons

src/main.css

@@ -9,6 +9,20 @@ body {
     font-family: "JetBrains Mono Variable", monospace;
 }
 
+#locate {
+    position: fixed;
+    left: 10px;
+    top: 10px;
+    width: 40px;
+    height: 40px;
+    background-color: #000;
+    z-index: 500;
+    color: #fff;
+    text-align: center;
+    line-height: 50px;
+    border-radius: 8px;
+}
+
 #info {
     z-index: 500;
     position: fixed;

src/main.ts

@@ -1,15 +1,19 @@
+import "modern-normalize/modern-normalize.css";
 import "@fontsource-variable/jetbrains-mono";
 import "./main.css";
 import "@maptiler/sdk/dist/maptiler-sdk.css";
 import $ from "jquery";
-import {
-  ExpressionSpecificationDefinition,
-  FilterSpecification,
-  Map,
-  config,
-} from "@maptiler/sdk";
+import { FilterSpecification, Map, config } from "@maptiler/sdk";
+import { createIcons, Locate, LocateFixed } from "lucide";
 import { LAYERS } from "./layers";
 
+createIcons({
+  icons: {
+    Locate,
+    LocateFixed,
+  },
+});
+
 const MAP_STYLE = "019be805-c88e-7c8b-9850-bc704d72e604";
 const API_KEY = "8nmgHEIZQiIgqQj3RZNa";
 const INITIAL_ZOOM = 17;
@@ -27,6 +31,17 @@ const map = new Map({
   style: MAP_STYLE,
 });
 
+$("#locate").on("click", (e) => {
+  e.preventDefault();
+  navigator.geolocation.getCurrentPosition((position) => {
+    map.setZoom(INITIAL_ZOOM);
+    map.panTo({
+      lat: position.coords.latitude,
+      lng: position.coords.longitude,
+    });
+  });
+});
+
 // Funzione helper per settare i filtri dei layer.
 // Per non avere array hardcoded.]
 const layerFilterEq = (id?: string | number) => {