added pubilc folder
This commit is contained in:
Hendrik Behme committed
1 parent
34f463071f
commit
7f6b100506
9 files changed
+1440
-1
No files matched your search
@@ -0,0 +1,762 @@
|
||||
(function (window) {
|
||||
// The leaflet-gesture-handling UMD build exposes its class as
|
||||
// window.leafletGestureHandling.GestureHandling instead of registering
|
||||
// itself on L (unlike the other Leaflet plugins loaded on this page), so
|
||||
// it has to be wired in manually before any L.map() call.
|
||||
if (window.L && window.leafletGestureHandling && !window.L.Map.prototype.options.gestureHandling) {
|
||||
window.L.Map.addInitHook('addHandler', 'gestureHandling', window.leafletGestureHandling.GestureHandling);
|
||||
}
|
||||
|
||||
// Köln — last-resort fallback if a caller doesn't pass its own center;
|
||||
// both controllers (Home/Map) explicitly pass the same point themselves,
|
||||
// so this only matters if that ever gets forgotten.
|
||||
var DEFAULT_CENTER = [50.9375, 6.9603];
|
||||
|
||||
// Leaflet.awesome-markers only ships a fixed palette of named colors (no
|
||||
// arbitrary hex/hsl) — curated to the ones that read well against the
|
||||
// grayscale-filtered basemap. Approximate hex values below are only used
|
||||
// for the legend swatches, so they match what's actually drawn on pins.
|
||||
var AWESOME_COLORS = ['red', 'darkred', 'orange', 'green', 'darkgreen', 'blue', 'darkblue', 'lightblue', 'purple', 'darkpurple', 'cadetblue', 'beige'];
|
||||
var AWESOME_COLOR_HEX = {
|
||||
red: '#d63e2a', darkred: '#a23336', orange: '#f69730', green: '#72b026',
|
||||
darkgreen: '#728224', blue: '#38aadd', darkblue: '#0067a3', lightblue: '#8adaff',
|
||||
purple: '#d252b9', darkpurple: '#5b396b', cadetblue: '#436978', beige: '#e0a458'
|
||||
};
|
||||
|
||||
// Real ODH category names are German tourism-taxonomy strings (80+ of
|
||||
// them) — this maps keywords found in a name to a Font Awesome 4 glyph,
|
||||
// first match wins, falling back to a generic calendar icon.
|
||||
var CATEGORY_ICON_RULES = [
|
||||
{ icon: 'tree', words: ['weihnacht'] },
|
||||
{ icon: 'music', words: ['musik', 'konzert', 'jazz', 'rock', 'pop', 'blues', 'soul', 'reggae', 'techno', 'house', 'elektro', 'punk', 'metal', 'folk', 'country', 'swing', 'gospel', 'klassisch', 'oper', 'musical', 'schlager', 'sakralmusik', 'volksmusik', 'dancehall', 'r\'n\'b'] },
|
||||
{ icon: 'comments', words: ['theater', 'bühne', 'schauspiel', 'kabarett', 'ballett', 'figurentheater'] },
|
||||
{ icon: 'film', words: ['film'] },
|
||||
{ icon: 'shopping-cart', words: ['markt', 'flohmarkt', 'messe'] },
|
||||
{ icon: 'flag', words: ['festival', 'fest', 'kirmes', 'jahrmarkt', 'stadtfest'] },
|
||||
{ icon: 'binoculars', words: ['führung', 'besichtigung', 'ausflug', 'exkursion'] },
|
||||
{ icon: 'bicycle', words: ['radtour', 'rad'] },
|
||||
{ icon: 'trophy', words: ['sport', 'turnier', 'wettbewerb', 'motorsport'] },
|
||||
{ icon: 'map-signs', words: ['wanderung'] },
|
||||
{ icon: 'cutlery', words: ['gastronomie', 'genuss', 'gourmet'] },
|
||||
{ icon: 'child', words: ['kinder', 'familie'] },
|
||||
{ icon: 'heartbeat', words: ['gesundheit', 'wellness'] },
|
||||
{ icon: 'university', words: ['kirche', 'sakral'] },
|
||||
{ icon: 'book', words: ['vortrag', 'lesung', 'kurs', 'seminar', 'workshop', 'hobby'] },
|
||||
{ icon: 'users', words: ['kongress', 'geselligkeit', 'spiele', 'treffen'] },
|
||||
{ icon: 'glass', words: ['party', 'nightlife'] },
|
||||
{ icon: 'picture-o', words: ['ausstellung'] }
|
||||
];
|
||||
var DEFAULT_ICON = 'calendar';
|
||||
|
||||
function hashHue(str) {
|
||||
var hash = 0;
|
||||
for (var i = 0; i < str.length; i++) {
|
||||
hash = (hash * 31 + str.charCodeAt(i)) >>> 0;
|
||||
}
|
||||
return hash;
|
||||
}
|
||||
|
||||
function categoryColor(name) {
|
||||
if (!name) return 'hsl(220, 10%, 55%)';
|
||||
return 'hsl(' + (hashHue(name) % 360) + ', 62%, 42%)';
|
||||
}
|
||||
|
||||
function categoryMarkerColorName(name) {
|
||||
if (!name) return 'cadetblue';
|
||||
return AWESOME_COLORS[hashHue(name) % AWESOME_COLORS.length];
|
||||
}
|
||||
|
||||
function categoryMarkerHex(name) {
|
||||
return AWESOME_COLOR_HEX[categoryMarkerColorName(name)] || '#436978';
|
||||
}
|
||||
|
||||
function categoryIconName(name) {
|
||||
var lower = (name || '').toLowerCase();
|
||||
for (var i = 0; i < CATEGORY_ICON_RULES.length; i++) {
|
||||
var rule = CATEGORY_ICON_RULES[i];
|
||||
for (var j = 0; j < rule.words.length; j++) {
|
||||
if (lower.indexOf(rule.words[j]) !== -1) return rule.icon;
|
||||
}
|
||||
}
|
||||
return DEFAULT_ICON;
|
||||
}
|
||||
|
||||
function ensurePulseStyle() {
|
||||
if (document.getElementById('vindn-pulse-style')) return;
|
||||
var styleTag = document.createElement('style');
|
||||
styleTag.id = 'vindn-pulse-style';
|
||||
styleTag.textContent = '@keyframes vindnPulse{0%{transform:scale(.6);opacity:.45}100%{transform:scale(2.4);opacity:0}}';
|
||||
document.head.appendChild(styleTag);
|
||||
}
|
||||
|
||||
// Plain pulsing dot — used only for the "you are here" user-location
|
||||
// marker, kept visually distinct from the category pins below.
|
||||
function dotIcon(color, big) {
|
||||
var size = big ? 18 : 14;
|
||||
var ring = big
|
||||
? '<span style="position:absolute;inset:-8px;border-radius:50%;background:' + color + ';opacity:.25;animation:vindnPulse 2.2s ease-out infinite;"></span>'
|
||||
: '';
|
||||
return L.divIcon({
|
||||
className: 'pin-icon',
|
||||
html: '<span style="position:relative;display:block;width:' + size + 'px;height:' + size + 'px;">' + ring +
|
||||
'<span style="position:absolute;inset:0;border-radius:50%;background:' + color + ';border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);"></span></span>',
|
||||
iconSize: [size, size],
|
||||
iconAnchor: [size / 2, size / 2]
|
||||
});
|
||||
}
|
||||
|
||||
// Category pin — Font Awesome glyph in a colored teardrop marker, falling
|
||||
// back to a plain dot if the awesome-markers plugin didn't load.
|
||||
function categoryIcon(name) {
|
||||
if (window.L.AwesomeMarkers) {
|
||||
return L.AwesomeMarkers.icon({
|
||||
icon: categoryIconName(name),
|
||||
prefix: 'fa',
|
||||
markerColor: categoryMarkerColorName(name)
|
||||
});
|
||||
}
|
||||
return dotIcon(categoryColor(name), false);
|
||||
}
|
||||
|
||||
// OpenFreeMap's "liberty" style labels everything with
|
||||
// coalesce(name_en, name) — English first — which shows "Cologne"
|
||||
// instead of "Köln" even though the whole map (and every event on it)
|
||||
// is German. Rewrites that one recurring sub-expression, wherever it
|
||||
// appears, to prefer name_de then the OSM-local `name` (which for
|
||||
// German places already *is* the German name) before falling back to
|
||||
// English. Layers that don't contain it (road-shield ref numbers, etc.)
|
||||
// are left alone.
|
||||
function preferGermanLabels(maplibreMap) {
|
||||
var EN_FIRST = '["coalesce",["get","name_en"],["get","name"]]';
|
||||
var DE_FIRST = '["coalesce",["get","name_de"],["get","name"],["get","name_en"]]';
|
||||
|
||||
var style = maplibreMap.getStyle();
|
||||
if (!style || !style.layers) return;
|
||||
|
||||
style.layers.forEach(function (layer) {
|
||||
var textField = layer.layout && layer.layout['text-field'];
|
||||
if (!textField) return;
|
||||
|
||||
var serialized = JSON.stringify(textField);
|
||||
if (serialized.indexOf(EN_FIRST) === -1) return;
|
||||
|
||||
maplibreMap.setLayoutProperty(layer.id, 'text-field', JSON.parse(serialized.split(EN_FIRST).join(DE_FIRST)));
|
||||
});
|
||||
}
|
||||
|
||||
function readEmbeddedJson(elementId) {
|
||||
var el = document.getElementById(elementId);
|
||||
if (!el) return [];
|
||||
try {
|
||||
return JSON.parse(el.textContent) || [];
|
||||
} catch (e) {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function toRad(d) { return d * Math.PI / 180; }
|
||||
|
||||
function distanceKm(lat1, lon1, lat2, lon2) {
|
||||
var R = 6371;
|
||||
var dLat = toRad(lat2 - lat1);
|
||||
var dLon = toRad(lon2 - lon1);
|
||||
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
|
||||
Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
|
||||
return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
||||
}
|
||||
|
||||
// Returns the `count` events closest to `center`, each tagged with `_dist` (km).
|
||||
function nearest(center, events, count) {
|
||||
return events
|
||||
.map(function (ev) {
|
||||
ev._dist = distanceKm(center[0], center[1], ev.lat, ev.lon);
|
||||
return ev;
|
||||
})
|
||||
.sort(function (a, b) { return a._dist - b._dist; })
|
||||
.slice(0, count);
|
||||
}
|
||||
|
||||
// Builds an (unattached) marker for an event — caller adds it to either
|
||||
// the map directly or a MarkerClusterGroup.
|
||||
function buildMarker(ev, onMarkerClick) {
|
||||
var hex = categoryMarkerHex(ev.category);
|
||||
var marker = L.marker([ev.lat, ev.lon], { icon: categoryIcon(ev.category) });
|
||||
var popupHtml = '<div class="pin-pop">' +
|
||||
(ev.category ? '<span class="cat" style="color:' + hex + ';">' + ev.category + '</span>' : '') +
|
||||
'<h4>' + ev.title + '</h4>' +
|
||||
(ev.venue ? '<p>' + ev.venue + '</p>' : '') +
|
||||
(ev.url ? '<a href="' + ev.url + '">View event →</a>' : '') +
|
||||
'</div>';
|
||||
marker.bindPopup(popupHtml);
|
||||
if (onMarkerClick) marker.on('click', function () { onMarkerClick(ev, marker); });
|
||||
return marker;
|
||||
}
|
||||
|
||||
function fitToMarkers(map, markers) {
|
||||
var list = Object.keys(markers).map(function (id) { return markers[id]; });
|
||||
if (!list.length) return;
|
||||
if (list.length === 1) { map.setView(list[0].getLatLng(), 13); return; }
|
||||
map.fitBounds(L.featureGroup(list).getBounds(), { padding: [40, 40], maxZoom: 14, animate: false });
|
||||
}
|
||||
|
||||
// Renders a Leaflet map of category pins (one per event) into
|
||||
// containerId, clustered via Leaflet.markercluster when it's loaded.
|
||||
// events: [{id, title, venue, category, lat, lon, url}]
|
||||
function renderPinMap(containerId, events, opts) {
|
||||
opts = opts || {};
|
||||
var el = document.getElementById(containerId);
|
||||
if (!el || !window.L) return null;
|
||||
ensurePulseStyle();
|
||||
|
||||
var center = opts.center || (events.length ? [events[0].lat, events[0].lon] : DEFAULT_CENTER);
|
||||
var map = L.map(containerId, {
|
||||
zoomControl: !!opts.zoomControl,
|
||||
attributionControl: !!opts.attributionControl,
|
||||
scrollWheelZoom: !!opts.scrollWheelZoom,
|
||||
// A raster L.tileLayer used to supply maxZoom implicitly; the
|
||||
// MapLibre GL bridge doesn't. minZoom/maxBounds are maplibre-gl-
|
||||
// leaflet's own documented recommendation, to avoid Leaflet/MapLibre
|
||||
// disagreeing about zoom 0 and latitudes MapLibre doesn't support.
|
||||
minZoom: 1,
|
||||
maxZoom: 19,
|
||||
maxBounds: [[-90, -Infinity], [90, Infinity]],
|
||||
maxBoundsViscosity: 1,
|
||||
// Requires two-finger drag / Ctrl+scroll to pan/zoom, with an
|
||||
// on-map hint, so an embedded map (home hero, mid-page /map) doesn't
|
||||
// trap page scroll/pinch-zoom on touch devices.
|
||||
gestureHandling: opts.gestureHandling !== false
|
||||
}).setView(center, opts.zoom || 13);
|
||||
|
||||
if (L.maplibreGL) {
|
||||
// OpenFreeMap serves vector tiles only, rendered by MapLibre GL and
|
||||
// bridged into this Leaflet map as an ordinary layer — everything
|
||||
// else (markers, clustering, fullscreen) is untouched by this.
|
||||
var glLayer = L.maplibreGL({
|
||||
style: 'https://tiles.openfreemap.org/styles/liberty',
|
||||
attribution: '© <a href="https://openfreemap.org" target="_blank">OpenFreeMap</a> <a href="https://www.openmaptiles.org/" target="_blank">© OpenMapTiles</a> Data from <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>'
|
||||
}).addTo(map);
|
||||
|
||||
var glMap = glLayer.getMaplibreMap && glLayer.getMaplibreMap();
|
||||
if (glMap) {
|
||||
// 'load' waits for full tile loading and can take a while;
|
||||
// 'styledata' fires as soon as the style/layers themselves are
|
||||
// parsed, which is all setLayoutProperty needs.
|
||||
glMap.once('styledata', function () { preferGermanLabels(glMap); });
|
||||
}
|
||||
} else {
|
||||
// Fallback if the MapLibre bridge failed to load for some reason.
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
maxZoom: 18,
|
||||
attribution: opts.attributionControl ? '© OpenStreetMap contributors' : ''
|
||||
}).addTo(map);
|
||||
}
|
||||
|
||||
if (opts.fullscreenControl !== false && L.control && L.control.fullscreen) {
|
||||
// Fullscreen the whole .stage (search bar, locate button, panel), not
|
||||
// just the bare map div — those overlay controls are DOM siblings of
|
||||
// #mapCanvas, not descendants, so they'd vanish in fullscreen otherwise.
|
||||
L.control.fullscreen({
|
||||
title: 'View fullscreen',
|
||||
titleCancel: 'Exit fullscreen',
|
||||
fullscreenElement: el.closest('.stage') || el
|
||||
}).addTo(map);
|
||||
|
||||
// Fullscreen means the map owns the whole viewport, so the two-
|
||||
// finger/Ctrl+scroll gating gesture handling exists for (avoiding
|
||||
// trapped page scroll) no longer applies — switch back to normal
|
||||
// single-finger/scroll interaction while fullscreen is active.
|
||||
if (map.gestureHandling) {
|
||||
map.on('enterFullscreen', function () { map.gestureHandling.disable(); });
|
||||
map.on('exitFullscreen', function () { map.gestureHandling.enable(); });
|
||||
}
|
||||
}
|
||||
|
||||
var clusterGroup = (opts.cluster !== false && L.markerClusterGroup)
|
||||
// animate:false — a fitBounds() called right after the initial
|
||||
// addLayer() (see fitToMarkers) otherwise races the cluster expand/
|
||||
// collapse animation and leaves stale icon elements in the DOM.
|
||||
? L.markerClusterGroup({ maxClusterRadius: 50, spiderfyOnMaxZoom: true, showCoverageOnHover: false, animate: false })
|
||||
: null;
|
||||
if (clusterGroup) map.addLayer(clusterGroup);
|
||||
|
||||
var markers = {};
|
||||
events.forEach(function (ev) {
|
||||
var marker = buildMarker(ev, opts.onMarkerClick);
|
||||
markers[ev.id] = marker;
|
||||
if (clusterGroup) clusterGroup.addLayer(marker);
|
||||
else marker.addTo(map);
|
||||
});
|
||||
|
||||
return { map: map, markers: markers, clusterGroup: clusterGroup };
|
||||
}
|
||||
|
||||
/**
|
||||
* Wires up the full interactive map "stage" used on both the home page
|
||||
* and /map: pin map, category chips (#catChips), legend (#legend),
|
||||
* nearby-events panel (#panelList/#resultCount), and a "use my location"
|
||||
* button (#locateBtn). All element ids are optional — missing
|
||||
* ones are just skipped, so the same call works whether or not a given
|
||||
* piece of UI is present on the page.
|
||||
*
|
||||
* opts.limit turns on the "light" mode used by the home page: instead of
|
||||
* plotting every event, it shows only the `limit` nearest to a default
|
||||
* center (opts.defaultCenter) until the user shares their real location,
|
||||
* at which point it re-picks the `limit` nearest to *that* from the full
|
||||
* event list and refits the map to them.
|
||||
*/
|
||||
function initMapStage(opts) {
|
||||
opts = opts || {};
|
||||
var allEvents = opts.events || [];
|
||||
var limit = opts.limit || null;
|
||||
var defaultCenter = opts.defaultCenter || DEFAULT_CENTER;
|
||||
var containerId = opts.containerId || 'mapCanvas';
|
||||
var state = { cat: 'all', userLoc: null };
|
||||
|
||||
var shown = limit ? nearest(defaultCenter, allEvents.slice(), limit) : allEvents;
|
||||
|
||||
var result = renderPinMap(containerId, shown, {
|
||||
zoomControl: true,
|
||||
attributionControl: true,
|
||||
zoom: opts.zoom || (limit ? 11 : (allEvents.length ? 9 : 7)),
|
||||
center: limit ? defaultCenter : undefined,
|
||||
onMarkerClick: function (ev) { highlightRow(ev.id); }
|
||||
});
|
||||
var map = result ? result.map : null;
|
||||
var markers = result ? result.markers : {};
|
||||
var clusterGroup = result ? result.clusterGroup : null;
|
||||
var userMarker = null;
|
||||
|
||||
if (limit && map) fitToMarkers(map, markers);
|
||||
|
||||
var legendEl = document.getElementById('legend');
|
||||
if (legendEl) {
|
||||
var seenCats = [];
|
||||
allEvents.forEach(function (ev) {
|
||||
if (ev.category && seenCats.indexOf(ev.category) === -1) seenCats.push(ev.category);
|
||||
});
|
||||
legendEl.innerHTML = seenCats.slice(0, 8).map(function (cat) {
|
||||
return '<span><span class="dot" style="background:' + categoryMarkerHex(cat) + ';"></span>' + cat + '</span>';
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function addMarker(marker) {
|
||||
if (clusterGroup) clusterGroup.addLayer(marker);
|
||||
else if (map) marker.addTo(map);
|
||||
}
|
||||
|
||||
function removeMarker(marker) {
|
||||
if (clusterGroup) clusterGroup.removeLayer(marker);
|
||||
else if (map) map.removeLayer(marker);
|
||||
}
|
||||
|
||||
function rebuildMarkers(list) {
|
||||
Object.keys(markers).forEach(function (id) { removeMarker(markers[id]); });
|
||||
markers = {};
|
||||
list.forEach(function (ev) {
|
||||
var marker = buildMarker(ev, function (clicked) { highlightRow(clicked.id); });
|
||||
markers[ev.id] = marker;
|
||||
addMarker(marker);
|
||||
});
|
||||
shown = list;
|
||||
}
|
||||
|
||||
function highlightRow(id) {
|
||||
document.querySelectorAll('.map-row').forEach(function (r) { r.classList.remove('is-highlighted'); });
|
||||
var row = document.querySelector('.map-row[data-id="' + id + '"]');
|
||||
if (row) { row.classList.add('is-highlighted'); row.scrollIntoView({ block: 'nearest', behavior: 'smooth' }); }
|
||||
}
|
||||
|
||||
function currentList() {
|
||||
if (limit) {
|
||||
var list = shown.slice();
|
||||
if (state.userLoc) {
|
||||
list = list.map(function (ev) { ev._dist = distanceKm(state.userLoc[0], state.userLoc[1], ev.lat, ev.lon); return ev; })
|
||||
.sort(function (a, b) { return a._dist - b._dist; });
|
||||
}
|
||||
return list;
|
||||
}
|
||||
|
||||
var visible = allEvents.filter(function (ev) { return state.cat === 'all' || ev.category === state.cat; });
|
||||
if (state.userLoc) {
|
||||
visible = visible.map(function (ev) { ev._dist = distanceKm(state.userLoc[0], state.userLoc[1], ev.lat, ev.lon); return ev; })
|
||||
.sort(function (a, b) { return a._dist - b._dist; });
|
||||
}
|
||||
|
||||
Object.keys(markers).forEach(function (id) {
|
||||
var isVisible = visible.some(function (ev) { return String(ev.id) === String(id); });
|
||||
var m = markers[id];
|
||||
var hasLayer = clusterGroup ? clusterGroup.hasLayer(m) : (map && map.hasLayer(m));
|
||||
if (isVisible && !hasLayer) addMarker(m);
|
||||
if (!isVisible && hasLayer) removeMarker(m);
|
||||
});
|
||||
|
||||
return visible;
|
||||
}
|
||||
|
||||
function renderList() {
|
||||
var list = currentList();
|
||||
|
||||
var countEl = document.getElementById('resultCount');
|
||||
if (countEl) countEl.textContent = list.length + (list.length === 1 ? ' event' : ' events');
|
||||
|
||||
var panelEl = document.getElementById('panelList');
|
||||
if (!panelEl) return;
|
||||
|
||||
panelEl.innerHTML = list.map(function (ev) {
|
||||
var distHtml = '';
|
||||
if (ev._dist != null) {
|
||||
var distLabel = ev._dist < 1 ? Math.round(ev._dist * 1000) : ev._dist.toFixed(1);
|
||||
var distUnit = ev._dist < 1 ? 'm' : 'km';
|
||||
distHtml = '<div class="dist">' + distLabel + '<span class="u">' + distUnit + '</span></div>';
|
||||
}
|
||||
return (
|
||||
'<div class="map-row' + (ev._dist != null ? '' : ' no-dist') + '" data-id="' + ev.id + '" tabindex="0" role="button" aria-label="' + ev.title + '">' +
|
||||
distHtml +
|
||||
'<div><div class="name">' + ev.title + '</div><span class="when">' + (ev.venue || '') + '</span></div>' +
|
||||
'<div class="go">→</div>' +
|
||||
'</div>'
|
||||
);
|
||||
}).join('');
|
||||
|
||||
panelEl.querySelectorAll('.map-row').forEach(function (row) {
|
||||
row.addEventListener('click', function () {
|
||||
var id = row.getAttribute('data-id');
|
||||
var ev = allEvents.filter(function (e) { return String(e.id) === String(id); })[0];
|
||||
if (!ev || !map) return;
|
||||
map.flyTo([ev.lat, ev.lon], 15);
|
||||
var marker = markers[id];
|
||||
if (marker) {
|
||||
if (clusterGroup && clusterGroup.zoomToShowLayer) {
|
||||
clusterGroup.zoomToShowLayer(marker, function () { marker.openPopup(); });
|
||||
} else {
|
||||
marker.openPopup();
|
||||
}
|
||||
}
|
||||
highlightRow(id);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
var chipsEl = document.getElementById('catChips');
|
||||
if (chipsEl) {
|
||||
chipsEl.addEventListener('click', function (e) {
|
||||
var btn = e.target.closest('.chip-sm');
|
||||
if (!btn) return;
|
||||
chipsEl.querySelectorAll('.chip-sm').forEach(function (c) { c.classList.remove('is-active'); });
|
||||
btn.classList.add('is-active');
|
||||
state.cat = btn.getAttribute('data-cat');
|
||||
renderList();
|
||||
});
|
||||
}
|
||||
|
||||
function requestLocation() {
|
||||
var statusEl = document.getElementById('locateStatus');
|
||||
if (!navigator.geolocation) {
|
||||
if (statusEl) statusEl.textContent = 'Location not supported by your browser';
|
||||
return;
|
||||
}
|
||||
if (statusEl) statusEl.textContent = 'Finding you…';
|
||||
navigator.geolocation.getCurrentPosition(function (pos) {
|
||||
var lat = pos.coords.latitude;
|
||||
var lon = pos.coords.longitude;
|
||||
state.userLoc = [lat, lon];
|
||||
|
||||
if (limit) {
|
||||
rebuildMarkers(nearest([lat, lon], allEvents.slice(), limit));
|
||||
if (statusEl) statusEl.textContent = 'Showing the ' + limit + ' nearest events';
|
||||
} else if (statusEl) {
|
||||
statusEl.textContent = 'Showing events near you';
|
||||
}
|
||||
|
||||
if (map) {
|
||||
if (userMarker) map.removeLayer(userMarker);
|
||||
userMarker = L.marker([lat, lon], { icon: dotIcon('#2440FF', true), zIndexOffset: 1000 }).addTo(map);
|
||||
if (limit) fitToMarkers(map, markers);
|
||||
else map.setView([lat, lon], 13);
|
||||
}
|
||||
|
||||
renderList();
|
||||
}, function () {
|
||||
if (statusEl) statusEl.textContent = "Couldn't get your location";
|
||||
}, { timeout: 8000 });
|
||||
}
|
||||
|
||||
var locateBtn = document.getElementById('locateBtn');
|
||||
if (locateBtn) locateBtn.addEventListener('click', requestLocation);
|
||||
|
||||
// If the user already granted location access (on this or an earlier
|
||||
// visit), center on it automatically — this only *reads* the current
|
||||
// permission state, it never triggers the browser's permission prompt
|
||||
// itself, so it's safe to check unconditionally on load.
|
||||
if (navigator.permissions && navigator.permissions.query) {
|
||||
navigator.permissions.query({ name: 'geolocation' }).then(function (status) {
|
||||
if (status.state === 'granted') requestLocation();
|
||||
}).catch(function () {});
|
||||
}
|
||||
|
||||
renderList();
|
||||
|
||||
return { map: map, markers: markers };
|
||||
}
|
||||
|
||||
/**
|
||||
* The /map page's full radius-based explorer — replaces a flat "first
|
||||
* N events" cap with "events within rangeKm of a source point", where
|
||||
* the source starts at the server-resolved center (Köln by default, or
|
||||
* ?lat/&lon) and can move via a map click/marker drag, a place search
|
||||
* (Nominatim), or "use my location". Assumes the full (non-compact)
|
||||
* _map_stage.html.twig markup — #catChips, #legend, #rangeSelect,
|
||||
* #locationSearchForm all present.
|
||||
*
|
||||
* opts.events is the full pool the server already limited to
|
||||
* opts.maxRangeKm around opts.center; moving the source further than
|
||||
* that away can't be served from the pool, so it triggers a fresh page
|
||||
* load centered on the new point instead of silently showing partial
|
||||
* results.
|
||||
*/
|
||||
function initRadiusMapStage(opts) {
|
||||
opts = opts || {};
|
||||
var allEvents = opts.events || [];
|
||||
var originalCenter = opts.center || DEFAULT_CENTER;
|
||||
var maxRangeKm = opts.maxRangeKm || 100;
|
||||
var containerId = opts.containerId || 'mapCanvas';
|
||||
|
||||
var state = { source: originalCenter.slice(), rangeKm: opts.rangeKm || 25, cat: 'all' };
|
||||
|
||||
var result = renderPinMap(containerId, [], {
|
||||
zoomControl: true,
|
||||
attributionControl: true,
|
||||
center: state.source,
|
||||
zoom: opts.zoom || 11,
|
||||
// This map already owns the whole viewport (no surrounding page to
|
||||
// protect from trapped scroll/pinch), so gesture handling would only
|
||||
// make one-finger dragging feel unresponsive for no benefit.
|
||||
gestureHandling: false,
|
||||
onMarkerClick: function (ev) { highlightRow(ev.id); }
|
||||
});
|
||||
var map = result ? result.map : null;
|
||||
var markers = result ? result.markers : {};
|
||||
var clusterGroup = result ? result.clusterGroup : null;
|
||||
|
||||
var sourceMarker = map
|
||||
? L.marker(state.source, { icon: dotIcon('#14140F', true), draggable: true, zIndexOffset: 1000 }).addTo(map)
|
||||
: null;
|
||||
|
||||
function addMarker(marker) {
|
||||
if (clusterGroup) clusterGroup.addLayer(marker);
|
||||
else if (map) marker.addTo(map);
|
||||
}
|
||||
|
||||
function removeMarker(marker) {
|
||||
if (clusterGroup) clusterGroup.removeLayer(marker);
|
||||
else if (map) map.removeLayer(marker);
|
||||
}
|
||||
|
||||
function rebuildMarkers(list) {
|
||||
Object.keys(markers).forEach(function (id) { removeMarker(markers[id]); });
|
||||
markers = {};
|
||||
list.forEach(function (ev) {
|
||||
var marker = buildMarker(ev, function (clicked) { highlightRow(clicked.id); });
|
||||
markers[ev.id] = marker;
|
||||
addMarker(marker);
|
||||
});
|
||||
}
|
||||
|
||||
function highlightRow(id) {
|
||||
document.querySelectorAll('.map-row').forEach(function (r) { r.classList.remove('is-highlighted'); });
|
||||
var row = document.querySelector('.map-row[data-id="' + id + '"]');
|
||||
if (row) { row.classList.add('is-highlighted'); row.scrollIntoView({ block: 'nearest', behavior: 'smooth' }); }
|
||||
}
|
||||
|
||||
function inRange() {
|
||||
return allEvents
|
||||
.filter(function (ev) { return state.cat === 'all' || ev.category === state.cat; })
|
||||
.map(function (ev) { ev._dist = distanceKm(state.source[0], state.source[1], ev.lat, ev.lon); return ev; })
|
||||
.filter(function (ev) { return ev._dist <= state.rangeKm; })
|
||||
.sort(function (a, b) { return a._dist - b._dist; });
|
||||
}
|
||||
|
||||
function updateUrl() {
|
||||
if (!window.history || !window.history.replaceState || !window.URL) return;
|
||||
var url = new URL(window.location.href);
|
||||
url.searchParams.set('lat', state.source[0].toFixed(5));
|
||||
url.searchParams.set('lon', state.source[1].toFixed(5));
|
||||
url.searchParams.set('range', state.rangeKm);
|
||||
window.history.replaceState(null, '', url.toString());
|
||||
}
|
||||
|
||||
function render() {
|
||||
var visible = inRange();
|
||||
rebuildMarkers(visible);
|
||||
|
||||
var legendEl = document.getElementById('legend');
|
||||
if (legendEl) {
|
||||
var seenCats = [];
|
||||
visible.forEach(function (ev) {
|
||||
if (ev.category && seenCats.indexOf(ev.category) === -1) seenCats.push(ev.category);
|
||||
});
|
||||
legendEl.innerHTML = seenCats.slice(0, 8).map(function (cat) {
|
||||
return '<span><span class="dot" style="background:' + categoryMarkerHex(cat) + ';"></span>' + cat + '</span>';
|
||||
}).join('');
|
||||
}
|
||||
|
||||
var statusEl = document.getElementById('locateStatus');
|
||||
if (statusEl) statusEl.textContent = 'Showing events within ' + state.rangeKm + ' km';
|
||||
|
||||
var countEl = document.getElementById('resultCount');
|
||||
if (countEl) countEl.textContent = visible.length + (visible.length === 1 ? ' event' : ' events');
|
||||
|
||||
var panelEl = document.getElementById('panelList');
|
||||
if (panelEl) {
|
||||
panelEl.innerHTML = visible.map(function (ev) {
|
||||
var distLabel = ev._dist < 1 ? Math.round(ev._dist * 1000) : ev._dist.toFixed(1);
|
||||
var distUnit = ev._dist < 1 ? 'm' : 'km';
|
||||
return (
|
||||
'<div class="map-row" data-id="' + ev.id + '" tabindex="0" role="button" aria-label="' + ev.title + '">' +
|
||||
'<div class="dist">' + distLabel + '<span class="u">' + distUnit + '</span></div>' +
|
||||
'<div><div class="name">' + ev.title + '</div><span class="when">' + (ev.venue || '') + '</span></div>' +
|
||||
'<div class="go">→</div>' +
|
||||
'</div>'
|
||||
);
|
||||
}).join('');
|
||||
|
||||
panelEl.querySelectorAll('.map-row').forEach(function (row) {
|
||||
row.addEventListener('click', function () {
|
||||
var id = row.getAttribute('data-id');
|
||||
var ev = visible.filter(function (e) { return String(e.id) === String(id); })[0];
|
||||
if (!ev || !map) return;
|
||||
map.flyTo([ev.lat, ev.lon], 15);
|
||||
var marker = markers[id];
|
||||
if (marker) {
|
||||
if (clusterGroup && clusterGroup.zoomToShowLayer) {
|
||||
clusterGroup.zoomToShowLayer(marker, function () { marker.openPopup(); });
|
||||
} else {
|
||||
marker.openPopup();
|
||||
}
|
||||
}
|
||||
highlightRow(id);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if (map) fitToMarkers(map, markers);
|
||||
updateUrl();
|
||||
}
|
||||
|
||||
// Moving further than the pool's own coverage (maxRangeKm around the
|
||||
// server-resolved center) can't be answered from what's already
|
||||
// loaded — that combination might reach past maxRangeKm even if the
|
||||
// new point itself is inside it, so the check is deliberately
|
||||
// conservative: reload whenever full coverage isn't guaranteed,
|
||||
// rather than risk silently showing an incomplete result.
|
||||
function setSource(lat, lon) {
|
||||
var distFromOriginal = distanceKm(originalCenter[0], originalCenter[1], lat, lon);
|
||||
if (distFromOriginal + state.rangeKm > maxRangeKm) {
|
||||
var url = new URL(window.location.href);
|
||||
url.searchParams.set('lat', lat.toFixed(5));
|
||||
url.searchParams.set('lon', lon.toFixed(5));
|
||||
url.searchParams.set('range', state.rangeKm);
|
||||
window.location.href = url.toString();
|
||||
return;
|
||||
}
|
||||
|
||||
state.source = [lat, lon];
|
||||
if (sourceMarker) sourceMarker.setLatLng(state.source);
|
||||
if (map) map.panTo(state.source);
|
||||
render();
|
||||
}
|
||||
|
||||
if (map) {
|
||||
map.on('click', function (e) { setSource(e.latlng.lat, e.latlng.lng); });
|
||||
}
|
||||
if (sourceMarker) {
|
||||
sourceMarker.on('dragend', function () {
|
||||
var ll = sourceMarker.getLatLng();
|
||||
setSource(ll.lat, ll.lng);
|
||||
});
|
||||
}
|
||||
|
||||
var rangeSelect = document.getElementById('rangeSelect');
|
||||
if (rangeSelect) {
|
||||
rangeSelect.addEventListener('change', function () {
|
||||
state.rangeKm = parseInt(rangeSelect.value, 10) || state.rangeKm;
|
||||
render();
|
||||
});
|
||||
}
|
||||
|
||||
var chipsEl = document.getElementById('catChips');
|
||||
if (chipsEl) {
|
||||
chipsEl.addEventListener('click', function (e) {
|
||||
var btn = e.target.closest('.chip-sm');
|
||||
if (!btn) return;
|
||||
chipsEl.querySelectorAll('.chip-sm').forEach(function (c) { c.classList.remove('is-active'); });
|
||||
btn.classList.add('is-active');
|
||||
state.cat = btn.getAttribute('data-cat');
|
||||
render();
|
||||
});
|
||||
}
|
||||
|
||||
// Nominatim: explicit submit only, never as-you-type — required by
|
||||
// its usage policy (max ~1 req/s, no autocomplete-style querying).
|
||||
var locationForm = document.getElementById('locationSearchForm');
|
||||
if (locationForm) {
|
||||
locationForm.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
var input = document.getElementById('locationSearch');
|
||||
var query = (input.value || '').trim();
|
||||
if (!query) return;
|
||||
var statusEl = document.getElementById('locateStatus');
|
||||
if (statusEl) statusEl.textContent = 'Looking up "' + query + '"…';
|
||||
fetch('https://nominatim.openstreetmap.org/search?format=json&limit=1&q=' + encodeURIComponent(query))
|
||||
.then(function (res) { return res.json(); })
|
||||
.then(function (results) {
|
||||
if (!results || !results.length) {
|
||||
if (statusEl) statusEl.textContent = 'Could not find "' + query + '"';
|
||||
return;
|
||||
}
|
||||
setSource(parseFloat(results[0].lat), parseFloat(results[0].lon));
|
||||
})
|
||||
.catch(function () {
|
||||
if (statusEl) statusEl.textContent = 'Location search failed';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function requestLocation() {
|
||||
var statusEl = document.getElementById('locateStatus');
|
||||
if (!navigator.geolocation) {
|
||||
if (statusEl) statusEl.textContent = 'Location not supported by your browser';
|
||||
return;
|
||||
}
|
||||
if (statusEl) statusEl.textContent = 'Finding you…';
|
||||
navigator.geolocation.getCurrentPosition(function (pos) {
|
||||
setSource(pos.coords.latitude, pos.coords.longitude);
|
||||
}, function () {
|
||||
if (statusEl) statusEl.textContent = "Couldn't get your location";
|
||||
}, { timeout: 8000 });
|
||||
}
|
||||
|
||||
var locateBtn = document.getElementById('locateBtn');
|
||||
if (locateBtn) locateBtn.addEventListener('click', requestLocation);
|
||||
|
||||
if (navigator.permissions && navigator.permissions.query) {
|
||||
navigator.permissions.query({ name: 'geolocation' }).then(function (status) {
|
||||
if (status.state === 'granted') requestLocation();
|
||||
}).catch(function () {});
|
||||
}
|
||||
|
||||
render();
|
||||
|
||||
return { map: map };
|
||||
}
|
||||
|
||||
window.Vindn = window.Vindn || {};
|
||||
window.Vindn.categoryColor = categoryColor;
|
||||
window.Vindn.categoryMarkerHex = categoryMarkerHex;
|
||||
window.Vindn.dotIcon = dotIcon;
|
||||
window.Vindn.distanceKm = distanceKm;
|
||||
window.Vindn.renderPinMap = renderPinMap;
|
||||
window.Vindn.readEmbeddedJson = readEmbeddedJson;
|
||||
window.Vindn.initMapStage = initMapStage;
|
||||
window.Vindn.initRadiusMapStage = initRadiusMapStage;
|
||||
})(window);
|
||||
Reference in new issue
Block a user