101 lines
2.7 KiB
JavaScript
101 lines
2.7 KiB
JavaScript
const json_files = [
|
|
"tileconfig/osm.json",
|
|
"tileconfig/mapycom.json",
|
|
"tileconfig/praha.json"
|
|
];
|
|
|
|
const center = [50.08804, 14.42076];
|
|
const zoom = 14;
|
|
|
|
let syncing = false;
|
|
|
|
let TILE_SERVERS = [];
|
|
|
|
function fillDropdown(select) {
|
|
for (const name in TILE_SERVERS) {
|
|
const opt = document.createElement("option");
|
|
opt.value = name;
|
|
opt.textContent = name;
|
|
select.appendChild(opt);
|
|
}
|
|
}
|
|
|
|
function sync(source, target) {
|
|
if (syncing) return;
|
|
syncing = true;
|
|
target.setView(source.getCenter(), source.getZoom(), { animate: false });
|
|
syncing = false;
|
|
}
|
|
|
|
function setLayer(map, config, currentLayer) {
|
|
if (currentLayer) map.removeLayer(currentLayer);
|
|
|
|
if (config.type === "xyz") {
|
|
return L.tileLayer(config.url, {
|
|
maxZoom: 19,
|
|
tileSize: 256,
|
|
referrerPolicy: "strict-origin-when-cross-origin"
|
|
}).addTo(map);
|
|
}
|
|
|
|
if (config.type === "wms") {
|
|
return L.tileLayer.wms(config.url, {
|
|
layers: config.layers,
|
|
format: config.format || "image/png",
|
|
transparent: config.transparent ?? true,
|
|
version: config.version || "1.3.0",
|
|
attribution: config.attribution || "",
|
|
referrerPolicy: "strict-origin-when-cross-origin"
|
|
}).addTo(map);
|
|
}
|
|
}
|
|
|
|
function init() {
|
|
fillDropdown(document.getElementById("select1"));
|
|
fillDropdown(document.getElementById("select2"));
|
|
|
|
// Create maps
|
|
const map1 = L.map("map1", { center, zoom, zoomControl: false });
|
|
const map2 = L.map("map2", { center, zoom, zoomControl: false });
|
|
|
|
map1.on("move", () => sync(map1, map2));
|
|
map2.on("move", () => sync(map2, map1));
|
|
|
|
map1.on("zoom", () => sync(map1, map2));
|
|
map2.on("zoom", () => sync(map2, map1));
|
|
|
|
L.control.zoom({ position: "topright" }).addTo(map1);
|
|
L.control.zoom({ position: "topright" }).addTo(map2);
|
|
|
|
// Active tile layers
|
|
let layer1 = null;
|
|
let layer2 = null;
|
|
|
|
// Initialize with first server
|
|
layer1 = setLayer(map1, TILE_SERVERS[document.getElementById("select1").value], layer1);
|
|
layer2 = setLayer(map2, TILE_SERVERS[document.getElementById("select2").value], layer2);
|
|
|
|
// Dropdown change handlers
|
|
document.getElementById("select1").addEventListener("change", e => {
|
|
const key = e.target.value;
|
|
layer1 = setLayer(map1, TILE_SERVERS[key], layer1);
|
|
});
|
|
|
|
document.getElementById("select2").addEventListener("change", e => {
|
|
const key = e.target.value;
|
|
layer2 = setLayer(map2, TILE_SERVERS[key], layer2);
|
|
});
|
|
}
|
|
|
|
async function loadTileConfigs(json_files) {
|
|
const results = await Promise.all(
|
|
json_files.map(f => fetch(f).then(r => r.json()))
|
|
);
|
|
|
|
// Merge all JSON objects into TILE_SERVERS
|
|
results.forEach(obj => Object.assign(TILE_SERVERS, obj));
|
|
}
|
|
|
|
loadTileConfigs(json_files).then(() => {
|
|
init();
|
|
});
|