add location button, add icons

2026-01-24 19:48:38 +01:00
parent bc5edbc1cb
commit cbca9dabf6
6 changed files with 76 additions and 7 deletions
--- a/bun.lock
+++ b/bun.lock
@@ -8,6 +8,8 @@
        "@maptiler/leaflet-maptilersdk": "^4.1.1",
        "@types/jquery": "^3.5.33",
        "jquery": "^4.0.0",
+        "lucide": "^0.563.0",
+        "modern-normalize": "^3.0.1",
        "netlify-cli": "^23.13.5",
        "vite": "^7.3.1",
      },
@@ -1232,6 +1234,8 @@

    "lru-cache": ["lru-cache@11.2.4", "", {}, "sha512-B5Y16Jr9LB9dHVkh6ZevG+vAbOsNOYCX+sXvFWFu7B3Iz5mijW3zdbMyhsh8ANd2mSWBYdJgnqi+mL7/LrOPYg=="],

+    "lucide": ["lucide@0.563.0", "", {}, "sha512-2zBzDJ5n2Plj3d0ksj6h9TWPOSiKu9gtxJxnBAye11X/8gfWied6IYJn6ADYBp1NPoJmgpyOYP3wMrVx69+2AA=="],
+
    "luxon": ["luxon@3.7.2", "", {}, "sha512-vtEhXh/gNjI9Yg1u4jX/0YVPMvxzHuGgCm6tC5kZyb08yjGWGnqAjGJvcXbqQR2P3MyMEFnRbpcdFS6PBcLqew=="],

    "macos-release": ["macos-release@3.4.0", "", {}, "sha512-wpGPwyg/xrSp4H4Db4xYSeAr6+cFQGHfspHzDUdYxswDnUW0L5Ov63UuJiSr8NMSpyaChO4u1n0MXUvVPtrN6A=="],
@@ -1294,6 +1298,8 @@

    "mlly": ["mlly@1.8.0", "", { "dependencies": { "acorn": "^8.15.0", "pathe": "^2.0.3", "pkg-types": "^1.3.1", "ufo": "^1.6.1" } }, "sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g=="],

+    "modern-normalize": ["modern-normalize@3.0.1", "", {}, "sha512-VqlMdYi59Uch6fnUPxnpijWUQe+TW6zeWCvyr6Mb7JibheHzSuAAoJi2c71ZwIaWKpECpGpYHoaaBp6rBRr+/g=="],
+
    "module-definition": ["module-definition@6.0.1", "", { "dependencies": { "ast-module-types": "^6.0.1", "node-source-walk": "^7.0.1" }, "bin": { "module-definition": "bin/cli.js" } }, "sha512-FeVc50FTfVVQnolk/WQT8MX+2WVcDnTGiq6Wo+/+lJ2ET1bRVi3HG3YlJUfqagNMc/kUlFSoR96AJkxGpKz13g=="],

    "module-details-from-path": ["module-details-from-path@1.0.4", "", {}, "sha512-EGWKgxALGMgzvxYF1UyGTy0HXX/2vHLkw6+NvDKW2jypWbHpjQuj4UMcqQWXHERJhVGKikolT06G3bcKe4fi7w=="],
--- a/index.html
+++ b/index.html
@@ -2,6 +2,9 @@

 <html>
    <body>
+        <button id="locate">
+            <i data-lucide="locate-fixed"></i>
+        </button>
        <div id="info">
            <div class="info-box">
                <p class="title">Layer ID</p>
@@ -20,7 +23,6 @@
        </div>

        <div id="map"></div>
-        -->
        <script type="module" src="/src/main.ts"></script>
    </body>
 </html>
--- a/package.json
+++ b/package.json
@@ -4,6 +4,8 @@
    "@maptiler/leaflet-maptilersdk": "^4.1.1",
    "@types/jquery": "^3.5.33",
    "jquery": "^4.0.0",
+    "lucide": "^0.563.0",
+    "modern-normalize": "^3.0.1",
    "netlify-cli": "^23.13.5",
    "vite": "^7.3.1"
  }
--- a/src/main.css
+++ b/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;
--- a/src/main.ts
+++ b/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) => {
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,30 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      lucide: "lucide/dist/esm/lucide/src/lucide.js",
+    },
+  },
+  build: {
+    chunkSizeWarningLimit: 1600,
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes('node_modules')) {
+            if (id.includes('maptiler')) {
+              return 'maptiler';
+            }
+            if (id.includes('maplibre-gl')) {
+              return 'maplibre';
+            }
+            if (id.includes('jquery')) {
+              return 'jquery';
+            }
+            return 'vendor';
+          }
+        },
+      },
+    },
+  },
+});