add location button, add icons

This commit is contained in:
Matteo Rosati
2026-01-24 19:48:38 +01:00
parent bc5edbc1cb
commit cbca9dabf6
6 changed files with 76 additions and 7 deletions

View File

@@ -8,6 +8,8 @@
"@maptiler/leaflet-maptilersdk": "^4.1.1", "@maptiler/leaflet-maptilersdk": "^4.1.1",
"@types/jquery": "^3.5.33", "@types/jquery": "^3.5.33",
"jquery": "^4.0.0", "jquery": "^4.0.0",
"lucide": "^0.563.0",
"modern-normalize": "^3.0.1",
"netlify-cli": "^23.13.5", "netlify-cli": "^23.13.5",
"vite": "^7.3.1", "vite": "^7.3.1",
}, },
@@ -1232,6 +1234,8 @@
"lru-cache": ["lru-cache@11.2.4", "", {}, "sha512-B5Y16Jr9LB9dHVkh6ZevG+vAbOsNOYCX+sXvFWFu7B3Iz5mijW3zdbMyhsh8ANd2mSWBYdJgnqi+mL7/LrOPYg=="], "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=="], "luxon": ["luxon@3.7.2", "", {}, "sha512-vtEhXh/gNjI9Yg1u4jX/0YVPMvxzHuGgCm6tC5kZyb08yjGWGnqAjGJvcXbqQR2P3MyMEFnRbpcdFS6PBcLqew=="],
"macos-release": ["macos-release@3.4.0", "", {}, "sha512-wpGPwyg/xrSp4H4Db4xYSeAr6+cFQGHfspHzDUdYxswDnUW0L5Ov63UuJiSr8NMSpyaChO4u1n0MXUvVPtrN6A=="], "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=="], "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-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=="], "module-details-from-path": ["module-details-from-path@1.0.4", "", {}, "sha512-EGWKgxALGMgzvxYF1UyGTy0HXX/2vHLkw6+NvDKW2jypWbHpjQuj4UMcqQWXHERJhVGKikolT06G3bcKe4fi7w=="],

View File

@@ -2,6 +2,9 @@
<html> <html>
<body> <body>
<button id="locate">
<i data-lucide="locate-fixed"></i>
</button>
<div id="info"> <div id="info">
<div class="info-box"> <div class="info-box">
<p class="title">Layer ID</p> <p class="title">Layer ID</p>
@@ -20,7 +23,6 @@
</div> </div>
<div id="map"></div> <div id="map"></div>
-->
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>

View File

@@ -4,6 +4,8 @@
"@maptiler/leaflet-maptilersdk": "^4.1.1", "@maptiler/leaflet-maptilersdk": "^4.1.1",
"@types/jquery": "^3.5.33", "@types/jquery": "^3.5.33",
"jquery": "^4.0.0", "jquery": "^4.0.0",
"lucide": "^0.563.0",
"modern-normalize": "^3.0.1",
"netlify-cli": "^23.13.5", "netlify-cli": "^23.13.5",
"vite": "^7.3.1" "vite": "^7.3.1"
} }

View File

@@ -9,6 +9,20 @@ body {
font-family: "JetBrains Mono Variable", monospace; 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 { #info {
z-index: 500; z-index: 500;
position: fixed; position: fixed;

View File

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

30
vite.config.ts Normal file
View File

@@ -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';
}
},
},
},
},
});