Covid19Map = {
let map;
let container;
if (shouldInitMap()() || x === 0) {
container = DOM.element('div', { style: `width:${width}px;height:${width/2}px` });
yield container;
map = L.map(container, {}).setView([30, 0], 2.3);
map.options.minZoom = 0.5;
map.options.maxZoom = 3;
let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
cacheMap.reset();
cacheContainer.reset();
cacheMap.cache(map);
cacheContainer.cache(container);
} else {
map = cacheMap.cache();
container = cacheContainer.cache();
yield container;
}
L.svg().addTo(map)
const overlay = d3.select(map.getPanes().overlayPane)
const svg = overlay.select('svg')
const g = svg.append('g').attr('class', 'leaflet-zoom-hide')
const projectPoint = function(x, y) {
const point = map.latLngToLayerPoint(new L.LatLng(y, x))
this.stream.point(point.x, point.y)
}
const scale = d3.scaleSqrt().domain([0, 100000]).range([2, sigmoid(map.getZoom()) * 15]);
const color = d3.scaleSqrt().domain([0, 50000, 100000]).range(["#efa315", "#ef7115", "#ef3415"])
const projection = d3.geoTransform({point: projectPoint})
const pathCreator = d3.geoPath().projection(projection).pointRadius(
function(d) {
if (d.properties.size != 0) {
return scale(d.properties.size);
}
return 0;
}
)
const areaPaths = g.selectAll('path')
.data(finalData.transformed)
.enter()
.append('path')
.attr("fill", function(d) { return color(d.properties.size) })
.attr('r', 110);
const onZoom = () => areaPaths.attr('d', pathCreator)
onZoom()
map.on('zoomend', onZoom)
}