{
await visibility();
let container = DOM.element("div", {
style: `width:${width}px;height:${width / 2}px`
});
yield container;
const map = L.map(container, {
renderer: L.canvas()
});
tileProviders(selectedTile).addTo(map);
let geojsonlayer = L.geoJson(gpxToGeoJson(tracksUploaded), {
style: function (feature) {
return {
color: trackColor,
weight: 5
};
},
onEachFeature: function (feature, layer) {
let endIcon = L.icon({
iconUrl: end_icon,
iconSize: [50, 50]
});
let startIcon = L.icon({
iconUrl: start_icon,
iconSize: [50, 50]
});
let firstPoint = feature.geometry.coordinates[0];
let lastPoint =
feature.geometry.coordinates[feature.geometry.coordinates.length - 1];
L.marker([firstPoint[1], firstPoint[0]], { icon: startIcon }).addTo(map);
L.marker([lastPoint[1], lastPoint[0]], { icon: endIcon }).addTo(map);
}
});
geojsonlayer.addTo(map);
const padding = [paddingLeft, paddingTop];
map.fitBounds(geojsonlayer.getBounds(), { padding: padding });
map.zoomOut(1);
let legend = L.control({ position: "bottomleft" });
legend.onAdd = function (map) {
let div = L.DomUtil.create("div", "legend");
div.appendChild(graph);
return div;
};
legend.addTo(map);
invalidation.then(() => {
map.remove();
});
}