easy-osm2city-podman/managment/www/map.js
2023-10-25 12:47:56 +00:00

166 lines
3.6 KiB
JavaScript

/**
* Set up the download map for FlightGear Canada/US scenery.
*
* Uses Leaflet.
*/
// feature group to hold the scenery-bucket rectangles
var top_layer = L.featureGroup();
var second_layer = L.featureGroup();
/**
* Create interactive map.
*/
function setup_map (config) {
/**
* Parse a bucket name to get the lat/lon
*/
function parse_bucket_name(name) {
let lon = parseInt(name.substr(1, 3));
let lat = parseInt(name.substr(5, 2));
if (name.substr(0, 1).toLowerCase() == 'w') {
lon *= -1;
}
if (name.substr(4, 1).toLowerCase() == 's') {
lat *= -1;
}
return [lat, lon];
}
/**
* Start a download in the user's browser
*/
function download(tile) {
var a = document.getElementById("progressinfo");
a.setAttribute("src", "progressinfo.php?minor=" + tile);
}
function norm(num, length) {
var ret = String(Math.abs(num));
while (ret.length < length)
{
ret = '0' + ret;
}
return ret;
}
// the Leaflet map object
let map = L.map('map').setView([0, 0], 1);
// add OpenStreetMap tiles
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 15,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
// Create a rectangle for each bucket
for (const [bucket_name, color] of Object.entries(config.topLevel)) {
const [lat, lon] = parse_bucket_name(bucket_name);
const bounds = [[lat, lon], [lat+10, lon+10]];
const style = { color: color, weight: 1};
const rect = L.rectangle(bounds, style);
// add the bucket name to the rect
rect.bucket_name = bucket_name;
// show the bucket name on mouseover
rect.bindTooltip(bucket_name);
// add to the bucket group (for now, skip unavailable buckets)
top_layer.addLayer(rect);
}
function showLayers() {
if (map.getZoom() <= 4) {
if (!map.hasLayer(top_layer)) map.addLayer(top_layer);
if (map.hasLayer(second_layer)) map.removeLayer(second_layer);
}
else if (map.getZoom() > 4) {
if (!map.hasLayer(second_layer)) map.addLayer(second_layer);
if (map.hasLayer(top_layer)) map.removeLayer(top_layer);
}
}
function updateSecondLayer() {
if (map.getZoom() > 4) {
second_layer.clearLayers();
bounds = map.getBounds();
i = Math.floor(bounds.getWest());
iMax = Math.ceil(bounds.getEast());
while (i < iMax)
{
j = Math.floor(bounds.getSouth());
jMax = Math.ceil(bounds.getNorth())
while (j < jMax)
{
if (j < 0)
{
var sn = "s";
}
else
{
var sn = "n";
}
if (i < 0)
{
var we = "w";
}
else
{
var we = "e";
}
const bucket_name = we + norm(i, 3) + sn + norm(j, 2);
const bounds = [[j, i], [j+1, i+1]];
const style = { color: config.secondLevel[bucket_name], weight: 1};
const rect = L.rectangle(bounds, style);
// add the bucket name to the rect
rect.bucket_name = bucket_name;
// show the bucket name on mouseover
rect.bindTooltip(bucket_name);
// Download when the user clicks on an area
rect.on('click', (e) => {
console.log(bucket_name);
download(bucket_name);
})
// add to the bucket group (for now, skip unavailable buckets)
second_layer.addLayer(rect);
j++;
}
i++;
}
}
}
map.on('zoomend', function(evt) {
showLayers();
updateSecondLayer();
});
map.on('moveend', function(evt) {
updateSecondLayer();
});
// add the bucket group to the map
map.addLayer(top_layer);
}
//
// Start here
//
window.onload = async function () {
// download the config file
response = await fetch('download-links.php');
config = await response.json();
// draw the map
setup_map(config);
};