From cbca9dabf6738cbde0c618c42cac218c3fc65dab Mon Sep 17 00:00:00 2001 From: Matteo Rosati Date: Sat, 24 Jan 2026 19:48:38 +0100 Subject: [PATCH] add location button, add icons --- bun.lock | 6 ++++++ index.html | 4 +++- package.json | 2 ++ src/main.css | 14 ++++++++++++++ src/main.ts | 27 +++++++++++++++++++++------ vite.config.ts | 30 ++++++++++++++++++++++++++++++ 6 files changed, 76 insertions(+), 7 deletions(-) create mode 100644 vite.config.ts diff --git a/bun.lock b/bun.lock index bee96f5..9c8505c 100644 --- 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=="], diff --git a/index.html b/index.html index 3874513..fba7f47 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,9 @@ +

Layer ID

@@ -20,7 +23,6 @@
- --> diff --git a/package.json b/package.json index b50941c..0a1647f 100644 --- 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" } diff --git a/src/main.css b/src/main.css index ca12cc5..1d7771c 100644 --- 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; diff --git a/src/main.ts b/src/main.ts index a4c187e..0610b71 100644 --- 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) => { diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..0a847f6 --- /dev/null +++ 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'; + } + }, + }, + }, + }, +});