chart = {
const context = DOM.context2d(width, height);
const canvas = context.canvas;
const path = d3.geoPath(projection, context);
let locations = [];
const mapPixelsToLocations = new Map();
let selection;
let api;
context.canvas.addEventListener(
"click",
({ pointerId, clientX, clientY, pressure }) => {
canvas.value = [clientX, clientY];
canvas.dispatchEvent(new CustomEvent("input"));
}
);
function drawLocations() {
for (const c of locations) {
const position = projection(c);
const [x, y] = position;
mapPixelsToLocations.set(`${x}_${y}`, c);
context.strokeStyle = "tomato";
context.beginPath();
context.arc(x, y, 5, 0, 2 * Math.PI);
context.fillStyle = "tomato";
context.fill();
}
}
function render(land) {
context.clearRect(0, 0, width, height);
context.beginPath(),
path(sphere),
(context.fillStyle = "white"),
context.fill();
context.beginPath(),
path(land),
(context.strokeStyle = "black"),
context.stroke(),
(context.fillStyle = "aliceBlue"),
context.fill();
context.save();
drawLocations(locations);
context.restore();
}
function setLocations(locs) {
locations = locs;
return api;
}
function run() {
selection = d3
.select(context.canvas)
.call(
zoom(projection)
.on("zoom.render", () => render(countries))
.on("end.render", () => render(countries))
)
.call(() => render(countries));
return api;
}
run();
api = Object.assign(selection, {
setLocations,
run,
canvas,
mapPixelsToLocations
});
return api;
}