Jürgen Mummert
1439 lines
48 KiB
JavaScript
1439 lines
48 KiB
JavaScript
import Spiderfy from './vendor/map-gl-js-spiderfy.js';
|
|
|
|
const MAP_SELECTOR = '[data-eventmanager-map="1"]';
|
|
const MAPLIBRE_CSS_URL = 'https://maps.mummert.media/libraries/maplibre-gl.css';
|
|
const MAPLIBRE_JS_URL = 'https://maps.mummert.media/libraries/maplibre-gl.js';
|
|
const PMTILES_JS_URL = 'https://maps.mummert.media/libraries/pmtiles.js';
|
|
const GLYPH_FONTSTACK = 'Noto Sans Regular';
|
|
const DEFAULT_CENTER = [13.404954, 52.520008];
|
|
const DEFAULT_ZOOM = 6;
|
|
const DEFAULT_EVENT_COLOR = '#BC5067';
|
|
const EVENT_FADE_DURATION_MS = 200;
|
|
const EVENT_CLUSTER_LAYER_ID = 'eventmanager-events-clusters';
|
|
const EVENT_UNCLUSTERED_LAYER_ID = 'eventmanager-events-unclustered';
|
|
const SATELLITE_SOURCE_ID = 'eventmanager-satellite-source';
|
|
const SATELLITE_LAYER_ID = 'eventmanager-satellite-layer';
|
|
const SATELLITE_TILE_URL = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}';
|
|
const SATELLITE_LABELS_SOURCE_ID = 'eventmanager-satellite-labels-source';
|
|
const SATELLITE_LABELS_LAYER_ID = 'eventmanager-satellite-labels-layer';
|
|
const SATELLITE_LABELS_TILE_URL = 'https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}';
|
|
const SATELLITE_ROADS_SOURCE_ID = 'eventmanager-satellite-roads-source';
|
|
const SATELLITE_ROADS_LAYER_ID = 'eventmanager-satellite-roads-layer';
|
|
const SATELLITE_ROADS_TILE_URL = 'https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer/tile/{z}/{y}/{x}';
|
|
const SATELLITE_ATTRIBUTION = '© Esri, Maxar';
|
|
const PROTOMAPS_SOURCE_ID = 'protomaps';
|
|
const DEFAULT_BASE_STYLE_URL = 'https://maps.mummert.media/metadaten/world-light.json';
|
|
const PROTOMAPS_PM_TILES_URL = 'pmtiles://https://maps.mummert.media/tiles/world.pmtiles';
|
|
const PROTOMAPS_ATTRIBUTION = '<a href="https://github.com/protomaps/basemaps">Protomaps</a> © <a href="https://openstreetmap.org">OpenStreetMap</a>';
|
|
const PROTOMAPS_GLYPHS_URL = 'https://maps.mummert.media/fonts/{fontstack}/{range}.pbf';
|
|
const PROTOMAPS_SPRITE_URL = 'https://maps.mummert.media/sprites/v4/light';
|
|
const PROTOMAPS_FLAVOR_URL = 'https://maps.mummert.media/metadaten/flavors/bio.json';
|
|
const PROTOMAPS_BASEMAPS_ESM_URLS = [
|
|
'https://cdn.jsdelivr.net/npm/@protomaps/basemaps@5/+esm',
|
|
'https://esm.sh/@protomaps/basemaps@5',
|
|
];
|
|
const PROTOMAPS_BASEMAPS_UMD_URL = 'https://unpkg.com/@protomaps/basemaps@5/dist/basemaps.js';
|
|
|
|
let dependenciesPromise = null;
|
|
let basemapsApiPromise = null;
|
|
const protomapsStylePromises = new Map();
|
|
|
|
const getBasemapsApi = async () => {
|
|
if (basemapsApiPromise) {
|
|
return basemapsApiPromise;
|
|
}
|
|
|
|
basemapsApiPromise = (async () => {
|
|
for (const url of PROTOMAPS_BASEMAPS_ESM_URLS) {
|
|
try {
|
|
const module = await import(url);
|
|
const moduleApi = module && 'object' === typeof module
|
|
? (module.layers ? module : (module.default && module.default.layers ? module.default : null))
|
|
: null;
|
|
|
|
if (moduleApi && 'function' === typeof moduleApi.layers) {
|
|
return moduleApi;
|
|
}
|
|
} catch (error) {
|
|
continue;
|
|
}
|
|
}
|
|
|
|
await loadScript(PROTOMAPS_BASEMAPS_UMD_URL);
|
|
|
|
if (window.basemaps && 'function' === typeof window.basemaps.layers) {
|
|
return window.basemaps;
|
|
}
|
|
|
|
throw new Error('Failed to load Protomaps basemaps API');
|
|
})();
|
|
|
|
basemapsApiPromise = basemapsApiPromise.catch((error) => {
|
|
basemapsApiPromise = null;
|
|
throw error;
|
|
});
|
|
|
|
return basemapsApiPromise;
|
|
};
|
|
|
|
const ensureStylesheet = (href) => {
|
|
if (!href) {
|
|
return;
|
|
}
|
|
|
|
const existing = document.querySelector(`link[rel="stylesheet"][href="${href}"]`);
|
|
|
|
if (existing) {
|
|
return;
|
|
}
|
|
|
|
const link = document.createElement('link');
|
|
link.rel = 'stylesheet';
|
|
link.href = href;
|
|
document.head.appendChild(link);
|
|
};
|
|
|
|
const loadScript = (src) => new Promise((resolve, reject) => {
|
|
if (!src) {
|
|
resolve();
|
|
|
|
return;
|
|
}
|
|
|
|
const existing = document.querySelector(`script[src="${src}"]`);
|
|
|
|
if (existing) {
|
|
if (existing.dataset.loaded === '1') {
|
|
resolve();
|
|
|
|
return;
|
|
}
|
|
|
|
existing.addEventListener('load', () => resolve(), { once: true });
|
|
existing.addEventListener('error', () => reject(new Error(`Failed to load script: ${src}`)), { once: true });
|
|
|
|
return;
|
|
}
|
|
|
|
const script = document.createElement('script');
|
|
script.src = src;
|
|
script.async = true;
|
|
script.addEventListener('load', () => {
|
|
script.dataset.loaded = '1';
|
|
resolve();
|
|
}, { once: true });
|
|
script.addEventListener('error', () => reject(new Error(`Failed to load script: ${src}`)), { once: true });
|
|
document.head.appendChild(script);
|
|
});
|
|
|
|
const ensureDependencies = async () => {
|
|
if (dependenciesPromise) {
|
|
return dependenciesPromise;
|
|
}
|
|
|
|
dependenciesPromise = (async () => {
|
|
ensureStylesheet(MAPLIBRE_CSS_URL);
|
|
|
|
if (typeof maplibregl === 'undefined') {
|
|
await loadScript(MAPLIBRE_JS_URL);
|
|
}
|
|
|
|
if (typeof pmtiles === 'undefined') {
|
|
await loadScript(PMTILES_JS_URL);
|
|
}
|
|
})();
|
|
|
|
return dependenciesPromise;
|
|
};
|
|
|
|
const getProtomapsStyle = async (baseStyleUrl = DEFAULT_BASE_STYLE_URL) => {
|
|
const normalizedBaseStyleUrl = String(baseStyleUrl || DEFAULT_BASE_STYLE_URL).trim() || DEFAULT_BASE_STYLE_URL;
|
|
|
|
if (protomapsStylePromises.has(normalizedBaseStyleUrl)) {
|
|
return protomapsStylePromises.get(normalizedBaseStyleUrl);
|
|
}
|
|
|
|
const stylePromise = (async () => {
|
|
const baseStyleResponse = await fetch(normalizedBaseStyleUrl, { credentials: 'omit' });
|
|
|
|
if (!baseStyleResponse.ok) {
|
|
throw new Error(`Failed to load base map style: ${baseStyleResponse.status}`);
|
|
}
|
|
|
|
const baseStyle = await baseStyleResponse.json();
|
|
const baseSources = baseStyle?.sources && 'object' === typeof baseStyle.sources
|
|
? baseStyle.sources
|
|
: {};
|
|
const protomapsSource = baseSources[PROTOMAPS_SOURCE_ID] && 'object' === typeof baseSources[PROTOMAPS_SOURCE_ID]
|
|
? baseSources[PROTOMAPS_SOURCE_ID]
|
|
: {
|
|
type: 'vector',
|
|
attribution: PROTOMAPS_ATTRIBUTION,
|
|
url: PROTOMAPS_PM_TILES_URL,
|
|
};
|
|
|
|
try {
|
|
const basemapsApi = await getBasemapsApi();
|
|
const flavorResponse = await fetch(PROTOMAPS_FLAVOR_URL, { credentials: 'omit' });
|
|
|
|
if (!flavorResponse.ok) {
|
|
throw new Error(`Failed to load Protomaps flavor: ${flavorResponse.status}`);
|
|
}
|
|
|
|
const flavor = await flavorResponse.json();
|
|
const generatedLayers = basemapsApi.layers(PROTOMAPS_SOURCE_ID, flavor, { lang: 'de' });
|
|
|
|
return {
|
|
...baseStyle,
|
|
version: 8,
|
|
glyphs: baseStyle?.glyphs || PROTOMAPS_GLYPHS_URL,
|
|
sprite: baseStyle?.sprite || PROTOMAPS_SPRITE_URL,
|
|
sources: {
|
|
...baseSources,
|
|
[PROTOMAPS_SOURCE_ID]: protomapsSource,
|
|
},
|
|
layers: generatedLayers,
|
|
};
|
|
} catch (error) {
|
|
return baseStyle;
|
|
}
|
|
})();
|
|
|
|
const cachedStylePromise = stylePromise.catch((error) => {
|
|
protomapsStylePromises.delete(normalizedBaseStyleUrl);
|
|
throw error;
|
|
});
|
|
|
|
protomapsStylePromises.set(normalizedBaseStyleUrl, cachedStylePromise);
|
|
|
|
return cachedStylePromise;
|
|
};
|
|
|
|
const rewriteGlyphUrl = (url) => {
|
|
if (!url) {
|
|
return url;
|
|
}
|
|
|
|
const match = url.match(/\/fonts\/[^/]+\/(\d+-\d+\.pbf)(\?.*)?$/);
|
|
|
|
if (!match) {
|
|
return url;
|
|
}
|
|
|
|
const range = match[1];
|
|
const query = match[2] || '';
|
|
const base = url.slice(0, match.index);
|
|
|
|
return `${base}/fonts/${encodeURIComponent(GLYPH_FONTSTACK)}/${range}${query}`;
|
|
};
|
|
|
|
const escapeHtml = (value) => {
|
|
const stringValue = String(value ?? '');
|
|
|
|
return stringValue
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/"/g, '"')
|
|
.replace(/'/g, ''');
|
|
};
|
|
|
|
const decodeHtmlEntities = (value) => {
|
|
const stringValue = String(value ?? '');
|
|
|
|
if ('undefined' === typeof document || !document.createElement) {
|
|
return stringValue;
|
|
}
|
|
|
|
const textarea = document.createElement('textarea');
|
|
textarea.innerHTML = stringValue;
|
|
|
|
return textarea.value;
|
|
};
|
|
|
|
const sanitizeDisplayText = (value) => escapeHtml(decodeHtmlEntities(value));
|
|
|
|
const parseItems = (container) => {
|
|
const dataElementId = container.dataset.mapDataId || '';
|
|
|
|
if (!dataElementId) {
|
|
return [];
|
|
}
|
|
|
|
const payload = document.getElementById(dataElementId);
|
|
|
|
if (!payload) {
|
|
return [];
|
|
}
|
|
|
|
try {
|
|
const parsed = JSON.parse(payload.textContent || '[]');
|
|
|
|
if (!Array.isArray(parsed)) {
|
|
return [];
|
|
}
|
|
|
|
const unique = new Map();
|
|
|
|
parsed.forEach((item) => {
|
|
if (!item || !['event', 'organisation'].includes(item.type)) {
|
|
return;
|
|
}
|
|
|
|
const id = Number(item.id || 0);
|
|
const latitude = Number(item.latitude);
|
|
const longitude = Number(item.longitude);
|
|
|
|
if (!Number.isFinite(id) || id <= 0 || !Number.isFinite(latitude) || !Number.isFinite(longitude)) {
|
|
return;
|
|
}
|
|
|
|
unique.set(`${item.type}:${id}`, {
|
|
type: item.type,
|
|
markerType: String(item.markerType || item.type || ''),
|
|
id,
|
|
title: String(item.title || ''),
|
|
latitude,
|
|
longitude,
|
|
extra: item.extra && typeof item.extra === 'object' ? item.extra : {},
|
|
});
|
|
});
|
|
|
|
return Array.from(unique.values());
|
|
} catch (error) {
|
|
return [];
|
|
}
|
|
};
|
|
|
|
const parseCoordinate = (value) => {
|
|
const normalized = String(value ?? '').trim().replace(',', '.');
|
|
const parsed = Number(normalized);
|
|
|
|
return Number.isFinite(parsed) ? parsed : null;
|
|
};
|
|
|
|
const normalizeHexColor = (value, fallback = DEFAULT_EVENT_COLOR) => {
|
|
const normalized = String(value || '').trim().toUpperCase();
|
|
|
|
if (/^#[0-9A-F]{6}$/.test(normalized)) {
|
|
return normalized;
|
|
}
|
|
|
|
if (/^[0-9A-F]{6}$/.test(normalized)) {
|
|
return `#${normalized}`;
|
|
}
|
|
|
|
if (/^#[0-9A-F]{3}$/.test(normalized)) {
|
|
return `#${normalized[1]}${normalized[1]}${normalized[2]}${normalized[2]}${normalized[3]}${normalized[3]}`;
|
|
}
|
|
|
|
if (/^[0-9A-F]{3}$/.test(normalized)) {
|
|
return `#${normalized[0]}${normalized[0]}${normalized[1]}${normalized[1]}${normalized[2]}${normalized[2]}`;
|
|
}
|
|
|
|
return fallback;
|
|
};
|
|
|
|
const applyDefaultProjection = (map) => {
|
|
if (!map || typeof map.setProjection !== 'function') {
|
|
return;
|
|
}
|
|
|
|
const hasGlobeProjection = () => {
|
|
if (typeof map.getProjection !== 'function') {
|
|
return false;
|
|
}
|
|
|
|
const projection = map.getProjection();
|
|
const projectionName = String(projection?.type || projection?.name || '').toLowerCase();
|
|
|
|
return 'globe' === projectionName;
|
|
};
|
|
|
|
let globeApplied = false;
|
|
|
|
try {
|
|
map.setProjection({ type: 'globe' });
|
|
globeApplied = hasGlobeProjection();
|
|
} catch (error) {
|
|
}
|
|
|
|
if (!globeApplied) {
|
|
try {
|
|
map.setProjection('globe');
|
|
globeApplied = hasGlobeProjection();
|
|
} catch (error) {
|
|
}
|
|
}
|
|
|
|
if (!globeApplied) {
|
|
return;
|
|
}
|
|
|
|
if (typeof map.setFog === 'function') {
|
|
try {
|
|
map.setFog({
|
|
color: 'rgb(186, 210, 235)',
|
|
'high-color': 'rgb(36, 92, 223)',
|
|
'horizon-blend': 0.08,
|
|
'space-color': 'rgb(11, 11, 25)',
|
|
'star-intensity': 0.2,
|
|
});
|
|
} catch (error) {
|
|
}
|
|
}
|
|
|
|
if (typeof map.setSky === 'function') {
|
|
try {
|
|
map.setSky({
|
|
'sky-color': '#87ceeb',
|
|
'horizon-color': '#ffffff',
|
|
'fog-color': '#dff6ff',
|
|
'fog-ground-blend': 0.2,
|
|
'sky-horizon-blend': 0.4,
|
|
});
|
|
} catch (error) {
|
|
}
|
|
}
|
|
};
|
|
|
|
const ensureSatelliteLayer = (map) => {
|
|
if (!map || map.getSource(SATELLITE_SOURCE_ID)) {
|
|
return;
|
|
}
|
|
|
|
map.addSource(SATELLITE_SOURCE_ID, {
|
|
type: 'raster',
|
|
tiles: [SATELLITE_TILE_URL],
|
|
tileSize: 256,
|
|
attribution: SATELLITE_ATTRIBUTION,
|
|
});
|
|
|
|
const markerLayerCandidates = [
|
|
EVENT_CLUSTER_LAYER_ID,
|
|
EVENT_UNCLUSTERED_LAYER_ID,
|
|
];
|
|
const beforeId = markerLayerCandidates.find((layerId) => map.getLayer(layerId));
|
|
|
|
map.addLayer({
|
|
id: SATELLITE_LAYER_ID,
|
|
type: 'raster',
|
|
source: SATELLITE_SOURCE_ID,
|
|
layout: {
|
|
visibility: 'none',
|
|
},
|
|
paint: {
|
|
'raster-opacity': 1,
|
|
'raster-brightness-min': 0,
|
|
'raster-brightness-max': 1,
|
|
'raster-contrast': 0,
|
|
'raster-saturation': 0,
|
|
},
|
|
}, beforeId);
|
|
|
|
map.addSource(SATELLITE_ROADS_SOURCE_ID, {
|
|
type: 'raster',
|
|
tiles: [SATELLITE_ROADS_TILE_URL],
|
|
tileSize: 256,
|
|
attribution: SATELLITE_ATTRIBUTION,
|
|
});
|
|
|
|
map.addLayer({
|
|
id: SATELLITE_ROADS_LAYER_ID,
|
|
type: 'raster',
|
|
source: SATELLITE_ROADS_SOURCE_ID,
|
|
layout: {
|
|
visibility: 'none',
|
|
},
|
|
paint: {
|
|
'raster-opacity': 1,
|
|
},
|
|
}, beforeId);
|
|
|
|
map.addSource(SATELLITE_LABELS_SOURCE_ID, {
|
|
type: 'raster',
|
|
tiles: [SATELLITE_LABELS_TILE_URL],
|
|
tileSize: 256,
|
|
attribution: SATELLITE_ATTRIBUTION,
|
|
});
|
|
|
|
map.addLayer({
|
|
id: SATELLITE_LABELS_LAYER_ID,
|
|
type: 'raster',
|
|
source: SATELLITE_LABELS_SOURCE_ID,
|
|
layout: {
|
|
visibility: 'none',
|
|
},
|
|
paint: {
|
|
'raster-opacity': 1,
|
|
},
|
|
}, beforeId);
|
|
};
|
|
|
|
const setSatelliteMode = (map, enabled) => {
|
|
if (!map) {
|
|
return;
|
|
}
|
|
|
|
ensureSatelliteLayer(map);
|
|
|
|
if (!map.getLayer(SATELLITE_LAYER_ID)) {
|
|
return;
|
|
}
|
|
|
|
const hybridOverlayLayerIds = [SATELLITE_ROADS_LAYER_ID, SATELLITE_LABELS_LAYER_ID];
|
|
|
|
map.setLayoutProperty(SATELLITE_LAYER_ID, 'visibility', enabled ? 'visible' : 'none');
|
|
hybridOverlayLayerIds.forEach((layerId) => {
|
|
if (map.getLayer(layerId)) {
|
|
map.setLayoutProperty(layerId, 'visibility', enabled ? 'visible' : 'none');
|
|
map.setPaintProperty(layerId, 'raster-opacity-transition', { duration: EVENT_FADE_DURATION_MS, delay: 0 });
|
|
map.setPaintProperty(layerId, 'raster-opacity', enabled ? 1 : 0);
|
|
}
|
|
});
|
|
map.setPaintProperty(SATELLITE_LAYER_ID, 'raster-opacity-transition', { duration: EVENT_FADE_DURATION_MS, delay: 0 });
|
|
map.setPaintProperty(SATELLITE_LAYER_ID, 'raster-brightness-min-transition', { duration: EVENT_FADE_DURATION_MS, delay: 0 });
|
|
map.setPaintProperty(SATELLITE_LAYER_ID, 'raster-brightness-max-transition', { duration: EVENT_FADE_DURATION_MS, delay: 0 });
|
|
map.setPaintProperty(SATELLITE_LAYER_ID, 'raster-contrast-transition', { duration: EVENT_FADE_DURATION_MS, delay: 0 });
|
|
map.setPaintProperty(SATELLITE_LAYER_ID, 'raster-saturation-transition', { duration: EVENT_FADE_DURATION_MS, delay: 0 });
|
|
|
|
if (!enabled) {
|
|
return;
|
|
}
|
|
|
|
map.setPaintProperty(SATELLITE_LAYER_ID, 'raster-brightness-min', 0);
|
|
map.setPaintProperty(SATELLITE_LAYER_ID, 'raster-brightness-max', 1);
|
|
map.setPaintProperty(SATELLITE_LAYER_ID, 'raster-contrast', 0);
|
|
map.setPaintProperty(SATELLITE_LAYER_ID, 'raster-saturation', 0);
|
|
};
|
|
|
|
const normalizeTagIds = (value) => {
|
|
if (!Array.isArray(value)) {
|
|
return [];
|
|
}
|
|
|
|
const unique = new Set();
|
|
|
|
value.forEach((rawValue) => {
|
|
const normalized = String(rawValue ?? '').trim();
|
|
|
|
if (normalized !== '' && /^\d+$/.test(normalized)) {
|
|
unique.add(normalized);
|
|
}
|
|
});
|
|
|
|
return Array.from(unique.values());
|
|
};
|
|
|
|
const getMarkerImageId = (prefix, color) => `${prefix}-${String(color || '').replace('#', '').toLowerCase() || 'default'}`;
|
|
const SVG_MARKER_WIDTH = 68;
|
|
const SVG_MARKER_HEIGHT = 104;
|
|
|
|
const createPinSvgDataUrl = (color, options = {}) => {
|
|
const withInnerDot = options.withInnerDot !== false;
|
|
const innerDotMarkup = withInnerDot
|
|
? '<g transform="translate(8.0, 8.0)"><circle fill="#000000" opacity="0.25" cx="5.5" cy="5.5" r="5.4999962"></circle><circle fill="#FFFFFF" cx="5.5" cy="5.5" r="5.4999962"></circle></g>'
|
|
: '';
|
|
|
|
const svg = `<svg xmlns="http://www.w3.org/2000/svg" display="block" width="27" height="41" viewBox="0 0 27 41"><g fill-rule="nonzero"><g transform="translate(3.0, 29.0)" fill="#000000"><ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="10.5" ry="5.25002273"></ellipse><ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="10.5" ry="5.25002273"></ellipse><ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="9.5" ry="4.77275007"></ellipse><ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="8.5" ry="4.29549936"></ellipse><ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="7.5" ry="3.81822308"></ellipse><ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="6.5" ry="3.34094679"></ellipse><ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="5.5" ry="2.86367051"></ellipse><ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="4.5" ry="2.38636864"></ellipse></g><g fill="${color}"><path d="M27,13.5 C27,19.074644 20.250001,27.000002 14.75,34.500002 C14.016665,35.500004 12.983335,35.500004 12.25,34.500002 C6.7499993,27.000002 0,19.222562 0,13.5 C0,6.0441559 6.0441559,0 13.5,0 C20.955844,0 27,6.0441559 27,13.5 Z"></path></g><g opacity="0.25" fill="#000000"><path d="M13.5,0 C6.0441559,0 0,6.0441559 0,13.5 C0,19.222562 6.7499993,27 12.25,34.5 C13,35.522727 14.016664,35.500004 14.75,34.5 C20.250001,27 27,19.074644 27,13.5 C27,6.0441559 20.955844,0 13.5,0 Z M13.5,1 C20.415404,1 26,6.584596 26,13.5 C26,15.898657 24.495584,19.181431 22.220703,22.738281 C19.945823,26.295132 16.705119,30.142167 13.943359,33.908203 C13.743445,34.180814 13.612715,34.322738 13.5,34.441406 C13.387285,34.322738 13.256555,34.180814 13.056641,33.908203 C10.284481,30.127985 7.4148684,26.314159 5.015625,22.773438 C2.6163816,19.232715 1,15.953538 1,13.5 C1,6.584596 6.584596,1 13.5,1 Z"></path></g>${innerDotMarkup}</g></svg>`;
|
|
|
|
return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
|
|
};
|
|
|
|
const loadSvgImageData = (dataUrl) => new Promise((resolve, reject) => {
|
|
const image = new Image();
|
|
|
|
image.onload = () => {
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = SVG_MARKER_WIDTH;
|
|
canvas.height = SVG_MARKER_HEIGHT;
|
|
|
|
const context = canvas.getContext('2d');
|
|
|
|
if (!context) {
|
|
reject(new Error('Failed to get canvas context for SVG marker'));
|
|
|
|
return;
|
|
}
|
|
|
|
context.clearRect(0, 0, SVG_MARKER_WIDTH, SVG_MARKER_HEIGHT);
|
|
context.drawImage(image, 0, 0, SVG_MARKER_WIDTH, SVG_MARKER_HEIGHT);
|
|
resolve(context.getImageData(0, 0, SVG_MARKER_WIDTH, SVG_MARKER_HEIGHT));
|
|
};
|
|
|
|
image.onerror = () => reject(new Error('Failed to load SVG marker image'));
|
|
image.src = dataUrl;
|
|
});
|
|
|
|
const ensureMarkerImage = (map, color, prefix = 'eventmanager-marker', options = {}) => {
|
|
const imageId = getMarkerImageId(prefix, color);
|
|
|
|
if (map.hasImage(imageId)) {
|
|
return Promise.resolve(imageId);
|
|
}
|
|
|
|
const dataUrl = createPinSvgDataUrl(color, options);
|
|
|
|
return loadSvgImageData(dataUrl)
|
|
.then((imageData) => {
|
|
if (!map.hasImage(imageId)) {
|
|
map.addImage(imageId, imageData, { pixelRatio: 2 });
|
|
}
|
|
|
|
return imageId;
|
|
});
|
|
};
|
|
|
|
const popupHtmlFor = (item) => {
|
|
if (item.type === 'event') {
|
|
const title = sanitizeDisplayText(item.title || '');
|
|
const locationTitle = sanitizeDisplayText(item.extra.locationTitle || '');
|
|
const startDate = sanitizeDisplayText(item.extra.startDate || '');
|
|
const detailUrl = String(item.extra.detailUrl || '').trim();
|
|
const hasDetailUrl = /^(https?:\/\/|\/)/i.test(detailUrl);
|
|
const detailLink = hasDetailUrl
|
|
? `<div><a href="${escapeHtml(detailUrl)}">mehr Infos</a></div>`
|
|
: '';
|
|
|
|
return [
|
|
`<strong>${title}</strong>`,
|
|
locationTitle ? `<div>${locationTitle}</div>` : '',
|
|
startDate ? `<div>${startDate}</div>` : '',
|
|
detailLink,
|
|
].join('');
|
|
}
|
|
|
|
if (item.type === 'organisation') {
|
|
const title = sanitizeDisplayText(item.title || '');
|
|
const detailUrl = String(item.extra?.detailUrl || '').trim();
|
|
const hasDetailUrl = /^(https?:\/\/|\/)/i.test(detailUrl);
|
|
const detailLink = hasDetailUrl
|
|
? `<div><a href="${escapeHtml(detailUrl)}">mehr Infos</a></div>`
|
|
: '';
|
|
|
|
return [
|
|
`<strong>${title}</strong>`,
|
|
detailLink,
|
|
].join('');
|
|
}
|
|
|
|
return `<strong>${sanitizeDisplayText(item.title)}</strong>`;
|
|
};
|
|
|
|
const toFeature = (item) => ({
|
|
type: 'Feature',
|
|
geometry: {
|
|
type: 'Point',
|
|
coordinates: [item.longitude, item.latitude],
|
|
},
|
|
properties: {
|
|
id: item.id,
|
|
type: item.type,
|
|
markerType: item.markerType,
|
|
markerTagIds: Array.isArray(item.extra?.organizationTagIds) ? item.extra.organizationTagIds : [],
|
|
markerTagLabels: Array.isArray(item.extra?.organizationTagLabels) ? item.extra.organizationTagLabels : [],
|
|
title: item.title,
|
|
latitude: item.latitude,
|
|
popupHtml: popupHtmlFor(item),
|
|
},
|
|
});
|
|
|
|
const initOrganizationMarkers = (map, organizationItems, organizationColor, openPopup) => {
|
|
if (!organizationItems.length) {
|
|
return {
|
|
setOnlyTagId: () => {},
|
|
setAllVisible: () => {},
|
|
setVisible: () => {},
|
|
};
|
|
}
|
|
|
|
const sortedOrganizationItems = [...organizationItems].sort((firstItem, secondItem) => secondItem.latitude - firstItem.latitude);
|
|
|
|
const markerEntries = sortedOrganizationItems.map((item) => {
|
|
const popupHtml = popupHtmlFor(item);
|
|
const marker = new maplibregl.Marker(organizationColor ? { color: organizationColor } : undefined)
|
|
.setLngLat([item.longitude, item.latitude]);
|
|
|
|
marker.addTo(map);
|
|
|
|
const markerElement = marker.getElement();
|
|
|
|
if (markerElement) {
|
|
markerElement.style.zIndex = String(Math.round((90 - item.latitude) * 1000));
|
|
markerElement.style.cursor = 'pointer';
|
|
|
|
if (popupHtml && typeof openPopup === 'function') {
|
|
markerElement.addEventListener('click', (event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
openPopup([item.longitude, item.latitude], String(popupHtml));
|
|
});
|
|
}
|
|
}
|
|
|
|
return {
|
|
marker,
|
|
tagIds: normalizeTagIds(item.extra?.organizationTagIds),
|
|
};
|
|
});
|
|
|
|
return {
|
|
setOnlyTagId: (activeTagId) => {
|
|
const normalizedTagId = String(activeTagId ?? '').trim();
|
|
const hasActiveTag = /^\d+$/.test(normalizedTagId);
|
|
|
|
markerEntries.forEach((entry) => {
|
|
const markerElement = entry.marker.getElement();
|
|
|
|
if (!markerElement) {
|
|
return;
|
|
}
|
|
|
|
const hasTags = entry.tagIds.length > 0;
|
|
const isVisible = !hasActiveTag
|
|
|| !hasTags
|
|
|| entry.tagIds.includes(normalizedTagId);
|
|
|
|
markerElement.style.display = isVisible ? '' : 'none';
|
|
});
|
|
},
|
|
setAllVisible: () => {
|
|
markerEntries.forEach((entry) => {
|
|
const markerElement = entry.marker.getElement();
|
|
|
|
if (!markerElement) {
|
|
return;
|
|
}
|
|
|
|
markerElement.style.display = '';
|
|
});
|
|
},
|
|
setVisible: (isVisible) => {
|
|
markerEntries.forEach((entry) => {
|
|
const markerElement = entry.marker.getElement();
|
|
|
|
if (!markerElement) {
|
|
return;
|
|
}
|
|
|
|
markerElement.style.display = isVisible ? '' : 'none';
|
|
});
|
|
},
|
|
};
|
|
};
|
|
|
|
const bindExternalTagFilters = (container, map, organizationMarkerManager, eventLayerManager, closePopup) => {
|
|
const wrapperId = container.dataset.mapFilterWrapperId || '';
|
|
|
|
if (!wrapperId || !organizationMarkerManager) {
|
|
return;
|
|
}
|
|
|
|
const wrapper = document.getElementById(wrapperId);
|
|
|
|
if (!wrapper) {
|
|
return;
|
|
}
|
|
|
|
const tagButtons = Array.from(wrapper.querySelectorAll('[data-map-tag-filter]'));
|
|
const initialDisplayModeRaw = String(container.dataset.mapInitialDisplay || '').trim();
|
|
const initialTagIdRaw = String(container.dataset.mapInitialTagId || '').trim();
|
|
|
|
const setButtonState = (button, isActive) => {
|
|
button.setAttribute('aria-pressed', isActive ? 'true' : 'false');
|
|
button.classList.toggle('is-active', isActive);
|
|
};
|
|
|
|
const eventToggleButton = wrapper.querySelector('[data-map-event-toggle="1"]');
|
|
const canFilterByTag = tagButtons.length > 0;
|
|
const canFilterByEvents = !!eventToggleButton;
|
|
const canToggleEvents = !!(eventToggleButton && eventLayerManager);
|
|
|
|
const setEventButtonState = (isActive) => {
|
|
if (!eventToggleButton) {
|
|
return;
|
|
}
|
|
|
|
eventToggleButton.setAttribute('aria-pressed', isActive ? 'true' : 'false');
|
|
eventToggleButton.classList.toggle('is-active', isActive);
|
|
};
|
|
|
|
const availableTagIds = tagButtons
|
|
.map((button) => String(button.dataset.mapTagFilter || '').trim())
|
|
.filter((tagId) => /^\d+$/.test(tagId));
|
|
|
|
let activeTagId = null;
|
|
let eventsOnly = false;
|
|
|
|
const updateExclusiveButtonAccessibility = () => {
|
|
tagButtons.forEach((button) => {
|
|
const isActive = button.getAttribute('aria-pressed') === 'true';
|
|
button.setAttribute('aria-disabled', isActive ? 'true' : 'false');
|
|
});
|
|
|
|
if (!eventToggleButton) {
|
|
return;
|
|
}
|
|
|
|
if (!canToggleEvents) {
|
|
eventToggleButton.setAttribute('aria-disabled', 'true');
|
|
|
|
return;
|
|
}
|
|
|
|
const isEventActive = eventToggleButton.getAttribute('aria-pressed') === 'true';
|
|
eventToggleButton.setAttribute('aria-disabled', isEventActive ? 'true' : 'false');
|
|
};
|
|
|
|
const applyFilter = () => {
|
|
if (eventsOnly) {
|
|
organizationMarkerManager.setVisible(false);
|
|
|
|
if (eventLayerManager) {
|
|
eventLayerManager.setVisible(true);
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
organizationMarkerManager.setVisible(true);
|
|
|
|
if (activeTagId) {
|
|
organizationMarkerManager.setOnlyTagId(activeTagId);
|
|
|
|
if (eventLayerManager) {
|
|
eventLayerManager.setVisible(false);
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
organizationMarkerManager.setAllVisible();
|
|
|
|
if (eventLayerManager) {
|
|
eventLayerManager.setVisible(true);
|
|
}
|
|
};
|
|
|
|
tagButtons.forEach((button) => {
|
|
button.addEventListener('click', () => {
|
|
if (button.getAttribute('aria-disabled') === 'true') {
|
|
return;
|
|
}
|
|
|
|
const clickedTagId = String(button.dataset.mapTagFilter || '').trim();
|
|
|
|
if (!/^\d+$/.test(clickedTagId)) {
|
|
return;
|
|
}
|
|
|
|
activeTagId = clickedTagId;
|
|
eventsOnly = false;
|
|
|
|
tagButtons.forEach((otherButton) => {
|
|
const otherTagId = String(otherButton.dataset.mapTagFilter || '').trim();
|
|
setButtonState(otherButton, !!activeTagId && otherTagId === activeTagId);
|
|
});
|
|
|
|
setEventButtonState(false);
|
|
updateExclusiveButtonAccessibility();
|
|
if (typeof closePopup === 'function') {
|
|
closePopup();
|
|
}
|
|
applyFilter();
|
|
});
|
|
});
|
|
|
|
const toggleButton = wrapper.querySelector('[data-map-filter-toggle="1"]');
|
|
const filterGroup = wrapper.querySelector('.eventmanager-map-filter__group');
|
|
|
|
if (toggleButton && filterGroup) {
|
|
toggleButton.addEventListener('click', () => {
|
|
const expanded = toggleButton.getAttribute('aria-expanded') !== 'false';
|
|
const nextExpanded = !expanded;
|
|
|
|
toggleButton.setAttribute('aria-expanded', nextExpanded ? 'true' : 'false');
|
|
filterGroup.hidden = !nextExpanded;
|
|
toggleButton.classList.toggle('is-expanded', nextExpanded);
|
|
toggleButton.classList.toggle('is-collapsed', !nextExpanded);
|
|
|
|
wrapper.classList.toggle('is-filter-expanded', nextExpanded);
|
|
wrapper.classList.toggle('is-filter-collapsed', !nextExpanded);
|
|
});
|
|
|
|
const initiallyExpanded = toggleButton.getAttribute('aria-expanded') !== 'false';
|
|
filterGroup.hidden = !initiallyExpanded;
|
|
toggleButton.classList.toggle('is-expanded', initiallyExpanded);
|
|
toggleButton.classList.toggle('is-collapsed', !initiallyExpanded);
|
|
wrapper.classList.toggle('is-filter-expanded', initiallyExpanded);
|
|
wrapper.classList.toggle('is-filter-collapsed', !initiallyExpanded);
|
|
}
|
|
|
|
if (eventToggleButton && eventLayerManager) {
|
|
eventToggleButton.addEventListener('click', () => {
|
|
if (eventToggleButton.getAttribute('aria-disabled') === 'true') {
|
|
return;
|
|
}
|
|
|
|
eventsOnly = true;
|
|
activeTagId = null;
|
|
|
|
tagButtons.forEach((button) => setButtonState(button, false));
|
|
setEventButtonState(eventsOnly);
|
|
updateExclusiveButtonAccessibility();
|
|
if (typeof closePopup === 'function') {
|
|
closePopup();
|
|
}
|
|
applyFilter();
|
|
});
|
|
} else if (eventToggleButton) {
|
|
eventToggleButton.disabled = true;
|
|
eventToggleButton.setAttribute('aria-disabled', 'true');
|
|
}
|
|
|
|
const streetStyleButton = wrapper.querySelector('[data-map-style-mode="street"]');
|
|
const satelliteStyleButton = wrapper.querySelector('[data-map-style-mode="satellite"]');
|
|
let currentStyleMode = 'street';
|
|
|
|
const applyStyleButtonState = () => {
|
|
if (streetStyleButton) {
|
|
streetStyleButton.setAttribute('aria-pressed', 'street' === currentStyleMode ? 'true' : 'false');
|
|
}
|
|
|
|
if (satelliteStyleButton) {
|
|
satelliteStyleButton.setAttribute('aria-pressed', 'satellite' === currentStyleMode ? 'true' : 'false');
|
|
}
|
|
|
|
};
|
|
|
|
const applyMapStyleMode = () => {
|
|
setSatelliteMode(map, 'satellite' === currentStyleMode);
|
|
applyStyleButtonState();
|
|
};
|
|
|
|
if (streetStyleButton) {
|
|
streetStyleButton.addEventListener('click', () => {
|
|
currentStyleMode = 'street';
|
|
applyMapStyleMode();
|
|
});
|
|
}
|
|
|
|
if (satelliteStyleButton) {
|
|
satelliteStyleButton.addEventListener('click', () => {
|
|
currentStyleMode = 'satellite';
|
|
applyMapStyleMode();
|
|
});
|
|
}
|
|
|
|
const applyInitialDisplayMode = () => {
|
|
const validModes = new Set(['random', 'events', 'organization_tag']);
|
|
const mode = validModes.has(initialDisplayModeRaw) ? initialDisplayModeRaw : 'random';
|
|
const randomTagId = canFilterByTag && availableTagIds.length
|
|
? availableTagIds[Math.floor(Math.random() * availableTagIds.length)]
|
|
: null;
|
|
const configuredTagId = canFilterByTag && /^\d+$/.test(initialTagIdRaw) && availableTagIds.includes(initialTagIdRaw)
|
|
? initialTagIdRaw
|
|
: null;
|
|
|
|
activeTagId = null;
|
|
eventsOnly = false;
|
|
|
|
if ('events' === mode && canFilterByEvents) {
|
|
eventsOnly = true;
|
|
} else if ('organization_tag' === mode && canFilterByTag) {
|
|
activeTagId = configuredTagId || randomTagId;
|
|
} else if ('random' === mode) {
|
|
if (canFilterByTag && canFilterByEvents) {
|
|
if (randomTagId && Math.random() >= 0.5) {
|
|
activeTagId = randomTagId;
|
|
} else {
|
|
eventsOnly = true;
|
|
}
|
|
} else if (canFilterByTag) {
|
|
activeTagId = randomTagId;
|
|
} else if (canFilterByEvents) {
|
|
eventsOnly = true;
|
|
}
|
|
}
|
|
|
|
tagButtons.forEach((button) => {
|
|
const tagId = String(button.dataset.mapTagFilter || '').trim();
|
|
setButtonState(button, null !== activeTagId && tagId === activeTagId);
|
|
});
|
|
setEventButtonState(eventsOnly);
|
|
updateExclusiveButtonAccessibility();
|
|
};
|
|
|
|
applyInitialDisplayMode();
|
|
updateExclusiveButtonAccessibility();
|
|
applyFilter();
|
|
applyMapStyleMode();
|
|
};
|
|
|
|
const initEventLayers = (map, eventItems, eventColor, markerImageId, clusterMarkerImageId, openPopup, closePopup) => {
|
|
const sourceId = 'eventmanager-events-source';
|
|
const clusterLayerId = EVENT_CLUSTER_LAYER_ID;
|
|
const unclusteredLayerId = EVENT_UNCLUSTERED_LAYER_ID;
|
|
const features = eventItems.map(toFeature);
|
|
|
|
map.addSource(sourceId, {
|
|
type: 'geojson',
|
|
data: {
|
|
type: 'FeatureCollection',
|
|
features,
|
|
},
|
|
cluster: true,
|
|
clusterMaxZoom: 17,
|
|
clusterRadius: 22,
|
|
});
|
|
|
|
map.addLayer({
|
|
id: clusterLayerId,
|
|
type: 'symbol',
|
|
source: sourceId,
|
|
filter: ['has', 'point_count'],
|
|
layout: {
|
|
'icon-image': clusterMarkerImageId,
|
|
'icon-size': 1,
|
|
'icon-anchor': 'bottom',
|
|
'icon-allow-overlap': true,
|
|
'icon-ignore-placement': true,
|
|
'text-field': ['get', 'point_count'],
|
|
'text-size': 18,
|
|
'text-font': [GLYPH_FONTSTACK],
|
|
'text-allow-overlap': true,
|
|
'text-ignore-placement': true,
|
|
'text-offset': [0, -1.85],
|
|
},
|
|
paint: {
|
|
'icon-opacity': 1,
|
|
'icon-translate': [0, 4],
|
|
'text-color': '#FFFFFF',
|
|
'text-opacity': 1,
|
|
'text-translate': [0, 4],
|
|
},
|
|
});
|
|
|
|
map.addLayer({
|
|
id: unclusteredLayerId,
|
|
type: 'symbol',
|
|
source: sourceId,
|
|
filter: ['!', ['has', 'point_count']],
|
|
layout: {
|
|
'icon-image': markerImageId,
|
|
'icon-size': 1,
|
|
'icon-anchor': 'bottom',
|
|
'icon-allow-overlap': true,
|
|
'icon-ignore-placement': true,
|
|
'symbol-sort-key': ['*', -1, ['to-number', ['get', 'latitude'], 0]],
|
|
},
|
|
paint: {
|
|
'icon-opacity': 1,
|
|
'icon-translate': [0, 4],
|
|
},
|
|
});
|
|
|
|
const openEventPopup = (feature, coordinatesOverride = null) => {
|
|
const popupHtml = feature?.properties?.popupHtml || '';
|
|
const rawCoords = coordinatesOverride || feature?.geometry?.coordinates || null;
|
|
|
|
if (!Array.isArray(rawCoords) || rawCoords.length !== 2) {
|
|
return;
|
|
}
|
|
|
|
const [lng, lat] = rawCoords.map((coord) => Number(coord));
|
|
|
|
if (!Number.isFinite(lng) || !Number.isFinite(lat)) {
|
|
return;
|
|
}
|
|
|
|
if (typeof openPopup === 'function') {
|
|
openPopup([lng, lat], String(popupHtml));
|
|
}
|
|
};
|
|
|
|
map.on('click', unclusteredLayerId, (event) => {
|
|
const feature = event.features && event.features[0] ? event.features[0] : null;
|
|
|
|
if (!feature) {
|
|
return;
|
|
}
|
|
|
|
openEventPopup(feature, event.lngLat ? [event.lngLat.lng, event.lngLat.lat] : null);
|
|
});
|
|
|
|
map.on('mouseenter', unclusteredLayerId, () => {
|
|
map.getCanvas().style.cursor = 'pointer';
|
|
});
|
|
|
|
map.on('mouseleave', unclusteredLayerId, () => {
|
|
map.getCanvas().style.cursor = '';
|
|
});
|
|
|
|
const bindClusterZoomFallback = () => {
|
|
map.on('click', clusterLayerId, (event) => {
|
|
const feature = event.features && event.features[0] ? event.features[0] : null;
|
|
|
|
if (!feature) {
|
|
return;
|
|
}
|
|
|
|
const clusterId = feature.properties?.cluster_id;
|
|
|
|
if (undefined === clusterId || null === clusterId) {
|
|
return;
|
|
}
|
|
|
|
const source = map.getSource(sourceId);
|
|
|
|
if (!source || typeof source.getClusterExpansionZoom !== 'function') {
|
|
return;
|
|
}
|
|
|
|
source.getClusterExpansionZoom(clusterId, (error, zoom) => {
|
|
if (error) {
|
|
return;
|
|
}
|
|
|
|
map.easeTo({
|
|
center: event.lngLat,
|
|
zoom,
|
|
});
|
|
});
|
|
});
|
|
};
|
|
|
|
let spiderfyInstance = null;
|
|
|
|
if (typeof Spiderfy === 'function') {
|
|
try {
|
|
const spiderfy = new Spiderfy(map, {
|
|
renderMethod: '3D',
|
|
minZoomLevel: 0,
|
|
zoomIncrement: 0,
|
|
closeOnLeafClick: false,
|
|
circleSpiralSwitchover: 10,
|
|
circleOptions: {
|
|
leavesSeparation: 70,
|
|
leavesOffset: [0, 0],
|
|
},
|
|
spiralOptions: {
|
|
legLengthStart: 45,
|
|
legLengthFactor: 5,
|
|
leavesSeparation: 45,
|
|
leavesOffset: [0, 0],
|
|
},
|
|
spiderLegsAreHidden: false,
|
|
spiderLegsWidth: 2,
|
|
spiderLegsColor: eventColor,
|
|
spiderLeavesLayout: {
|
|
'icon-image': markerImageId,
|
|
'icon-size': 0.9,
|
|
'icon-anchor': 'bottom',
|
|
'icon-allow-overlap': true,
|
|
},
|
|
spiderLeavesPaint: {
|
|
'icon-opacity': 1,
|
|
'icon-translate': [-3, 9],
|
|
},
|
|
onLeafClick: (feature, spiderEvent) => {
|
|
const clickCoordinates = spiderEvent?.lngLat
|
|
? [spiderEvent.lngLat.lng, spiderEvent.lngLat.lat]
|
|
: null;
|
|
|
|
openEventPopup(feature, clickCoordinates);
|
|
},
|
|
});
|
|
|
|
spiderfy.applyTo(clusterLayerId);
|
|
spiderfyInstance = spiderfy;
|
|
|
|
if (map.getLayer(clusterLayerId)) {
|
|
map.moveLayer(clusterLayerId);
|
|
}
|
|
} catch (error) {
|
|
bindClusterZoomFallback();
|
|
}
|
|
} else {
|
|
bindClusterZoomFallback();
|
|
}
|
|
|
|
map.on('mouseenter', clusterLayerId, () => {
|
|
map.getCanvas().style.cursor = 'pointer';
|
|
});
|
|
|
|
map.on('mouseleave', clusterLayerId, () => {
|
|
map.getCanvas().style.cursor = '';
|
|
});
|
|
|
|
const fadeLayerOpacity = (layerId, property, value, duration = EVENT_FADE_DURATION_MS) => {
|
|
if (!map.getLayer(layerId)) {
|
|
return;
|
|
}
|
|
|
|
map.setPaintProperty(layerId, `${property}-transition`, { duration, delay: 0 });
|
|
map.setPaintProperty(layerId, property, value);
|
|
};
|
|
|
|
const eventLayerIds = [
|
|
clusterLayerId,
|
|
unclusteredLayerId,
|
|
];
|
|
const clusterFilter = ['has', 'point_count'];
|
|
const unclusteredFilter = ['!', ['has', 'point_count']];
|
|
const hiddenFilter = ['has', '__eventmanager_hidden__'];
|
|
let hideLayersTimeoutId = null;
|
|
|
|
const setLayerFilter = (layerId, filter) => {
|
|
if (!map.getLayer(layerId)) {
|
|
return;
|
|
}
|
|
|
|
map.setFilter(layerId, filter);
|
|
};
|
|
|
|
return {
|
|
setVisible: (isVisible) => {
|
|
if (isVisible) {
|
|
if (null !== hideLayersTimeoutId) {
|
|
window.clearTimeout(hideLayersTimeoutId);
|
|
hideLayersTimeoutId = null;
|
|
}
|
|
|
|
setLayerFilter(clusterLayerId, clusterFilter);
|
|
setLayerFilter(unclusteredLayerId, unclusteredFilter);
|
|
|
|
fadeLayerOpacity(clusterLayerId, 'icon-opacity', 1);
|
|
fadeLayerOpacity(clusterLayerId, 'text-opacity', 1);
|
|
fadeLayerOpacity(unclusteredLayerId, 'icon-opacity', 1);
|
|
|
|
return;
|
|
}
|
|
|
|
if (spiderfyInstance) {
|
|
if (typeof spiderfyInstance._clearSpiderifiedCluster === 'function') {
|
|
spiderfyInstance._clearSpiderifiedCluster();
|
|
} else if (typeof spiderfyInstance.unspiderfyAll === 'function') {
|
|
spiderfyInstance.unspiderfyAll();
|
|
}
|
|
}
|
|
|
|
if (typeof closePopup === 'function') {
|
|
closePopup();
|
|
}
|
|
|
|
fadeLayerOpacity(clusterLayerId, 'icon-opacity', 0);
|
|
fadeLayerOpacity(clusterLayerId, 'text-opacity', 0);
|
|
fadeLayerOpacity(unclusteredLayerId, 'icon-opacity', 0);
|
|
|
|
hideLayersTimeoutId = window.setTimeout(() => {
|
|
setLayerFilter(clusterLayerId, hiddenFilter);
|
|
setLayerFilter(unclusteredLayerId, hiddenFilter);
|
|
hideLayersTimeoutId = null;
|
|
}, EVENT_FADE_DURATION_MS + 10);
|
|
},
|
|
};
|
|
|
|
};
|
|
|
|
const initSingleMap = (container) => {
|
|
if (container.dataset.mapInitialized === '1') {
|
|
return;
|
|
}
|
|
|
|
const items = parseItems(container);
|
|
const centerMode = container.dataset.mapCenterMode === 'custom' ? 'custom' : 'markers';
|
|
const customLat = parseCoordinate(container.dataset.mapCenterLat);
|
|
const customLng = parseCoordinate(container.dataset.mapCenterLng);
|
|
const customZoom = Number(container.dataset.mapCenterZoom);
|
|
const customPitch = Number(container.dataset.mapPitch);
|
|
const eventColor = normalizeHexColor(container.dataset.mapEventColor, DEFAULT_EVENT_COLOR);
|
|
const hasCustomCenter = null !== customLat && null !== customLng;
|
|
const initialPitch = Number.isFinite(customPitch)
|
|
? Math.max(0, Math.min(85, customPitch))
|
|
: 0;
|
|
|
|
let initialCenter = DEFAULT_CENTER;
|
|
let initialZoom = DEFAULT_ZOOM;
|
|
|
|
if ('custom' === centerMode && hasCustomCenter) {
|
|
initialCenter = [customLng, customLat];
|
|
initialZoom = Number.isFinite(customZoom) ? customZoom : 12;
|
|
} else if (items.length) {
|
|
initialCenter = [items[0].longitude, items[0].latitude];
|
|
initialZoom = 12;
|
|
}
|
|
|
|
container.dataset.mapInitialized = '1';
|
|
|
|
ensureDependencies()
|
|
.then(async () => {
|
|
if (typeof maplibregl === 'undefined') {
|
|
return;
|
|
}
|
|
|
|
if (typeof pmtiles !== 'undefined' && !window.__eventmanagerPmtilesRegistered) {
|
|
const protocol = new pmtiles.Protocol();
|
|
maplibregl.addProtocol('pmtiles', protocol.tile);
|
|
window.__eventmanagerPmtilesRegistered = true;
|
|
}
|
|
|
|
const baseStyleUrl = container.dataset.mapStyle || DEFAULT_BASE_STYLE_URL;
|
|
const style = await getProtomapsStyle(baseStyleUrl);
|
|
const map = new maplibregl.Map({
|
|
container,
|
|
style,
|
|
zoom: initialZoom,
|
|
pitch: initialPitch,
|
|
bearing: 0,
|
|
center: initialCenter,
|
|
transformRequest: (url, resourceType) => {
|
|
if ('Glyphs' === resourceType) {
|
|
return {
|
|
url: rewriteGlyphUrl(url),
|
|
};
|
|
}
|
|
|
|
return {
|
|
url,
|
|
};
|
|
},
|
|
});
|
|
|
|
let activePopup = null;
|
|
|
|
const closePopup = () => {
|
|
if (!activePopup) {
|
|
return;
|
|
}
|
|
|
|
activePopup.remove();
|
|
activePopup = null;
|
|
};
|
|
|
|
const openPopup = (coordinates, popupHtml) => {
|
|
if (!Array.isArray(coordinates) || coordinates.length !== 2 || !popupHtml) {
|
|
return;
|
|
}
|
|
|
|
const [lng, lat] = coordinates.map((value) => Number(value));
|
|
|
|
if (!Number.isFinite(lng) || !Number.isFinite(lat)) {
|
|
return;
|
|
}
|
|
|
|
closePopup();
|
|
|
|
const popup = new maplibregl.Popup({ offset: 15 })
|
|
.setLngLat([lng, lat])
|
|
.setHTML(String(popupHtml))
|
|
.addTo(map);
|
|
|
|
popup.on('close', () => {
|
|
if (activePopup === popup) {
|
|
activePopup = null;
|
|
}
|
|
});
|
|
|
|
activePopup = popup;
|
|
};
|
|
|
|
map.on('style.load', () => {
|
|
applyDefaultProjection(map);
|
|
});
|
|
|
|
map.on('styleimagemissing', (event) => {
|
|
const missingImageId = event?.id || '';
|
|
|
|
if (!missingImageId || map.hasImage(missingImageId)) {
|
|
return;
|
|
}
|
|
|
|
map.addImage(missingImageId, {
|
|
width: 1,
|
|
height: 1,
|
|
data: new Uint8Array([0, 0, 0, 0]),
|
|
});
|
|
});
|
|
|
|
map.addControl(new maplibregl.NavigationControl({ visualizePitch: true }));
|
|
|
|
const fitBounds = (coordinates) => {
|
|
const points = coordinates.filter((coord) => Array.isArray(coord) && coord.length === 2);
|
|
|
|
if (!points.length) {
|
|
return;
|
|
}
|
|
|
|
if (1 === points.length) {
|
|
map.setCenter(points[0]);
|
|
map.setZoom(14);
|
|
|
|
return;
|
|
}
|
|
|
|
const bounds = new maplibregl.LngLatBounds();
|
|
points.forEach((coord) => bounds.extend(coord));
|
|
|
|
map.fitBounds(bounds, {
|
|
padding: 60,
|
|
maxZoom: 15,
|
|
});
|
|
};
|
|
|
|
map.on('load', async () => {
|
|
applyDefaultProjection(map);
|
|
|
|
const organizationItems = items
|
|
.filter((item) => item.type === 'organisation')
|
|
.sort((firstItem, secondItem) => secondItem.latitude - firstItem.latitude);
|
|
const eventItems = items
|
|
.filter((item) => item.type === 'event')
|
|
.sort((firstItem, secondItem) => secondItem.latitude - firstItem.latitude);
|
|
const allCoordinates = items.map((item) => [item.longitude, item.latitude]);
|
|
const organizationColor = normalizeHexColor(
|
|
container.dataset.mapOrganizationColor,
|
|
eventColor,
|
|
);
|
|
let eventMarkerImageId = null;
|
|
let clusterMarkerImageId = null;
|
|
|
|
try {
|
|
[eventMarkerImageId, clusterMarkerImageId] = await Promise.all([
|
|
ensureMarkerImage(map, eventColor, 'eventmanager-event-marker', { withInnerDot: true }),
|
|
ensureMarkerImage(map, eventColor, 'eventmanager-event-cluster-marker', { withInnerDot: false }),
|
|
]);
|
|
} catch (error) {
|
|
return;
|
|
}
|
|
|
|
const organizationMarkerManager = initOrganizationMarkers(map, organizationItems, organizationColor, openPopup);
|
|
let eventLayerManager = null;
|
|
|
|
if (eventItems.length) {
|
|
eventLayerManager = initEventLayers(map, eventItems, eventColor, eventMarkerImageId, clusterMarkerImageId, openPopup, closePopup);
|
|
}
|
|
|
|
bindExternalTagFilters(container, map, organizationMarkerManager, eventLayerManager, closePopup);
|
|
|
|
if ('markers' === centerMode) {
|
|
fitBounds(allCoordinates);
|
|
}
|
|
});
|
|
})
|
|
.catch(() => {
|
|
container.dataset.mapInitialized = '0';
|
|
});
|
|
};
|
|
|
|
const bootstrapMapModules = () => {
|
|
const modules = document.querySelectorAll(MAP_SELECTOR);
|
|
modules.forEach((container) => initSingleMap(container));
|
|
};
|
|
|
|
if ('loading' === document.readyState) {
|
|
document.addEventListener('DOMContentLoaded', bootstrapMapModules, { once: true });
|
|
} else {
|
|
bootstrapMapModules();
|
|
}
|