{
const el = svg`
<svg width=${mapWidth} height=${mapHeight}>
<path d="${path({type: "Sphere"})}" fill="none" stroke="rgba(0,0,0,0.5)" stroke-width="0.5"></path>
<path d="${path(graticule)}" fill="none" stroke="rgba(0,0,0,0.2)" stroke-width="0.5"></path>
<path d="${path(landTopo)}" fill="rgba(0,200,50,0.6)"></path>
<path d="${path(countryBordersTopo)}" fill="none" stroke="#fff" stroke-width="0.5px"></path>
<path id="botswana" d="${path(newBotswanaTopo)}" fill="rgba(0,0,0,0.5)"></path>
${houstonCountryTopos.map((topo) => svg`<path d="${path(topo)}" fill="rgba(0,123,230,0.5)"></path>`)}
<!--
<path d="${path(mouseDot)}" fill="#F00"></path>
-->
</svg>
`;
el.addEventListener("mousemove", e => {
const x = e.layerX;
const y = e.layerY;
const [lon,lat] = projection.invert([x,y]);
mutable mouseCoord = {lon,lat};
});
const drag = d3.drag()
.on("start", () => {
})
.on("drag", () => {
const {x,y} = d3.event;
const [lat,lon] = projection.invert([x,y]);
console.log(x,y,lon,lat);
})
.on("end", () => {});
const botswana = el.querySelector("#botswana");
d3.select(botswana).call(drag);
return el;
}