146 lines
3.9 KiB
JavaScript
146 lines
3.9 KiB
JavaScript
const DATA_ROOT = '/data/';
|
||
let MAP = null;
|
||
let LAYER = null;
|
||
let PLACES = {};
|
||
const DEFAULT_CENTER = [51.2, 9];
|
||
const DEFAULT_ZOOM = 6;
|
||
|
||
// ---------------------
|
||
// Load data
|
||
// ---------------------
|
||
|
||
async function loadJson(url) {
|
||
const res = await fetch(url);
|
||
return await res.json();
|
||
}
|
||
|
||
async function loadData() {
|
||
PLACES = {};
|
||
for (const place of await loadJson(DATA_ROOT + 'data.json')) {
|
||
if (since(place.until) > 0) {
|
||
continue; // not vacant anymore
|
||
}
|
||
PLACES[place.id] = place;
|
||
}
|
||
updateCounter();
|
||
}
|
||
|
||
// ---------------------
|
||
// Helper
|
||
// ---------------------
|
||
|
||
function since(date) {
|
||
if (!date) {
|
||
return 0;
|
||
}
|
||
const [y, m] = (date + '-01').split('-');
|
||
const diff = Date.now() - new Date(y, m - 1);
|
||
return Math.floor(diff / (1000 * 60 * 60 * 24));
|
||
}
|
||
|
||
function makeIcon(className) {
|
||
return L.divIcon({
|
||
className: className,
|
||
html: '<svg><use href="/icons.svg#mark"></use></svg>',
|
||
iconSize: [34, 55],
|
||
iconAnchor: [17, 55],
|
||
popupAnchor: [0, -20],
|
||
tooltipAnchor: [0, -20],
|
||
offset: [10, 20],
|
||
});
|
||
}
|
||
|
||
function makeMarker(place) {
|
||
const vacantYears = Math.floor(since(place.since) / 365);
|
||
return L.marker(L.latLng(place.loc), {
|
||
pid: place.id,
|
||
title: place.addr,
|
||
icon: makeIcon('pin fc' + Math.min(vacantYears, 7)),
|
||
}).on('click', clickPin);
|
||
}
|
||
|
||
function clickPin(pin) {
|
||
setPlace(pin.target.options.pid);
|
||
}
|
||
|
||
function closePopup(e) {
|
||
setPlace(null)
|
||
}
|
||
|
||
// ---------------------
|
||
// UI updates
|
||
// ---------------------
|
||
|
||
function setPlace(placeId) {
|
||
const hide = !placeId;
|
||
const place = hide ? {} : PLACES[placeId];
|
||
const div = document.getElementById('popup');
|
||
div.hidden = hide;
|
||
div.querySelector('img').src = place.img || '';
|
||
div.querySelector('h3').innerText = place.addr || '';
|
||
div.querySelector('#_since').innerText = place.until
|
||
? 'von ' + place.since + ' bis ' + place.until
|
||
: place.since ? 'seit ' + place.since : '???';
|
||
div.querySelector('#_desc').innerText = place.desc || '';
|
||
|
||
location.hash = hide ? '' : placeId;
|
||
document.title = document.title.split(' "', 1)[0] + (hide ? '' : ' "' + place.addr + '"');
|
||
}
|
||
|
||
function updateCounter() {
|
||
const total = Object.keys(PLACES).length;
|
||
const counter = document.getElementById('city-counter');
|
||
counter.innerText = total;
|
||
counter.hidden = total === 0;
|
||
}
|
||
|
||
// ---------------------
|
||
// Initialize
|
||
// ---------------------
|
||
|
||
function initMap() {
|
||
const osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||
attribution: [
|
||
'<svg class="fc0"><rect/></svg> < 1 Jahr',
|
||
'<svg class="fc1"><rect/></svg> 1–3 J.',
|
||
'<svg class="fc3"><rect/></svg> 3–5 J.',
|
||
'<svg class="fc5"><rect/></svg> 5–7 J.',
|
||
'<svg class="fc7"><rect/></svg> 7+ Jahre',
|
||
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
|
||
'<a href="/imprint.html">Impressum</a>',
|
||
].join(' | '),
|
||
});
|
||
MAP = L.map('map', {
|
||
layers: [osm], center: DEFAULT_CENTER, zoom: DEFAULT_ZOOM,
|
||
zoomSnap: 0.5,
|
||
});
|
||
LAYER = L.layerGroup([]).addTo(MAP);
|
||
L.control.locate({ showPopup: false }).addTo(MAP);
|
||
}
|
||
|
||
function initPins() {
|
||
var bounds = L.latLngBounds();
|
||
for (const place of Object.values(PLACES)) {
|
||
const marker = makeMarker(place).addTo(LAYER);
|
||
bounds.extend(marker.getLatLng());
|
||
}
|
||
// adjust bounds & zoom
|
||
if (bounds.isValid()) {
|
||
MAP.fitBounds(bounds, { padding: [50, 50] });
|
||
}
|
||
}
|
||
|
||
async function start() {
|
||
initMap();
|
||
await loadData();
|
||
initPins();
|
||
// LAYER.clearLayers();
|
||
// MAP.setView(city.loc, city.zoom);
|
||
|
||
const place_id = location.hash.substring(1);
|
||
if (place_id) {
|
||
setPlace(place_id);
|
||
}
|
||
document.getElementById('loading').hidden = true;
|
||
}
|