57 lines
2.2 KiB
HTML
57 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@5.6.1/dist/maplibre-gl.css" />
|
|
<style>html,body,#map{margin:0;height:100%;width:100%}</style>
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
<pre id="log" style="position:fixed;left:8px;bottom:8px;z-index:5;background:#000c;color:#0f0;max-height:40%;overflow:auto;padding:8px;font:12px monospace;"></pre>
|
|
<script src="https://unpkg.com/maplibre-gl@5.6.1/dist/maplibre-gl.js"></script>
|
|
<script>
|
|
const logEl = document.getElementById("log");
|
|
const log = (m) => { logEl.textContent += m + "\n"; console.log(m); };
|
|
const mode = new URLSearchParams(location.search).get("mode") || "plain";
|
|
(async () => {
|
|
const style = await (await fetch("https://tile-server.ru/api/v1/styles/osm-bright?source=central-fed-district")).json();
|
|
log("mode=" + mode + " maxzoom=" + style.sources.openmaptiles.maxzoom);
|
|
log("tiles=" + style.sources.openmaptiles.tiles);
|
|
if (mode === "noglyphs") {
|
|
delete style.glyphs;
|
|
style.layers = style.layers.filter((l) => l.type !== "symbol");
|
|
}
|
|
if (mode === "wateronly") {
|
|
delete style.glyphs;
|
|
style.layers = [
|
|
{ id: "background", type: "background", paint: { "background-color": "#f4f1ea" } },
|
|
{ id: "water", type: "fill", source: "openmaptiles", "source-layer": "water", paint: { "fill-color": "#0077be" } }
|
|
];
|
|
}
|
|
const opts = {
|
|
container: "map",
|
|
style,
|
|
center: [37.6173, 55.7558],
|
|
zoom: Number(new URLSearchParams(location.search).get("z") || 14),
|
|
maxZoom: 18
|
|
};
|
|
if (mode === "transform") {
|
|
opts.transformRequest = (url) => ({ url: new URL(url, window.location.origin).href });
|
|
}
|
|
const map = new maplibregl.Map(opts);
|
|
window.map = map;
|
|
map.on("error", (e) => log("ERR " + (e.error && e.error.message)));
|
|
map.on("sourcedata", (e) => {
|
|
if (e.isSourceLoaded) log("source loaded " + e.sourceId);
|
|
});
|
|
map.on("idle", () => {
|
|
const feats = map.queryRenderedFeatures();
|
|
const by = {};
|
|
for (const f of feats) by[f.layer.id] = (by[f.layer.id] || 0) + 1;
|
|
log("idle z=" + map.getZoom().toFixed(2) + " features=" + feats.length + " " + JSON.stringify(by));
|
|
});
|
|
})().catch((e) => log(String(e)));
|
|
</script>
|
|
</body>
|
|
</html>
|