166 lines
3.6 KiB
JavaScript
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: '© <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);
|
|
};
|