{
const root = DOM.element("div", {
style: `width:${dimensions.mapWidth}px; height:${dimensions.mapHeight}px;`
});
yield root;
const basemapWindows = locs.map(({ top, right, width, height }, i) => {
return DOM.element("div", {
id: `basemap-window-${i}`,
style: `position: absolute;
top: ${top}px;
right: ${right}px;
width: ${width}px;
height: ${height}px;
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
border-radius: 0.25rem;
`
});
});
const map = new mapboxgl.Map({
container: root,
style: "mapbox://styles/mapbox/outdoors-v12",
center: [-120.56827, 37.65],
zoom: 7,
projection: {
name: "lambertConformalConic",
center: [-120, 37],
parallels: [37 + 4 / 60, 38 + 26 / 60]
}
});
const basemaps = basemapWindows.map((basemapWindow, i) => {
root.appendChild(basemapWindow);
const { lng, lat } = center(basemapWindow, root, map);
const basemap = new mapboxgl.Map({
container: basemapWindow,
style: tileStyles[i],
center: [lng, lat],
zoom: 7,
projection: {
name: "lambertConformalConic",
center: [-120, 37],
parallels: [37 + 4 / 60, 38 + 26 / 60]
}
});
return basemap;
});
map.on("move", (event) => {
d3.zip(basemapWindows, basemaps).forEach(([basemapWindow, basemap], i) => {
const { lng, lat } = center(basemapWindow, root, map);
basemap.setCenter([lng, lat]);
});
});
map.on("zoom", (event) => {
basemaps.forEach((basemap) => {
basemap.setZoom(event.target.getZoom());
});
});
invalidation.then(() => {
map.remove();
basemaps.forEach((basemap) => basemap.remove());
});
}