rene
11922c1d22
Eigenständiges Modul: per-Kategorie GeoJSON-Cluster, rasterisierte Phosphor-Icons, Danger-Polygone, Sichtbarkeit, Click→Popup. /maplibre-markers-test zum headless-Verifizieren VOR dem Einbau in map.js (auth-gated).
64 lines
3.1 KiB
JavaScript
64 lines
3.1 KiB
JavaScript
// Headless-Proof für map-gl-markers.js: 4 Kategorien, ~490 Fake-Marker, Cluster,
|
|
// Phosphor-Icons, Danger-Radien, Sichtbarkeits-Toggle, Popups — alles ohne App/Auth.
|
|
(function () {
|
|
'use strict';
|
|
var st = document.getElementById('status');
|
|
function set(t) { if (st) st.textContent = t; }
|
|
|
|
var TYPES = {
|
|
restaurant: { color: '#F97316', iconName: 'fork-knife' },
|
|
freilauf: { color: '#22C55E', iconName: 'dog' },
|
|
tierarzt: { color: '#EF4444', iconName: 'first-aid' },
|
|
poison: { color: '#DC2626', iconName: 'skull', danger: true },
|
|
};
|
|
var COUNTS = { restaurant: 250, freilauf: 150, tierarzt: 80, poison: 8 };
|
|
|
|
function genPois(n, seedStart) {
|
|
var feats = [], seed = seedStart;
|
|
function rnd() { seed = (seed * 9301 + 49297) % 233280; return seed / 233280; }
|
|
for (var i = 0; i < n; i++) {
|
|
feats.push({ lat: 48.03 + rnd() * 0.24, lon: 11.40 + rnd() * 0.36, name: 'POI ' + i, source: 'osm' });
|
|
}
|
|
return feats;
|
|
}
|
|
|
|
try {
|
|
var proto = new pmtiles.Protocol();
|
|
maplibregl.addProtocol('pmtiles', proto.tile);
|
|
var map = new maplibregl.Map({
|
|
container: 'map', style: MapGLStyle.build({ dark: false }),
|
|
center: [11.576, 48.137], zoom: 12, dragRotate: false,
|
|
});
|
|
map.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-left');
|
|
map.addControl(new maplibregl.ScaleControl());
|
|
|
|
map.on('error', function (e) { set('⚠️ ' + (e && e.error ? e.error.message : 'Fehler')); if (e && e.error) console.error(e.error); });
|
|
|
|
map.on('load', function () {
|
|
MapGLMarkers.init(map, {
|
|
types: TYPES, dangerKeys: ['poison'], dangerRadiusM: 100,
|
|
popupHTML: function (p, key) { return '<b>' + (p.name || key) + '</b><br><small>' + key + '</small><br><button id="mp-x">OK</button>'; },
|
|
popupWire: function (p, key, close) { document.getElementById('mp-x') && document.getElementById('mp-x').addEventListener('click', close); },
|
|
}).then(function () {
|
|
var seeds = { restaurant: 11, freilauf: 77, tierarzt: 123, poison: 200 };
|
|
Object.keys(TYPES).forEach(function (k) { MapGLMarkers.setLayer(k, genPois(COUNTS[k], seeds[k])); });
|
|
// Toggle-Buttons
|
|
var box = document.getElementById('toggles');
|
|
Object.keys(TYPES).forEach(function (k) {
|
|
var b = document.createElement('button'); b.textContent = k; b.dataset.on = '1';
|
|
b.style.borderColor = TYPES[k].color;
|
|
b.addEventListener('click', function () {
|
|
var on = b.dataset.on === '1' ? false : true;
|
|
b.dataset.on = on ? '1' : '0'; b.classList.toggle('off', !on);
|
|
MapGLMarkers.setVisible(k, on);
|
|
});
|
|
box.appendChild(b);
|
|
});
|
|
var total = COUNTS.restaurant + COUNTS.freilauf + COUNTS.tierarzt + COUNTS.poison;
|
|
set('✅ ' + total + ' Marker (4 Kat.) — Cluster + Phosphor-Icons + Danger-Radius + Toggle + Popup');
|
|
}).catch(function (e) { set('❌ init: ' + (e && e.message ? e.message : e)); console.error(e); });
|
|
});
|
|
} catch (e) {
|
|
set('❌ ' + (e && e.message ? e.message : e));
|
|
}
|
|
})();
|