2f:Tab7,viewof map = { let container = html`

`; // Give the container dimensions. yield container; // Create the "map" object with the maplibre.Map constructor, referencing // the container div 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 })); // Create a popup, but don't add it to the map yet. 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)" // by adding a line styled-layer above this, we can have fully opaque lines, but partially translucent fill } }); 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] } }); // Change the cursor to a pointer when the mouse is over the places layer. mapRef.on("mouseenter", "cadastre-fill", function (e) { mapRef.getCanvas().style.cursor = "pointer"; }); // Change it back to a pointer when it leaves. mapRef.on("mouseleave", "cadastre-fill", function () { mapRef.getCanvas().style.cursor = ""; }); // show cadastral id on click mapRef.on("click", "cadastre-fill", function (e) { e.preventDefault(); popup .setLngLat(e.lngLat) .setHTML( `Parcel${e.features.length > 1 ? "s" : ""}
` + e.features .map( (f) => `refCat: ${f.properties.refcat}, area: ${f.properties.area}` ) .join("
") ) .addTo(mapRef); }); // remove popup when clicked outside cadastral mapRef.on("click", function (e) { if (e.defaultPrevented === false) { popup.remove(); } }); resolve(); }); }); invalidation.then(() => mapRef.remove()); yield container; }31:[] 2d:{"title":"","cells":[{"id":448,"value":"viewof color = Inputs.color({ label: \"Color\", value: \"#ff8319\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"# Madrid, Spain","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":541,"value":"# Paris, France","pinned":false,"hidden":false,"mode":"md"},{"id":537,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"view = ({\n name: \"Madrid\",\n center: [40.415389959443075, -3.7091249425001496],\n zoom: 13,\n pitch: 0,\n basemap: tgmCoreClient(\"westcentraleurope\").basemaps.getGLStyleURL(\"Light\")\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":535,"value":"view2 = ({\n name: \"paris\",\n center: [48.853529848022795, 2.3480354693296244],\n zoom: 13,\n pitch: 0,\n basemap: tgmCoreClient(\"westcentraleurope\").basemaps.getGLStyleURL(\"Light\")\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"maplibre = {\n const gl = await require(\"maplibre-gl@2.4.0\");\n const href = await require.resolve(\"maplibre-gl@2.4.0/dist/maplibre-gl.css\");\n document.head.appendChild(html``);\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"import {\n tgmCoreClient,\n tgmNotice,\n targomoKey,\n tgmIntro,\n codeStyle\n} from \"@targomo/re-usable-targomo-resources\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}