map22 = {
const canvas = DOM.canvas(width, width / 2),
context = canvas.getContext("2d"),
path = d3.geoPath(projection).context(context);
var C = d3
.geoCircle()
.center([11.0001, 0])
.radius(0.43382752)();
var a = C.coordinates[0],
b = a.slice().reverse();
var centroida = d3.geoCentroid(C);
C.coordinates[0] = b;
var centroidb = d3.geoCentroid(C);
context.beginPath(),
path(C),
(context.fillStyle = "lightblue"),
context.fill();
context.stroke();
context.beginPath(),
path({ type: "Point", coordinates: centroida }),
(context.fillStyle = "blue"),
context.fill();
context.beginPath(),
path({ type: "Point", coordinates: centroidb }),
(context.strokeStyle = "orange"),
(context.lineWidth = "3"),
context.stroke();
context.beginPath(),
path(d3.geoGraticule()()),
(context.strokeStyle = "#aaa"),
(context.lineWidth = "1"),
context.stroke();
return canvas;
}