map = {
const ctx = this ? this.getContext("2d") : DOM.context2d(width, width);
const render = function() {
const path = d3.geoPath(projection, ctx);
const rotate = projection.rotate();
const backpath = d3.geoPath(
backprojection.rotate([rotate[0] + 180, -rotate[1], -rotate[2]]),
ctx
);
ctx.clearRect(0, 0, width, width);
ctx.beginPath(),
path({ type: "Sphere" }),
(ctx.fillStyle = '#fcfcfc'),
ctx.fill();
ctx.beginPath(), backpath(land), (ctx.fillStyle = backColor), ctx.fill();
ctx.beginPath(),
backpath(d3.geoGraticule()()),
(ctx.lineWidth = .1),
(ctx.strokeStyle = '#97b3f6'),
ctx.stroke();
ctx.beginPath(),
path(d3.geoGraticule()()),
(ctx.lineWidth = .1),
(ctx.strokeStyle = '#1046c6'),
ctx.stroke();
ctx.beginPath(),
path(land),
(ctx.fillStyle = frontColor),
ctx.fill(),
(ctx.globalAlpha = 0.9),
(ctx.lineWidth = 0.5),
(ctx.strokeStyle = backColor),
ctx.stroke(),
(ctx.globalAlpha = 1);
countries.forEach(country => {
if (country.clicked) {
ctx.beginPath(), path(country), (ctx.fillStyle = "#f2918a"), ctx.fill();
}
});
ctx.beginPath(),
path(coords),
(ctx.lineWidth = 0.5),
(ctx.strokeStyle = "#000"),
ctx.stroke(),
(ctx.fillStyle = "red"),
ctx.fill();
ctx.beginPath(),
path({ type: "Sphere" }),
(ctx.lineWidth = .1),
(ctx.strokeStyle = frontColor),
ctx.stroke();
};
function clickCountry() {
const xy = d3.mouse(ctx.canvas);
countries.forEach(country => {
d3.geoContains(country.geometry, projection.invert(xy))
? (country.clicked = true)
: (country.clicked = false);
});
render(world);
}
ctx.canvas.inertia = d3.geoInertiaDrag(
d3.select(ctx.canvas).on("click", () => clickCountry()),
null,
projection
);
const timer = d3.timer(function() {
var rotate = projection.rotate();
rotate[0] += velocity * 20;
projection.rotate(rotate);
render();
});
invalidation.then(
() => (
timer.stop(), (timer = null), d3.select(ctx.canvas).on(".drag", null)
)
);
return ctx.canvas;
}