viewof map2 = {
let container = html`<div style='height:608px;' />`;
yield container;
const mapRef = (container.value = new maplibre.Map({
container,
center: { lat: view2.center[0], lng: view2.center[1] },
zoom: view2.zoom,
minZoom: 13,
maxZoom: 19,
pitch: view2.pitch,
style: view2.basemap,
attributionControl: true
}));
const popup = new maplibre.Popup({
closeButton: false,
closeOnClick: false
});
await new Promise((resolve, reject) => {
mapRef.on("load", async () => {
mapRef.addSource("cadastre", {
type: "vector",
tiles: [
`https://maps.targomo.com/data/francecadastre/{z}/{x}/{y}.pbf?key=${targomoKey()}`
],
minzoom: 13,
maxzoom: 19
});
mapRef.addLayer({
id: "cadastre-fill",
type: "fill",
source: "cadastre",
"source-layer": "cadastre",
layout: {},
paint: {
"fill-color": color,
"fill-opacity": 0.15,
"fill-outline-color": "rgba(0, 0, 0, 0)"
}
});
mapRef.addLayer({
id: "cadastre-line",
type: "line",
source: "cadastre",
"source-layer": "cadastre",
layout: {},
paint: {
"line-color": color,
"line-width": ["interpolate", ["linear"], ["zoom"], 13, 0.1, 19, 2]
}
});
mapRef.on("mouseenter", "cadastre-fill", function (e) {
mapRef.getCanvas().style.cursor = "pointer";
});
mapRef.on("mouseleave", "cadastre-fill", function () {
mapRef.getCanvas().style.cursor = "";
});
mapRef.on("click", "cadastre-fill", function (e) {
e.preventDefault();
popup
.setLngLat(e.lngLat)
.setHTML(
`<strong>Parcel${e.features.length > 1 ? "s" : ""}</strong><br>` +
e.features
.map(
(f) =>
`refCat: ${f.properties.refcat}, area: ${f.properties.area}`
)
.join("<br>")
)
.addTo(mapRef);
});
mapRef.on("click", function (e) {
if (e.defaultPrevented === false) {
popup.remove();
}
});
resolve();
});
});
invalidation.then(() => mapRef.remove());
yield container;
}