add location button, add icons
This commit is contained in:
6
bun.lock
6
bun.lock
@@ -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=="],
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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"
|
||||||
}
|
}
|
||||||
|
|||||||
14
src/main.css
14
src/main.css
@@ -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;
|
||||||
|
|||||||
27
src/main.ts
27
src/main.ts
@@ -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
30
vite.config.ts
Normal 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';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user