mapCanvas = (d3projection, map, centerX, centerY, scaleFactor=5, width=800, height=800, fillOne='#a2d2ff', fillTwo='#cdb4db') => {
const projection = d3projection
.center([centerX, centerY])
.translate([width/2, height/2])
.scale(width * scaleFactor)
const path = d3.geoPath()
.projection(projection)
const mapData = map.features.map((d, i) => ({
d: path(d),
centroid: path.centroid(d),
fill: i%5 === 0 ? fillOne : fillTwo
}))
const drawMap = (ctx) => {
ctx.fillStyle = '#ffffff'
for (const { d, fill } of mapData) {
const p = new Path2D(d)
ctx.fillStyle = fill
ctx.strokeStyle = '#fff'
ctx.lineWidth = 1
ctx.stroke(p)
ctx.fill(p)
}
}
const drawCentroids = (ctx) => {
for (const { centroid } of mapData) {
ctx.fillStyle = '#fff'
ctx.beginPath();
ctx.arc(centroid[0], centroid[1], 2, 0, 2 * Math.PI);
ctx.fill();
}
}
const ctx = DOM.context2d(width, height)
const scale = Math.max(2, window.devicePixelRatio)
ctx.canvas.style.width = `${width}px`
ctx.canvas.style.height = `${height}px`
ctx.canvas.width = width * scale
ctx.canvas.height = height * scale
ctx.scale(scale, scale)
drawMap(ctx)
return ctx.canvas;
}