viewof antennaMap = {
const node = DOM.element("div");
const container = d3.select(node);
const canvas = container
.append("canvas")
.style("width", `${width}px`)
.style("height", `${height}px`)
.attr("width", width * dpi)
.attr("height", height * dpi)
.on("mousemove", mousemoved);
const svg = container
.append("svg")
.style("position", "absolute")
.style("pointer-events", "none")
.style("top", 0)
.style("left", 0)
.attr("width", width)
.attr("height", height);
const ctx = canvas.node().getContext("2d");
ctx.setTransform(dpi, 0, 0, dpi, 0, 0);
ctx.clearRect(0, 0, width, height);
const path = d3.geoPath(projection).context(ctx);
const svgPath = d3.geoPath(projection);
const fbIndex = new Flatbush(voronoiCellsFeatures.length);
ctx.lineWidth = 0.5;
for (const municipality of gemeentes) {
ctx.beginPath();
ctx.strokeStyle = "#444";
path(municipality);
ctx.stroke();
}
for (const antenna of filteredData) {
ctx.beginPath();
path.pointRadius(0.5)(antenna);
ctx.stroke();
ctx.fill();
}
for (const cell of voronoiCellsFeatures) {
const bounds = path.bounds(cell);
fbIndex.add(
Math.floor(bounds[0][0]),
Math.floor(bounds[0][1]),
Math.ceil(bounds[1][0]),
Math.ceil(bounds[1][1])
);
ctx.beginPath();
ctx.lineWidth = 0.2;
ctx.strokeStyle = "coral";
path(cell);
ctx.stroke();
}
fbIndex.finish();
ctx.lineWidth = 1;
ctx.beginPath();
path(border);
ctx.strokeStyle = "black";
ctx.stroke();
function mousemoved(e) {
const [x, y] = d3.pointer(e);
const idx = fbIndex.search(x, y, x, y);
canvas.style("cursor", null);
svg.select("path").attr("d", null);
if (idx.length === 0) return;
const selectedCell = voronoiCellsFeatures[idx[0]];
node.value = { ...selectedCell.properties.site.properties };
node.dispatchEvent(new CustomEvent("input"), { bubbles: true });
canvas.style("cursor", "pointer");
svg
.select("path")
.datum(selectedCell)
.attr("fill", "#333")
.attr("opacity", 0.8)
.attr("d", svgPath);
}
return node;
}