42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import { HIGHLIGHT_LAYER } from "./layers";
|
|
|
|
import { Map } from "maplibre-gl";
|
|
|
|
const map = new Map({
|
|
style:
|
|
"https://api.maptiler.com/maps/019be805-c88e-7c8b-9850-bc704d72e604/style.json?key=8nmgHEIZQiIgqQj3RZNa",
|
|
container: "map",
|
|
zoom: 17,
|
|
});
|
|
|
|
map.on("load", () => {
|
|
navigator.geolocation.getCurrentPosition((position) => {
|
|
map.panTo({
|
|
lat: position.coords.latitude,
|
|
lng: position.coords.longitude,
|
|
});
|
|
});
|
|
|
|
// Il layer per gli highlight
|
|
map.addLayer(HIGHLIGHT_LAYER);
|
|
|
|
map.on("mousemove", (ev) => {
|
|
const features = map.queryRenderedFeatures(ev.point, {
|
|
layers: ["buildings"], // questo e' il layer che c'e' nello style di maptiler
|
|
});
|
|
|
|
if (features && features.length > 0) {
|
|
const feature = features[0];
|
|
const hoveredId = feature.id;
|
|
|
|
if (hoveredId) {
|
|
map.setFilter("buildings-highlight", ["==", ["id"], hoveredId]);
|
|
map.getCanvas().style.cursor = "pointer";
|
|
}
|
|
} else {
|
|
map.setFilter("buildings-highlight", ["==", ["id"], ""]);
|
|
map.getCanvas().style.cursor = "";
|
|
}
|
|
});
|
|
});
|