map = {
const K = 800;
const container = html`<div style="height:${K}px;">`;
container.correct = 0;
yield container;
function toMapUnit(x) {
return (x / 16384) * K;
}
const map = L.map(container, {
crs: L.CRS.Simple,
minZoom: 0,
zoomControl: false,
scrollWheelZoom: false
});
var bounds = [
[0, 0],
[K, K]
];
var mapimg = maps.sp;
var image = L.imageOverlay(mapimg, bounds).addTo(map);
map.fitBounds(bounds);
function addCircleFromClick(lat, lng) {
var circle = L.circle([lng, lat], {
color: "#FCE77D",
fillColor: "#FCE77D",
fillOpacity: 0,
weight: 2,
radius: toMapUnit(321)
}).addTo(map);
}
function addCircle(record) {
var c = record.center;
var circle = L.circle([toMapUnit(c.y), toMapUnit(c.x)], {
color: "#F96167",
fillColor: "#F96167",
fillOpacity: 0,
weight: 2,
radius: toMapUnit(record.radius)
}).addTo(map);
}
function onMapClick(e) {
if (selectingRing1) {
addCircleFromClick(e.latlng.lng, e.latlng.lat);
mutable selectingRing1 = !mutable selectingRing1;
}
}
map.on("click", onMapClick);
}