viewof map = {
let container = html`<div style='height:600px;' />`;
// 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: { lng: -122.2904968231878, lat: 37.79736860393669 },
zoom: 8.5,
style: TgmClient().basemaps.getGLStyleURL("Light"),
attributionControl: false
}))
.addControl(new maplibre.NavigationControl())
.addControl(
new maplibre.AttributionControl({
compact: true,
customAttribution: attribution
})
);
await new Promise((resolve, reject) => {
mapRef.on("load", async () => {
mapRef.addSource("iso", {
type: "geojson",
data: {
type: "FeatureCollection",
features: []
}
});
mapRef.addLayer({
id: "iso",
type: "fill",
source: "iso",
layout: {},
paint: {
"fill-opacity": 0.25,
"fill-color": "#000"
}
});
resolve();
});
});
invalidation.then(() => mapRef.remove());
yield container;
}
isochroneResults = {
const srcFormat = [
{
lat: mapMarker.lat,
lng: mapMarker.lng,
id: 1,
tm: { car: {} }
}
];
const options = {
travelEdgeWeights: [maxTime],
maxEdgeWeight: maxTime,
edgeWeight: "time",
elevation: true,
minPolygonHoleSize: minHoleSize,
srid: 4326,
simplify: 200,
serializer: "geojson",
buffer: 0.002,
quadrantSegments: 5
};
const iso_polygons = await TgmClient().polygons.fetch(srcFormat, options);
// add layer to map, with visibility defined by statistic group zoom levels
map.getSource("iso").setData(iso_polygons);
return iso_polygons;
}
viewof mapMarker = {
const inp = Inputs.input(map.getCenter());
const marker = new maplibre.Marker({
draggable: true
})
.setLngLat(map.getCenter())
.addTo(map);
marker.on("dragend", () => {
inp.value = marker.getLngLat();
inp.dispatchEvent(new Event("input", { bubbles: true }));
});
return inp;
}
mapMarker
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.
