viewof map = {
let container = html`<div style='height:608px;' />`;
// 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: view.center[0], lng: view.center[1] },
zoom: view.zoom,
minZoom: 13,
maxZoom: 19,
pitch: view.pitch,
style: view.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/spaincadastre/{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(
`<strong>Parcel${e.features.length > 1 ? "s" : ""}</strong><br>` +
"refCat: " +
e.features.map((f) => f.properties.refcat).join("<br>")
)
.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;
}
viewof map2 = {
let container = html`<div style='height:608px;' />`;
// 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(
`<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);
});
// remove popup when clicked outside cadastral
mapRef.on("click", function (e) {
if (e.defaultPrevented === false) {
popup.remove();
}
});
resolve();
});
});
invalidation.then(() => mapRef.remove());
yield container;
}
view = ({
name: "Madrid",
center: [40.415389959443075, -3.7091249425001496],
zoom: 13,
pitch: 0,
basemap: tgmCoreClient("westcentraleurope").basemaps.getGLStyleURL("Light")
})
view2 = ({
name: "paris",
center: [48.853529848022795, 2.3480354693296244],
zoom: 13,
pitch: 0,
basemap: tgmCoreClient("westcentraleurope").basemaps.getGLStyleURL("Light")
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
