Initial

frontend/3p/leaflet/leaflet.css

@@ -0,0 +1,661 @@
+/* required styles */
+
+.leaflet-pane,
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-tile-container,
+.leaflet-pane > svg,
+.leaflet-pane > canvas,
+.leaflet-zoom-box,
+.leaflet-image-layer,
+.leaflet-layer {
+	position: absolute;
+	left: 0;
+	top: 0;
+	}
+.leaflet-container {
+	overflow: hidden;
+	}
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+	-webkit-user-select: none;
+	   -moz-user-select: none;
+	        user-select: none;
+	  -webkit-user-drag: none;
+	}
+/* Prevents IE11 from highlighting tiles in blue */
+.leaflet-tile::selection {
+	background: transparent;
+}
+/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
+.leaflet-safari .leaflet-tile {
+	image-rendering: -webkit-optimize-contrast;
+	}
+/* hack that prevents hw layers "stretching" when loading new tiles */
+.leaflet-safari .leaflet-tile-container {
+	width: 1600px;
+	height: 1600px;
+	-webkit-transform-origin: 0 0;
+	}
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+	display: block;
+	}
+/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
+/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
+.leaflet-container .leaflet-overlay-pane svg {
+	max-width: none !important;
+	max-height: none !important;
+	}
+.leaflet-container .leaflet-marker-pane img,
+.leaflet-container .leaflet-shadow-pane img,
+.leaflet-container .leaflet-tile-pane img,
+.leaflet-container img.leaflet-image-layer,
+.leaflet-container .leaflet-tile {
+	max-width: none !important;
+	max-height: none !important;
+	width: auto;
+	padding: 0;
+	}
+
+.leaflet-container img.leaflet-tile {
+	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
+	mix-blend-mode: plus-lighter;
+}
+
+.leaflet-container.leaflet-touch-zoom {
+	-ms-touch-action: pan-x pan-y;
+	touch-action: pan-x pan-y;
+	}
+.leaflet-container.leaflet-touch-drag {
+	-ms-touch-action: pinch-zoom;
+	/* Fallback for FF which doesn't support pinch-zoom */
+	touch-action: none;
+	touch-action: pinch-zoom;
+}
+.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
+	-ms-touch-action: none;
+	touch-action: none;
+}
+.leaflet-container {
+	-webkit-tap-highlight-color: transparent;
+}
+.leaflet-container a {
+	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
+}
+.leaflet-tile {
+	filter: inherit;
+	visibility: hidden;
+	}
+.leaflet-tile-loaded {
+	visibility: inherit;
+	}
+.leaflet-zoom-box {
+	width: 0;
+	height: 0;
+	-moz-box-sizing: border-box;
+	     box-sizing: border-box;
+	z-index: 800;
+	}
+/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
+.leaflet-overlay-pane svg {
+	-moz-user-select: none;
+	}
+
+.leaflet-pane         { z-index: 400; }
+
+.leaflet-tile-pane    { z-index: 200; }
+.leaflet-overlay-pane { z-index: 400; }
+.leaflet-shadow-pane  { z-index: 500; }
+.leaflet-marker-pane  { z-index: 600; }
+.leaflet-tooltip-pane   { z-index: 650; }
+.leaflet-popup-pane   { z-index: 700; }
+
+.leaflet-map-pane canvas { z-index: 100; }
+.leaflet-map-pane svg    { z-index: 200; }
+
+.leaflet-vml-shape {
+	width: 1px;
+	height: 1px;
+	}
+.lvml {
+	behavior: url(#default#VML);
+	display: inline-block;
+	position: absolute;
+	}
+
+
+/* control positioning */
+
+.leaflet-control {
+	position: relative;
+	z-index: 800;
+	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+	pointer-events: auto;
+	}
+.leaflet-top,
+.leaflet-bottom {
+	position: absolute;
+	z-index: 1000;
+	pointer-events: none;
+	}
+.leaflet-top {
+	top: 0;
+	}
+.leaflet-right {
+	right: 0;
+	}
+.leaflet-bottom {
+	bottom: 0;
+	}
+.leaflet-left {
+	left: 0;
+	}
+.leaflet-control {
+	float: left;
+	clear: both;
+	}
+.leaflet-right .leaflet-control {
+	float: right;
+	}
+.leaflet-top .leaflet-control {
+	margin-top: 10px;
+	}
+.leaflet-bottom .leaflet-control {
+	margin-bottom: 10px;
+	}
+.leaflet-left .leaflet-control {
+	margin-left: 10px;
+	}
+.leaflet-right .leaflet-control {
+	margin-right: 10px;
+	}
+
+
+/* zoom and fade animations */
+
+.leaflet-fade-anim .leaflet-popup {
+	opacity: 0;
+	-webkit-transition: opacity 0.2s linear;
+	   -moz-transition: opacity 0.2s linear;
+	        transition: opacity 0.2s linear;
+	}
+.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
+	opacity: 1;
+	}
+.leaflet-zoom-animated {
+	-webkit-transform-origin: 0 0;
+	    -ms-transform-origin: 0 0;
+	        transform-origin: 0 0;
+	}
+svg.leaflet-zoom-animated {
+	will-change: transform;
+}
+
+.leaflet-zoom-anim .leaflet-zoom-animated {
+	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
+	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
+	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
+	}
+.leaflet-zoom-anim .leaflet-tile,
+.leaflet-pan-anim .leaflet-tile {
+	-webkit-transition: none;
+	   -moz-transition: none;
+	        transition: none;
+	}
+
+.leaflet-zoom-anim .leaflet-zoom-hide {
+	visibility: hidden;
+	}
+
+
+/* cursors */
+
+.leaflet-interactive {
+	cursor: pointer;
+	}
+.leaflet-grab {
+	cursor: -webkit-grab;
+	cursor:    -moz-grab;
+	cursor:         grab;
+	}
+.leaflet-crosshair,
+.leaflet-crosshair .leaflet-interactive {
+	cursor: crosshair;
+	}
+.leaflet-popup-pane,
+.leaflet-control {
+	cursor: auto;
+	}
+.leaflet-dragging .leaflet-grab,
+.leaflet-dragging .leaflet-grab .leaflet-interactive,
+.leaflet-dragging .leaflet-marker-draggable {
+	cursor: move;
+	cursor: -webkit-grabbing;
+	cursor:    -moz-grabbing;
+	cursor:         grabbing;
+	}
+
+/* marker & overlays interactivity */
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-image-layer,
+.leaflet-pane > svg path,
+.leaflet-tile-container {
+	pointer-events: none;
+	}
+
+.leaflet-marker-icon.leaflet-interactive,
+.leaflet-image-layer.leaflet-interactive,
+.leaflet-pane > svg path.leaflet-interactive,
+svg.leaflet-image-layer.leaflet-interactive path {
+	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+	pointer-events: auto;
+	}
+
+/* visual tweaks */
+
+.leaflet-container {
+	background: #ddd;
+	outline-offset: 1px;
+	}
+.leaflet-container a {
+	color: #0078A8;
+	}
+.leaflet-zoom-box {
+	border: 2px dotted #38f;
+	background: rgba(255,255,255,0.5);
+	}
+
+
+/* general typography */
+.leaflet-container {
+	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+	font-size: 0.75rem;
+	line-height: 1.5;
+	}
+
+
+/* general toolbar styles */
+
+.leaflet-bar {
+	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
+	border-radius: 4px;
+	}
+.leaflet-bar a {
+	background-color: #fff;
+	border-bottom: 1px solid #ccc;
+	width: 26px;
+	height: 26px;
+	line-height: 26px;
+	display: block;
+	text-align: center;
+	text-decoration: none;
+	color: black;
+	}
+.leaflet-bar a,
+.leaflet-control-layers-toggle {
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	display: block;
+	}
+.leaflet-bar a:hover,
+.leaflet-bar a:focus {
+	background-color: #f4f4f4;
+	}
+.leaflet-bar a:first-child {
+	border-top-left-radius: 4px;
+	border-top-right-radius: 4px;
+	}
+.leaflet-bar a:last-child {
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+	border-bottom: none;
+	}
+.leaflet-bar a.leaflet-disabled {
+	cursor: default;
+	background-color: #f4f4f4;
+	color: #bbb;
+	}
+
+.leaflet-touch .leaflet-bar a {
+	width: 30px;
+	height: 30px;
+	line-height: 30px;
+	}
+.leaflet-touch .leaflet-bar a:first-child {
+	border-top-left-radius: 2px;
+	border-top-right-radius: 2px;
+	}
+.leaflet-touch .leaflet-bar a:last-child {
+	border-bottom-left-radius: 2px;
+	border-bottom-right-radius: 2px;
+	}
+
+/* zoom control */
+
+.leaflet-control-zoom-in,
+.leaflet-control-zoom-out {
+	font: bold 18px 'Lucida Console', Monaco, monospace;
+	text-indent: 1px;
+	}
+
+.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
+	font-size: 22px;
+	}
+
+
+/* layers control */
+
+.leaflet-control-layers {
+	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
+	background: #fff;
+	border-radius: 5px;
+	}
+.leaflet-control-layers-toggle {
+	background-image: url(images/layers.png);
+	width: 36px;
+	height: 36px;
+	}
+.leaflet-retina .leaflet-control-layers-toggle {
+	background-image: url(images/layers-2x.png);
+	background-size: 26px 26px;
+	}
+.leaflet-touch .leaflet-control-layers-toggle {
+	width: 44px;
+	height: 44px;
+	}
+.leaflet-control-layers .leaflet-control-layers-list,
+.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
+	display: none;
+	}
+.leaflet-control-layers-expanded .leaflet-control-layers-list {
+	display: block;
+	position: relative;
+	}
+.leaflet-control-layers-expanded {
+	padding: 6px 10px 6px 6px;
+	color: #333;
+	background: #fff;
+	}
+.leaflet-control-layers-scrollbar {
+	overflow-y: scroll;
+	overflow-x: hidden;
+	padding-right: 5px;
+	}
+.leaflet-control-layers-selector {
+	margin-top: 2px;
+	position: relative;
+	top: 1px;
+	}
+.leaflet-control-layers label {
+	display: block;
+	font-size: 13px;
+	font-size: 1.08333em;
+	}
+.leaflet-control-layers-separator {
+	height: 0;
+	border-top: 1px solid #ddd;
+	margin: 5px -10px 5px -6px;
+	}
+
+/* Default icon URLs */
+.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
+	background-image: url(images/marker-icon.png);
+	}
+
+
+/* attribution and scale controls */
+
+.leaflet-container .leaflet-control-attribution {
+	background: #fff;
+	background: rgba(255, 255, 255, 0.8);
+	margin: 0;
+	}
+.leaflet-control-attribution,
+.leaflet-control-scale-line {
+	padding: 0 5px;
+	color: #333;
+	line-height: 1.4;
+	}
+.leaflet-control-attribution a {
+	text-decoration: none;
+	}
+.leaflet-control-attribution a:hover,
+.leaflet-control-attribution a:focus {
+	text-decoration: underline;
+	}
+.leaflet-attribution-flag {
+	display: inline !important;
+	vertical-align: baseline !important;
+	width: 1em;
+	height: 0.6669em;
+	}
+.leaflet-left .leaflet-control-scale {
+	margin-left: 5px;
+	}
+.leaflet-bottom .leaflet-control-scale {
+	margin-bottom: 5px;
+	}
+.leaflet-control-scale-line {
+	border: 2px solid #777;
+	border-top: none;
+	line-height: 1.1;
+	padding: 2px 5px 1px;
+	white-space: nowrap;
+	-moz-box-sizing: border-box;
+	     box-sizing: border-box;
+	background: rgba(255, 255, 255, 0.8);
+	text-shadow: 1px 1px #fff;
+	}
+.leaflet-control-scale-line:not(:first-child) {
+	border-top: 2px solid #777;
+	border-bottom: none;
+	margin-top: -2px;
+	}
+.leaflet-control-scale-line:not(:first-child):not(:last-child) {
+	border-bottom: 2px solid #777;
+	}
+
+.leaflet-touch .leaflet-control-attribution,
+.leaflet-touch .leaflet-control-layers,
+.leaflet-touch .leaflet-bar {
+	box-shadow: none;
+	}
+.leaflet-touch .leaflet-control-layers,
+.leaflet-touch .leaflet-bar {
+	border: 2px solid rgba(0,0,0,0.2);
+	background-clip: padding-box;
+	}
+
+
+/* popup */
+
+.leaflet-popup {
+	position: absolute;
+	text-align: center;
+	margin-bottom: 20px;
+	}
+.leaflet-popup-content-wrapper {
+	padding: 1px;
+	text-align: left;
+	border-radius: 12px;
+	}
+.leaflet-popup-content {
+	margin: 13px 24px 13px 20px;
+	line-height: 1.3;
+	font-size: 13px;
+	font-size: 1.08333em;
+	min-height: 1px;
+	}
+.leaflet-popup-content p {
+	margin: 17px 0;
+	margin: 1.3em 0;
+	}
+.leaflet-popup-tip-container {
+	width: 40px;
+	height: 20px;
+	position: absolute;
+	left: 50%;
+	margin-top: -1px;
+	margin-left: -20px;
+	overflow: hidden;
+	pointer-events: none;
+	}
+.leaflet-popup-tip {
+	width: 17px;
+	height: 17px;
+	padding: 1px;
+
+	margin: -10px auto 0;
+	pointer-events: auto;
+
+	-webkit-transform: rotate(45deg);
+	   -moz-transform: rotate(45deg);
+	    -ms-transform: rotate(45deg);
+	        transform: rotate(45deg);
+	}
+.leaflet-popup-content-wrapper,
+.leaflet-popup-tip {
+	background: white;
+	color: #333;
+	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
+	}
+.leaflet-container a.leaflet-popup-close-button {
+	position: absolute;
+	top: 0;
+	right: 0;
+	border: none;
+	text-align: center;
+	width: 24px;
+	height: 24px;
+	font: 16px/24px Tahoma, Verdana, sans-serif;
+	color: #757575;
+	text-decoration: none;
+	background: transparent;
+	}
+.leaflet-container a.leaflet-popup-close-button:hover,
+.leaflet-container a.leaflet-popup-close-button:focus {
+	color: #585858;
+	}
+.leaflet-popup-scrolled {
+	overflow: auto;
+	}
+
+.leaflet-oldie .leaflet-popup-content-wrapper {
+	-ms-zoom: 1;
+	}
+.leaflet-oldie .leaflet-popup-tip {
+	width: 24px;
+	margin: 0 auto;
+
+	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
+	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
+	}
+
+.leaflet-oldie .leaflet-control-zoom,
+.leaflet-oldie .leaflet-control-layers,
+.leaflet-oldie .leaflet-popup-content-wrapper,
+.leaflet-oldie .leaflet-popup-tip {
+	border: 1px solid #999;
+	}
+
+
+/* div icon */
+
+.leaflet-div-icon {
+	background: #fff;
+	border: 1px solid #666;
+	}
+
+
+/* Tooltip */
+/* Base styles for the element that has a tooltip */
+.leaflet-tooltip {
+	position: absolute;
+	padding: 6px;
+	background-color: #fff;
+	border: 1px solid #fff;
+	border-radius: 3px;
+	color: #222;
+	white-space: nowrap;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	pointer-events: none;
+	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
+	}
+.leaflet-tooltip.leaflet-interactive {
+	cursor: pointer;
+	pointer-events: auto;
+	}
+.leaflet-tooltip-top:before,
+.leaflet-tooltip-bottom:before,
+.leaflet-tooltip-left:before,
+.leaflet-tooltip-right:before {
+	position: absolute;
+	pointer-events: none;
+	border: 6px solid transparent;
+	background: transparent;
+	content: "";
+	}
+
+/* Directions */
+
+.leaflet-tooltip-bottom {
+	margin-top: 6px;
+}
+.leaflet-tooltip-top {
+	margin-top: -6px;
+}
+.leaflet-tooltip-bottom:before,
+.leaflet-tooltip-top:before {
+	left: 50%;
+	margin-left: -6px;
+	}
+.leaflet-tooltip-top:before {
+	bottom: 0;
+	margin-bottom: -12px;
+	border-top-color: #fff;
+	}
+.leaflet-tooltip-bottom:before {
+	top: 0;
+	margin-top: -12px;
+	margin-left: -6px;
+	border-bottom-color: #fff;
+	}
+.leaflet-tooltip-left {
+	margin-left: -6px;
+}
+.leaflet-tooltip-right {
+	margin-left: 6px;
+}
+.leaflet-tooltip-left:before,
+.leaflet-tooltip-right:before {
+	top: 50%;
+	margin-top: -6px;
+	}
+.leaflet-tooltip-left:before {
+	right: 0;
+	margin-right: -12px;
+	border-left-color: #fff;
+	}
+.leaflet-tooltip-right:before {
+	left: 0;
+	margin-left: -12px;
+	border-right-color: #fff;
+	}
+
+/* Printing */
+
+@media print {
+	/* Prevent printers from removing background-images of controls. */
+	.leaflet-control {
+		-webkit-print-color-adjust: exact;
+		print-color-adjust: exact;
+		}
+	}

frontend/3p/leaflet/locate/L.Control.Locate.css

@@ -0,0 +1,63 @@
+.leaflet-control-locate a {
+  cursor: pointer;
+}
+.leaflet-control-locate a .leaflet-control-locate-location-arrow {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin: 7px;
+  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="black" d="M445 4 29 195c-48 23-32 93 19 93h176v176c0 51 70 67 93 19L508 67c16-38-25-79-63-63z"/></svg>');
+}
+.leaflet-control-locate a .leaflet-control-locate-spinner {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin: 7px;
+  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="black" d="M304 48a48 48 0 1 1-96 0 48 48 0 0 1 96 0zm-48 368a48 48 0 1 0 0 96 48 48 0 0 0 0-96zm208-208a48 48 0 1 0 0 96 48 48 0 0 0 0-96zM96 256a48 48 0 1 0-96 0 48 48 0 0 0 96 0zm13 99a48 48 0 1 0 0 96 48 48 0 0 0 0-96zm294 0a48 48 0 1 0 0 96 48 48 0 0 0 0-96zM109 61a48 48 0 1 0 0 96 48 48 0 0 0 0-96z"/></svg>');
+  animation: leaflet-control-locate-spin 2s linear infinite;
+}
+.leaflet-control-locate.active a .leaflet-control-locate-location-arrow {
+  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="rgb(32, 116, 182)" d="M445 4 29 195c-48 23-32 93 19 93h176v176c0 51 70 67 93 19L508 67c16-38-25-79-63-63z"/></svg>');
+}
+.leaflet-control-locate.following a .leaflet-control-locate-location-arrow {
+  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="rgb(252, 132, 40)" d="M445 4 29 195c-48 23-32 93 19 93h176v176c0 51 70 67 93 19L508 67c16-38-25-79-63-63z"/></svg>');
+}
+
+.leaflet-touch .leaflet-bar .leaflet-locate-text-active {
+  width: 100%;
+  max-width: 200px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  padding: 0 10px;
+}
+.leaflet-touch .leaflet-bar .leaflet-locate-text-active .leaflet-locate-icon {
+  padding: 0 5px 0 0;
+}
+
+.leaflet-control-locate-location circle {
+  animation: leaflet-control-locate-throb 4s ease infinite;
+}
+
+@keyframes leaflet-control-locate-throb {
+  0% {
+    stroke-width: 1;
+  }
+  50% {
+    stroke-width: 3;
+    transform: scale(0.8, 0.8);
+  }
+  100% {
+    stroke-width: 1;
+  }
+}
+@keyframes leaflet-control-locate-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/*# sourceMappingURL=L.Control.Locate.css.map */

frontend/data

@@ -0,0 +1 @@
+../backend/data

frontend/ico/browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+  <msapplication>
+    <tile>
+      <square70x70logo src="/ico/70.png"/>
+      <square150x150logo src="/ico/150.png"/>
+      <square310x310logo src="/ico/310.png"/>
+      <TileImage src="/ico/150.png"/>
+      <TileColor>#d1e7dd</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>

frontend/ico/favicon.svg

@@ -0,0 +1,14 @@
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+<g fill="#fff" stroke="#000" stroke-width="2">
+<polygon id="tt" points="90,31 27,31 24,27 30,24 32,15 44,16 41,10 50,2"/>
+<rect id="t3" x="67" y="31" width="16" height="6"/>
+<rect id="t2" x="42" y="31" width="16" height="6"/>
+<rect id="m3" x="70" y="37" width="10" height="36"/>
+<rect id="m2" x="45" y="37" width="10" height="36"/>
+<path id="m1" d="M29,73h-8v-12l8-7z"/>
+<rect id="b3" x="67" y="73" width="16" height="6"/>
+<rect id="b2" x="42" y="73" width="16" height="6"/>
+<rect id="b1" x="17" y="73" width="16" height="6"/>
+<rect id="g0" x="8" y="79" width="84" height="10"/>
+<rect id="gg" x="1" y="89" width="98" height="10"/>
+</g></svg>

frontend/ico/manifest.json

@@ -0,0 +1,18 @@
+{
+  "name": "Leerstand",
+  "short_name": "Leerstand",
+  "background_color": "#d1e7dd",
+  "display": "fullscreen",
+  "icons": [
+    {
+      "src": "/ico/192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/ico/512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

frontend/icons.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
+<symbol id="mark" viewBox="0 0 69 110">
+<path stroke="#000" stroke-width="3" d="m34.5 1.5c-18.2 0-33 14.8-33 33 0 5.3 1.3 10.4 3.5 14.8 5.4 10.8 29.5 57.7 29.5 57.7s24.1-47 29.5-57.7c2.2-4.5 3.5-9.5 3.5-14.8 0-18.2-14.8-33-33-33zm0 49.5c-9.1 0-16.5-7.4-16.5-16.5s7.4-16.5 16.5-16.5 16.5 7.4 16.5 16.5-7.4 16.5-16.5 16.5z"/>
+</symbol>
+<symbol id="pin" viewBox="0 0 60 100">
+<path fill="#000" d="m25 58v42h10v-42z"/>
+<circle stroke="#000" stroke-width="2" cx="30" cy="30" r="27.5"/>
+<path fill="#fff" d="m30 14.5c.5 0 1.8-.5 1.8-1.8s-1.3-1.8-1.8-1.8c-5.4 0-10.1 1.9-13.9 5.7s-5.7 8.5-5.7 13.9c0 .5.6 1.8 1.8 1.8s1.8-1.3 1.8-1.8c0-4.4 1.6-8.2 4.7-11.4s6.9-4.6 11.3-4.6z"/>
+</symbol>
+</svg>

frontend/index.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+  <meta charset="utf-8">
+  <title>Leerstand</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="shortcut icon" href="/favicon.ico">
+  <link rel="icon" type="image/png" sizes="32x32" href="/ico/32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/ico/16.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="/ico/apple-touch-icon.png">
+  <link rel="manifest" href="/ico/manifest.json">
+  <meta name="msapplication-config" content="/ico/browserconfig.xml">
+
+  <script src="/3p/leaflet/leaflet.js"></script>
+  <script src="/3p/leaflet/locate/L.Control.Locate.min.js"></script>
+  <script src="/script.js"></script>
+  <link rel="stylesheet" href="/3p/leaflet/leaflet.css" />
+  <link rel="stylesheet" href="/3p/leaflet/locate/L.Control.Locate.css" />
+  <link rel="stylesheet" href="/style.css" />
+</head>
+
+<body>
+  <div id="loading">Loading ...</div>
+  <div id="popup" onclick="event.target === this && closePopup()" hidden>
+    <div class="container">
+      <a class="close" onclick="closePopup()">⨉</a>
+      <h3></h3>
+      <p id="_desc"></p>
+      <p><em>Leerstand:</em> <b id="_since"></b></p>
+      <img src="" alt="Kein Bild" />
+    </div>
+  </div>
+  <div id="overlay">
+    <span id="city-counter" hidden></span>
+    <select id="city-select" hidden onchange="this.value ? showCity(this.value): showCityOverview()">
+      <option value="">-----</option>
+    </select>
+  </div>
+  <div id="map"></div>
+  <script defer>start()</script>
+</body>
+
+</html>

frontend/script.js

@@ -0,0 +1,225 @@
+const DATA_ROOT = '/data/';
+let MAP = null;
+let LAYER = null;
+let CITIES = {};
+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 loadCities() {
+    CITIES = {};
+    for (const city of await loadJson(DATA_ROOT + 'cities.json')) {
+        CITIES[city.id] = city;
+    }
+}
+
+async function loadCity(cityId) {
+    PLACES = {};
+    for (const place of await loadJson(DATA_ROOT + cityId + '/data.json')) {
+        if (since(place.until) > 0) {
+            continue; // not vacant anymore
+        }
+        PLACES[place.id] = place;
+    }
+    updateCounter();
+}
+
+// ---------------------
+//  Helper
+// ---------------------
+
+function getCityId(slug) {
+    for (const city of Object.values(CITIES)) {
+        if (city.slug === slug) {
+            return city.id;
+        }
+    }
+    return null;
+}
+
+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)
+}
+
+function makeCityMarker(city) {
+    return L.marker(L.latLng(city.loc), {
+        pid: city.id,
+        title: city.name,
+        icon: makeIcon('pin pin-city'),
+    }).on('click', cityPinClick);
+}
+
+async function cityPinClick(pin) {
+    await showCity(pin.target.options.pid);
+}
+
+// ---------------------
+//  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 = location.hash.split('|')[0] + (hide ? '' : '|' + placeId);
+    document.title = document.title.split(' "', 1)[0] + (hide ? '' : ' "' + place.addr + '"');
+}
+
+function setCity(city) {
+    document.getElementById('city-select').value = city ? city.id : '';
+    location.hash = city ? city.slug : '';
+    document.title = document.title.split(' in ', 1)[0] + (city ? ' in ' + city.name : '');
+}
+
+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> &lt; 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 initCities() {
+    const select = document.getElementById('city-select');
+    while (select.options.length > 1) {
+        select.options.remove(1);
+    }
+    for (const city of Object.values(CITIES)) {
+        const opt = document.createElement('option');
+        opt.value = city.id;
+        opt.innerText = city.name;
+        select.add(opt);
+    }
+    select.hidden = false;
+}
+
+// ---------------------
+//  Interactive
+// ---------------------
+
+function showCityOverview() {
+    LAYER.clearLayers();
+    MAP.setView(DEFAULT_CENTER, DEFAULT_ZOOM);
+    setCity(null);
+    PLACES = {};
+    updateCounter();
+
+    for (const city of Object.values(CITIES)) {
+        makeCityMarker(city).addTo(LAYER);
+    }
+}
+
+async function showCity(cityId) {
+    const city = CITIES[cityId];
+    LAYER.clearLayers();
+    MAP.setView(city.loc, city.zoom);
+    setCity(city);
+    await loadCity(cityId);
+
+    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 loadCities();
+    initCities();
+
+    const [city_slug, place_id] = location.hash.substring(1).split('|');
+    const city_id = city_slug ? getCityId(city_slug) : null;
+    if (city_id) {
+        await showCity(city_id);
+        if (place_id) {
+            setPlace(place_id);
+        }
+    } else {
+        const available_cities = Object.keys(CITIES);
+        if (available_cities.length === 1) {
+            await showCity(available_cities[0]);
+        } else {
+            showCityOverview();
+        }
+    }
+    document.getElementById('loading').hidden = true;
+}

frontend/style.css

@@ -0,0 +1,121 @@
+html, body {
+  height: 100%;
+  margin: 0;
+  font-family: sans-serif;
+}
+
+#loading {
+  z-index: 9001;
+  position: absolute;
+  background: #0009;
+  width: 100%;
+  height: 100%;
+  color: white;
+  font-size: 2em;
+  text-align: center;
+  line-height: 100vh;
+}
+
+#map {
+  width: 100%;
+  height: 100%;
+}
+
+#overlay {
+  z-index: 2000;
+  position: absolute;
+  right: .5em;
+  top: .5em;
+}
+#city-counter {
+  background: #FFFA;
+  color: #666;
+  padding: 4px 6px 2px;
+  border-radius: 8px;
+  font-size: smaller;
+}
+
+.pin svg {
+  filter: drop-shadow(0 0 5px #888);
+  width: 100%;
+  height: 100%;
+}
+
+#popup {
+  z-index: 3000;
+  position: absolute;
+  background: #0009;
+  width: 100%;
+  height: 100%;
+  overflow-x: auto;
+}
+#popup .container {
+  background: white;
+  padding: 8px 12px;
+  margin: 20px auto;
+  max-width: 600px;
+  border-radius: 8px;
+}
+#popup h3 {
+  margin-top: 4px;
+  border-bottom: 1px solid gray;
+  line-height: 1.5;
+}
+#popup .close {
+  float: right;
+  cursor: pointer;
+  padding: 4px 8px;
+}
+#popup .close:hover {
+  font-weight: 900;
+}
+#popup img {
+  display: inline-block;
+  width: 100%;
+  /* no-img fallback */
+  line-height: 120px;
+  background: #666;
+  color: white;
+  text-align: center;
+  font-weight: 100;
+  font-size: 24px;
+}
+
+@media(max-width: 750px) {
+  #popup .container {
+    margin: unset;
+    max-width: 100%;
+    min-height: calc(100% - 2*8px);
+    border-radius: unset;
+  }
+  #popup .close {
+    font-size: 1.5em;
+  }
+  #popup h3 {
+    font-size: 1.5em;
+  }
+}
+
+.pin-city {
+  fill-opacity: 0;
+}
+.fc0 {
+  fill: #FFF;
+}
+.fc1, .fc2 {
+  fill: #EBB;
+}
+.fc3, .fc4 {
+  fill: #D66;
+}
+.fc5, .fc6 {
+  fill: #B22;
+}
+.fc7 {
+  fill: #800;
+}
+
+.leaflet-control-attribution svg, .leaflet-control-attribution rect {
+  width: .9em;
+  height: .9em;
+}