added OUT_OF_ORDER state to maintenance map, added js/css/fonts/images for archival purposes

website/maintenance-map/css/L.Control.Locate.min.css

@@ -0,0 +1,2 @@
+.leaflet-control-locate a{font-size:1.4em;color:#444;cursor:pointer}.leaflet-control-locate.active a{color:#2074b6}.leaflet-control-locate.active.following a{color:#fc8428}.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}}
+/*# sourceMappingURL=L.Control.Locate.min.css.map */

website/maintenance-map/css/leaflet.awesome-markers.css

@@ -0,0 +1,124 @@
+/*
+Author: L. Voogdt
+License: MIT
+Version: 1.0
+*/
+
+/* Marker setup */
+.awesome-marker {
+  background: url('images/markers-soft.png') no-repeat 0 0;
+  width: 35px;
+  height: 46px;
+  position:absolute;
+  left:0;
+  top:0;
+  display: block;
+  text-align: center;
+}
+
+.awesome-marker-shadow {
+  background: url('images/markers-shadow.png') no-repeat 0 0;
+  width: 36px;
+  height: 16px;
+}
+
+/* Retina displays */
+@media (min--moz-device-pixel-ratio: 1.5),(-o-min-device-pixel-ratio: 3/2),
+(-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5),(min-resolution: 1.5dppx) {
+ .awesome-marker {
+  background-image: url('images/markers-soft@2x.png');
+  background-size: 720px 46px;
+ }
+ .awesome-marker-shadow {
+  background-image: url('images/markers-shadow@2x.png');
+  background-size: 35px 16px;
+ }
+}
+
+.awesome-marker i {
+  color: #333;
+  margin-top: 10px;
+  display: inline-block;
+  font-size: 14px;
+}
+
+.awesome-marker .icon-white {
+  color: #fff;
+}
+
+/* Colors */
+.awesome-marker-icon-red {
+  background-position: 0 0;
+}
+
+.awesome-marker-icon-darkred {
+  background-position: -180px 0;
+}
+
+.awesome-marker-icon-lightred {
+  background-position: -360px 0;
+}
+
+.awesome-marker-icon-orange {
+  background-position: -36px 0;
+}
+
+.awesome-marker-icon-beige {
+  background-position: -396px 0;
+}
+
+.awesome-marker-icon-green {
+  background-position: -72px 0;
+}
+
+.awesome-marker-icon-darkgreen {
+  background-position: -252px 0;
+}
+
+.awesome-marker-icon-lightgreen {
+  background-position: -432px 0;
+}
+
+.awesome-marker-icon-blue {
+  background-position: -108px 0;
+}
+
+.awesome-marker-icon-darkblue {
+  background-position: -216px 0;
+}
+
+.awesome-marker-icon-lightblue {
+  background-position: -468px 0;
+}
+
+.awesome-marker-icon-purple {
+  background-position: -144px 0;
+}
+
+.awesome-marker-icon-darkpurple {
+  background-position: -288px 0;
+}
+
+.awesome-marker-icon-pink {
+  background-position: -504px 0;
+}
+
+.awesome-marker-icon-cadetblue {
+  background-position: -324px 0;
+}
+
+.awesome-marker-icon-white {
+  background-position: -574px 0;
+}
+
+.awesome-marker-icon-gray {
+  background-position: -648px 0;
+}
+
+.awesome-marker-icon-lightgray {
+  background-position: -612px 0;
+}
+
+.awesome-marker-icon-black {
+  background-position: -682px 0;
+}

website/maintenance-map/css/leaflet.css

@@ -0,0 +1,640 @@
+/* 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,
+.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;
+	}
+
+.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-tile {
+	will-change: opacity;
+	}
+.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;
+	}
+.leaflet-zoom-anim .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: 0;
+	}
+.leaflet-container a {
+	color: #0078A8;
+	}
+.leaflet-container a.leaflet-active {
+	outline: 2px solid orange;
+	}
+.leaflet-zoom-box {
+	border: 2px dotted #38f;
+	background: rgba(255,255,255,0.5);
+	}
+
+
+/* general typography */
+.leaflet-container {
+	font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
+	}
+
+
+/* general toolbar styles */
+
+.leaflet-bar {
+	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
+	border-radius: 4px;
+	}
+.leaflet-bar a,
+.leaflet-bar a:hover {
+	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 {
+	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;
+	}
+.leaflet-control-layers-separator {
+	height: 0;
+	border-top: 1px solid #ddd;
+	margin: 5px -10px 5px -6px;
+	}
+
+/* Default icon URLs */
+.leaflet-default-icon-path {
+	background-image: url(images/marker-icon.png);
+	}
+
+
+/* attribution and scale controls */
+
+.leaflet-container .leaflet-control-attribution {
+	background: #fff;
+	background: rgba(255, 255, 255, 0.7);
+	margin: 0;
+	}
+.leaflet-control-attribution,
+.leaflet-control-scale-line {
+	padding: 0 5px;
+	color: #333;
+	}
+.leaflet-control-attribution a {
+	text-decoration: none;
+	}
+.leaflet-control-attribution a:hover {
+	text-decoration: underline;
+	}
+.leaflet-container .leaflet-control-attribution,
+.leaflet-container .leaflet-control-scale {
+	font-size: 11px;
+	}
+.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;
+	font-size: 11px;
+	white-space: nowrap;
+	overflow: hidden;
+	-moz-box-sizing: border-box;
+	     box-sizing: border-box;
+
+	background: #fff;
+	background: rgba(255, 255, 255, 0.5);
+	}
+.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 19px;
+	line-height: 1.4;
+	}
+.leaflet-popup-content p {
+	margin: 18px 0;
+	}
+.leaflet-popup-tip-container {
+	width: 40px;
+	height: 20px;
+	position: absolute;
+	left: 50%;
+	margin-left: -20px;
+	overflow: hidden;
+	pointer-events: none;
+	}
+.leaflet-popup-tip {
+	width: 17px;
+	height: 17px;
+	padding: 1px;
+
+	margin: -10px auto 0;
+
+	-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;
+	padding: 4px 4px 0 0;
+	border: none;
+	text-align: center;
+	width: 18px;
+	height: 14px;
+	font: 16px/14px Tahoma, Verdana, sans-serif;
+	color: #c3c3c3;
+	text-decoration: none;
+	font-weight: bold;
+	background: transparent;
+	}
+.leaflet-container a.leaflet-popup-close-button:hover {
+	color: #999;
+	}
+.leaflet-popup-scrolled {
+	overflow: auto;
+	border-bottom: 1px solid #ddd;
+	border-top: 1px solid #ddd;
+	}
+
+.leaflet-oldie .leaflet-popup-content-wrapper {
+	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-popup-tip-container {
+	margin-top: -1px;
+	}
+
+.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-clickable {
+	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;
+	}

website/maintenance-map/css/main.css

@@ -0,0 +1,294 @@
+body {
+   height: 100%;
+   width: 100%;
+   max-width: 100%;
+   max-height: 100%;
+   margin: 0;
+   overflow: hidden;
+}
+
+#map {
+   position: absolute;
+   height: 100%;
+   width: 100%;
+   max-height: 100%;
+   max-width: 100%;
+   border: none;
+}
+
+#title-container {
+   position: absolute;
+   pointer-events: none;
+   display: flex;
+   flex-flow: row wrap;
+   z-index: 800;
+   text-align: right;
+   width: 100%;
+   height: 100%;
+}
+
+h1, h2, h3 {
+   position: absolute;
+   width: 100%;
+   pointer-events: none;
+   font-family: Courier;
+   color: #d152b8;
+   margin: 0;
+}
+
+h1 {
+   padding-top: 2%;
+   padding-right: 2%;
+   font-size: 10vw;
+   align-self: flex-start;
+
+}
+
+h2 {
+   padding-top: 10%;
+   padding-right: 2.5%;
+   font-size: 3vw;
+   align-self: flex-start;
+}
+
+h3 {
+   padding-top: 15%;
+   font-size: 2.5vw;
+   padding-right: 2%;
+   align-self: flex-start;
+}
+
+#bottom_menu {
+   position: absolute;
+   pointer-events: all !important;
+   display: flex;
+   justify-content: space-between;
+   align-self: flex-end;
+   z-index: 1000;
+   background: white;
+   height: 4%;
+   width: 100%;
+   font-family: Courier;
+   font-weight: bold;
+   font-size: 2vw;
+   text-align: center;
+   align-items: center;
+   border: 1px #d152b8;
+
+}
+
+#bottom_menu a {
+   padding: 1vw 3vw 1vw 3vw;
+   color: #d152b8;
+}
+
+ /* Hide scrollbar for Chrome, Safari and Opera */
+#infotext, #infotext_en, #abouttext, #contacttext, #howtotext, #howtotext_en:-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+#infotext, #infotext_en, #abouttext, #contacttext, #howtotext, #howtotext_en {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+} 
+
+#infotext, #infotext_en, #abouttext, #contacttext, #howtotext, #howtotext_en {
+
+   visibility: hidden;
+   opacity:0;
+   overflow-x: hidden !important;
+   overflow-y: scroll !important;
+   position: absolute;
+   z-index: 1000;
+   width: 80%;
+   height: 70%;
+   max-height: 100%;
+   max-width: 100%;
+   word-wrap: break-word;
+   background-color: #d152b8;
+   color: white;
+   margin: 14% 10% 10% 10%;
+   transition: opacity 1s;
+
+}
+
+#infotext p, #infotext_en p, #abouttext p, #howtotext p, #howtotext_en p {
+    padding: 0% 10% 10% 10%;
+    margin: 0;
+    font-family: Arial;
+    font-weight: bold;
+    font-size: 1.5vw;
+    color: white;
+
+}
+
+#infotext a, #infotext_en a, #abouttext a, #howtotext a, #howtotext_en a {
+   color: white;
+}
+
+#howtotext a {
+   text-decoration: underline !important;
+}
+
+#howto {
+      font-size: 2vw;
+   }
+
+#contacttext p {
+   padding: 0% 10% 10% 10%;
+   margin: 0;
+   font-family: Arial;
+   font-weight: bold;
+   font-size: 1.5vw;
+   color: white;
+}
+
+#contacttext a, #contacttext span, , #howtotext span, #howtotext_en span {
+   color: white;
+   padding-left: 5vw;
+   font-size: 1.5vw;
+}
+
+#abouttext p {
+   font-size: 1.5vw;
+}
+
+#abouttext span {
+   font-size: 1.5vw;
+}
+
+#infobuttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 1vw;
+}
+
+#closeButton {
+   height: min-content;
+   width: min-content; 
+   font-family: Arial;
+   font-size:2vw;
+   font-weight:bold;
+   padding:1%;
+   cursor: pointer;
+   margin: 0;
+}
+
+#enButton {
+   position: relative;
+   height: min-content;
+   width: min-content;
+   margin: 0;
+   font-family: Arial;
+   font-size:2vw;
+   font-weight:bold;
+   color: white;
+   padding:1%;
+   text-align: right;
+   cursor: pointer;
+}
+
+#closeButtonbottom {
+   position: relative;
+   font-family: Arial;
+   font-size: 2vw;
+   font-weight: bold;
+   text-align: center;
+   padding-bottom: 5vh;
+   margin: 0;
+   cursor: pointer;
+}
+
+/*client location*/
+.leaflet-control-locate a {
+  padding-top: 4px;
+}
+
+.leaflet-control-locate a span {
+  font-size: 1.4em;
+  cursor: pointer;
+}
+
+.leaflet-control-locate.active a {
+  color: #2A93EE;
+}
+.leaflet-control-locate.active.following a {
+  color: #2A93EE;
+}
+
+
+@media only screen and (max-width: 768px) {
+
+   h1 {
+      font-size: 15vw;
+   }
+
+   h2 {
+      padding-top: 10vh;
+      font-size: 5vw;
+   }
+
+   h3 {
+      padding-top: 15vh;
+      font-size: 5vw;
+   }
+
+   #howto {
+      font-size: 6vw;
+   }
+
+   #infotext, #infotext_en, #abouttext, #contacttext, #howtotext, #howtotext_en {
+      visibility: hidden;
+      overflow-x: hidden !important;
+      overflow-y: scroll !important;
+      position: absolute;
+      z-index: 400;
+      width: 90%;
+      height: 73%;
+      max-height: 100%;
+      max-width: 100%;
+      word-wrap: break-word;
+      background-color: #d152b8;
+      color: white;
+      margin: 28% 5% 0% 5%;
+   }
+
+   #abouttext span {
+      font-size: 4vw;
+   }
+
+   #contacttext p {
+      font-size: 5vw;
+   }
+
+   #contacttext a, #contacttext span, , #howtotext span, #howtotext_en span {
+      font-size: 4vw;
+   }
+
+   #closeButton, #enButton {
+      font-family: Arial;
+      font-size:4vw;
+      font-weight:bold;
+      padding:3%;
+   }
+
+   #closeButtonbottom {
+      font-size:4vw;
+      font-weight:bold;
+   }
+
+   #infotext p, #infotext_en p, #abouttext p, #contacttext p, #howtotext p, #howtotext_en p {
+      padding: 20px;
+      font-family: Arial;
+      font-weight: bold;
+      font-size: 4vw;
+      margin: 0;
+   }
+
+   #bottom_menu {
+      height: 5%;
+      font-size: 5vw;
+   }
+}

website/maintenance-map/goodscooters.php

@@ -0,0 +1,442 @@
+<?php
+// array of scooters, artist, title, description
+global $scooters;
+
+$scooters = array(
+    //array('https://opencoil.show/test-json.php?scooterID=1', 'artist name 0', 'title 0', 'desciption 0' ),
+    //array('https://opencoil.show/test-json.php?scooterID=2', 'artist name 1', 'title 1', 'desciption 1' ),
+    //array('https://opencoil.show/test-json.php?scooterID=3', 'artist name 2', 'title 2', 'desciption 2' ),
+    array('https://platform.tier-services.io/v1/vehicle/1cdccfec-60c3-4b9e-ad18-40861a3a9ab2', 'Aram Bartholl', 'Fossils of late capitalism', 'Aram Bartholl has salvaged rental bikes and scooters from the Spree River and is now exhibiting them as material relics of the platform economy.'),
+    array('https://platform.tier-services.io/v1/vehicle/ec9437d8-b105-4c94-bcdd-8653f629d476', '!Mediengruppe Bitnik', 'Follow the Rider ƪ(ړײ)ƪ', 'Follow the next person you see on an e-scooter. 👠 Keep distance but don\'t lose your guide'),
+    array('https://platform.tier-services.io/v1/vehicle/bfe887ad-cb89-4311-836f-dfb804b46269', 'Jonas Lund', 'Hello Capitalism', '\'Hello Capitalism\' is a text-based work by Jonas Lund, exploring a wide range of different types of capitalistic systems.'),
+    array('https://platform.tier-services.io/v1/vehicle/808decca-3537-41ad-96c0-45f29c57349d', 'Martin Howse', 'wok_the_cables', 'Adventure game for psychogeophysical divination of portals, realtime instructions to follow #wokthecables'),
+    array('https://platform.tier-services.io/v1/vehicle/54aaed50-dd24-4c10-9580-b05b3bfc6985', 'Sofya Aleynikova', 'followers', 'Eine weibliche Protagonistin manifestiert sich als Meme im Web und stellt die richtigen Fragen.'),
+    array('https://platform.tier-services.io/v1/vehicle/d794fac2-5c3e-4f2b-aed1-f70ef82f67d8', 'JODI', 'coilww.html', 'XXXXXXXX'),
+    array('https://platform.tier-services.io/v1/vehicle/86219ae1-416a-4b36-897a-c738397d7210', 'Rosa Menkmann', 'title', 'desciption'),
+    array('https://platform.tier-services.io/v1/vehicle/0b939caf-80e9-4d6b-8454-4a7f8eaf088c', 'Sarah Grant', 'title', 'desciption'),
+    array('https://platform.tier-services.io/v1/vehicle/0f7fa267-4bc1-439a-8fd0-43b98b9ffba7', 'Danja Vasiliev', 'title', 'desciption'),
+    array('https://platform.tier-services.io/v1/vehicle/8732f342-df2f-475f-b0f6-c0032743a944', 'Constant Dullaart', 'clock', 'ssid that tells the time'),
+    array('https://platform.tier-services.io/v1/vehicle/511c3984-3f81-4022-acc2-8e22646a5e01', 'Dennis de Bel & Anton Jehle', 'Paracity Gallery v0.41', 'HOW TO: diy scooter gallery'),
+
+); 
+
+
+function saveLatestJSON(){
+global $scooters; //"import" the global variable into the function's scope
+    
+    //TODO if latestData.json = older than ..2 minutes...call the API again
+    $id = 0; //start id
+    foreach($scooters as $item) {
+        $getJSON = callAPI($scooters[$id][0]); //abstract callAPI for neater reuse
+        // GET RID OF JSON DECODE!
+        $arr = json_decode($getJSON, true); // decode JSON data to PHP associative array
+        // access values from the associative array
+        $lat = $arr["data"]["attributes"]["lat"];  // get lattitude
+        $lng = $arr["data"]["attributes"]["lng"];  // get longitude
+        $pos = $lat.', '.$lng; // construct lat/lon for use in leafet
+        $lst = $arr["data"]["attributes"]["lastLocationUpdate"];  // get time of last position
+        $rnt = $arr["data"]["attributes"]["isRentable"]; // check if scooter is rentable,  
+        $act = $arr["data"]["attributes"]["state"]; // check if scooter is ACTIVE or MAINTAINANCE
+        // access values from the multidimensional $scooters array
+        $nam = $scooters[$id][1]; // get the artist name
+        $tit = $scooters[$id][2]; // get the works title
+        $des = $scooters[$id][3]; // get the works description
+
+        //construct json with latest data
+        $latestData[] = array( "ID" => $id,
+                            "lastPos" => $pos,
+                            "lastLocationUpdate" => $lst,
+                            "isRentable" => $rnt,
+                            "state" => $act,
+                            "name" => $nam,
+                            "title" => $tit,
+                            "desc" => $des);
+        $id++;
+    }
+
+    return $latestData; //return array
+
+}
+    
+
+function makeMarker(int $id){ // generate appropriate markers based on latest JSON
+
+    $readJSON = file_get_contents('./latestData.json'); //read latest data
+    $arr = json_decode($readJSON, true);
+
+    $pos = $arr[$id]["lastPos"];  // get last known position
+    $lst = $arr[$id]["lastLocationUpdate"];   // get time of last position
+    $rnt = $arr[$id]["isRentable"];  // check if scooter is rentable,  
+    $act = $arr[$id]["state"]; // check if scooter is ACTIVE or MAINTAINANCE
+    // access values from the multidimensional $scooters array
+    $nam = $arr[$id]["name"];  // get the artist name
+    $tit = $arr[$id]["title"];  // get the works title
+    $des = $arr[$id]["desc"];  // get the works description
+
+
+
+    //check scooter status and construct marker with corresponding icon
+
+    //check if scooter is rentable
+    if($rnt == true && $act === 'ACTIVE'){ 
+        $marker =   'var scooter'.$id.' = L.marker(['.$pos.'], {time: "'.$lst.'"}).addTo(map)
+                .bindPopup("<b>'.$tit.'</b><br>'.$des.'<br>Last updated: '.$lst=str_replace(array('T', 'Z'), ' ', $lst).'<br>Status: rentable, Gallery available")
+                .bindTooltip("'.$nam.'").setIcon(availableIcon);';
+                
+    } elseif ($rnt == false && $act === 'ACTIVE') { 
+        $marker =   'var scooter'.$id.' = L.marker(['.$pos.'], {time: "'.$lst.'"}).addTo(map)
+                .bindPopup("<b>'.$tit.'</b><br>'.$des.'<br>Last updated: '.$lst=str_replace(array('T', 'Z'), ' ', $lst).'<br>Status: rented Out, Gallery unavailable")
+                .bindTooltip("'.$nam.'").setIcon(isRentedIcon);';
+                
+    };
+    //check if scooter is in maintenace
+    if($act !== "ACTIVE"){
+        $marker =   'var scooter'.$id.' = L.marker(['.$pos.'], {time: "'.$lst.'"}).addTo(map)
+                .bindPopup("<b>'.$tit.'</b><br>'.$des.'<br>Last updated: '.$lst=str_replace(array('T', 'Z'), ' ', $lst).'<br>Status: unavailable, in maintenace")
+                .bindTooltip("'.$nam.'").setIcon(isMaintenanceIcon);';
+    };        
+
+    return $marker;
+
+
+}
+
+
+function appendJSON($filename, $data){ // create historical json data for documentation over time
+
+    // read the file if present
+    $handle = @fopen($filename, 'r+');
+
+    // create the file if needed
+    if ($handle === null)
+    {
+        $handle = fopen($filename, 'w+');
+    }
+
+    if ($handle)
+    {
+        // seek to the end
+        fseek($handle, 0, SEEK_END);
+
+        // are we at the end of is the file empty
+        if (ftell($handle) > 0)
+        {
+            // move back a byte
+            fseek($handle, -1, SEEK_END);
+
+            // add the trailing comma
+            fwrite($handle, ',', 1);
+
+            // add the new json string
+            fwrite($handle, json_encode($data) . ']');
+        }
+        else
+        {
+            // write the first event inside an array
+            fwrite($handle, json_encode(array($data)));
+        }
+
+            // close the handle on the file
+            fclose($handle);
+    }
+
+
+}
+
+
+
+function callAPI($url){
+        $curl = curl_init($url);
+        curl_setopt($curl, CURLOPT_FAILONERROR, true);
+        curl_setopt($curl, CURLOPT_FOLLOWLOCATION, true);
+        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
+        curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
+        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);  
+        curl_setopt($curl, CURLOPT_HTTPHEADER, array(
+                'x-api-key: bpEUTJEBTf74oGRWxaIcW7aeZMzDDODe1yBoSxi2',
+                'Content-Type: application/json',
+        )); // set the api key
+        curl_setopt($curl, CURLOPT_USERAGENT,'ProductionRelease/3.8.2 (app.tier.sharing; build:3.8.2.0; iOS 12.4.4) Alamofire/4.9.1'); // set user-agent to that of the Tier.app, sniffed by burpsuite
+
+        $result = curl_exec($curl);
+        if(!$result){die("Connection Failure");}
+        curl_close($curl);
+        return $result;
+}
+
+
+
+?>
+
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+        <title>OPENCOIL</title>
+        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
+        <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css">
+        <script src='https://unpkg.com/leaflet@1.3.3/dist/leaflet.js'></script>
+        <!--  icons -->
+        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.6.0/dist/leaflet.css"/>
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
+        <link rel="stylesheet" href="https://rawcdn.githack.com/python-visualization/folium/master/folium/templates/leaflet.awesome.rotate.css"/>
+        <link rel="stylesheet" href="main.css"/>
+
+        <!-- begin timeslider
+        <script src="SliderControl.js"></script>
+        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
+        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
+        <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
+        <!-- end of timeslider -->
+        
+        <script>
+            L_NO_TOUCH = false;
+            L_DISABLE_3D = false;
+        </script>
+    </head>
+<body>
+    <div id="map"></div>
+    <div id="title-container">
+        <h1>OPENCOIL</h1>
+        <h2>a roaming speedshow</h2>
+        <!--<p>legendary code has once been written on a cold rainy night in october. it was 2 nay 1 day before the opening of this show when i typed this silly code. it was legendary. both the situation as well as the code. thanks for reading. bye</p>-->
+    <div id="bottom_menu">
+        <a href="#" onclick="document.getElementById('infotext').style.visibility='visible';document.getElementById('infotext').style.opacity='1';document.getElementById('contacttext').style.visibility='hidden';document.getElementById('abouttext').style.visibility='hidden';">info</a>
+        <a href="#" onclick="document.getElementById('abouttext').style.visibility='visible';document.getElementById('abouttext').style.opacity='1';document.getElementById('contacttext').style.visibility='hidden';document.getElementById('infotext').style.visibility='hidden';">about</a>
+        <a href="#" onclick="document.getElementById('contacttext').style.visibility='visible';document.getElementById('contacttext').style.opacity='1';document.getElementById('infotext').style.visibility='hidden';document.getElementById('abouttext').style.visibility='hidden';">contact</a>
+    </div>
+    </div>
+<div id="abouttext">
+    <div id="infobuttons">
+        <div id="closeButton"  onclick="document.getElementById('abouttext').style.visibility='hidden';document.getElementById('abouttext').style.opacity='0';">X</div>
+    </div>
+    <p>
+        OPENCOIL - a roaming speedshow<br><br>
+        <span id="infolink">curated by Dennis de Bel & Anton Jehle</span><br><br>
+        Impressum<br><br>
+        <span id="infolink">
+            Zentrum für Netzkunst e.V.<br>
+            c/o Robert Sakrowski<br>
+            Kollwitzstraße 71<br>
+            10435 Berlin<br><br>
+            Register-Eintrag Nr.: VR 38280 B<br>
+            Steuernummer 27/647/51440
+        </span>
+    </p>
+</div>
+<div id="contacttext">
+    <div id="infobuttons">
+        <div id="closeButton"  onclick="document.getElementById('contacttext').style.visibility='hidden';document.getElementById('contacttext').style.opacity='0';">X</div>
+    </div>
+    <p>
+        Generelle Anfragen / general inquiries<br><br>
+        <a id="infolink" href="mailto:mail@opencoil.show">mail@opencoil.show</a><br><br>
+        Technischer Support / technical support<br><br>
+        <span>Mail: </span><a id="infolink" href="mailto:service@opencoil.show" style="padding-left: 0;">service@opencoil.show</a><br>
+        <span>Telegram: </span><a id="infolink" href="https://t.me/opencoil" style="padding-left: 0;">https://t.me/opencoil</a><br><br>
+        Zentrum für Netzkunst<br><br>
+        <span id="infolink">Werkstatt Haus der Statistik<br></span>
+        <span id="infolink">Karl-Marx-Allee 1, Haus D<br></span>
+        <span id="infolink">10178 Berlin<br></span>
+        <a id="infolink" href="mailto:info@netart.berlin">info@netart.berlin</a>
+
+    </p>
+
+</div>
+<div id="infotext">
+    <div id="infobuttons">
+        <div id="closeButton"  onclick="document.getElementById('infotext').style.visibility='hidden';document.getElementById('infotext').style.opacity='0';">X</div>
+        <div id="enButton"  onclick="document.getElementById('infotext_en').style.visibility='visible';document.getElementById('infotext_en').style.opacity='1';">EN</div>
+    </div>
+    <p>
+        OPENCOIL – a roaming Speedshow <br><br>
+
+        Die Ausstellung OPENCOIL setzt sich mit den Auswirkungen von Mikro-Mobilitätsdiensten auf den Stadtraum auseinander, indem sie ihre dezentrale Infrastruktur als Ausstellungsraum nutzt und gleichzeitig die Bedingungen und Auswirkungen dieser Infrastrukturen auch zum Thema macht. 
+
+        <br><br>
+        11 Künstler*innen wurden eingeladen, ihre Arbeiten auf einem kleinen Wifi Controller mit ~2MB Offline-Speicher zu präsentieren. 
+
+        <br><br>
+        Diese „digitalen Galerieräume“ werden an 11 zufällig ausgewählten E-Scootern angebracht.
+
+        <br>
+
+        So fährt die Ausstellung, von den Nutzer*Innen der Roller unbemerkt, als „roaming Speedshow“ durch die Stadt.
+
+        <br><br>
+        Der aktuelle Standort der Kunstwerke kann ab dem 26. Oktober über diese Website verfolgt werden. Damit die Werke betrachtet werden können, muss die „Roller-Galerie“ im Stadtraum gefunden werden.
+
+        <br><br>
+        Sobald der Roller angemietet ist, erhalten die Besucher*innen über ihr persönliches Smartphone, Zugang zu dem 2MB großen Galerieraum und den ausgestellten Werken.
+        <br><br>
+        Während Kapazitätsbeschränkungen und die bevorzugte Vermeidung von Zusammenkünften in geschlossenen Räumen, traditionelle Galerien und Museen vor Herausforderungen stellen, zielt OPENCOIL darauf ab, die Ortsunabhängigkeit des Online mit der Materialität des Offline (und umgekehrt) zu verbinden. Die Infrastruktur der „Mikro-Mobiltitätsdienste“ wird übernommen – klimaneutral und dezentral.
+        <br><br>
+        Die Gehwege vieler Städte auf der ganzen Welt wurden in den letzten Jahren von sogenannten 'dockless sharing vehicles' regelrecht überflutet. Mit Versprechungen von Umweltfreundlichkeit und Elektromobilität, besetzten diese Risikokapitalismus Aktivisten die Grauzone zwischen privatem und öffentlichem Raum auf den Straßen unserer Städte. Diese gewissenlose Gewissenhaftigkeit der "Mikro-Mobilitätsdienste" wirft jedoch wichtige Fragen zu städtischem Raum, Eigentum, Agentur, Produktion, Ökologie und sehr spätem Kapitalismus auf.
+        <br><br>
+        Wie umgehen mit der Inbesitznahme öffentlichen Raums?<br> 
+        Welche Werkzeuge und Wege gibt es sich diesen zurückzuerobern?<br>
+        <br>
+        OPENCOIL soll nicht nur ein Pandemie-tauglicher Weg sein, um Kunst im öffentlichen Offline-Raum zu zeigen. OPENCOIL ist auch eine kreative (Um-)Nutzung von E-Scootern, ein Versuch, sich ihnen mit künstlerischen Mitteln zu nähern.
+        <br>
+        Gezeigt werden Arbeiten, die sich mit Fragen der Überschneidung von öffentlichem und privatem Raum, dem Umgang mit Ressourcen sowie mit Greenwashing, Risikokapitalismus und Vandalismus befassen.
+        <br><br>
+        Die teilnehmenden Künstler*innen sind:
+        <br><br>
+        Aram Bartholl<br>
+        Constant Dullaart<br>
+        Dennis de Bel & Anton Jehle<br>
+        JODI<br>
+        Jonas Lund<br>
+        Martin Howse<br>
+        !Mediengruppe Bitnik<br>
+        Rosa Menkman<br>
+        Sarah Grant<br>
+        Sofya Aleynikova<br>
+        Danja Vasiliev<br>
+        <br><br>
+        Sonstige Erläuterungen:
+        <br><br>
+        Die künstlerischen Beiträge sind jeweils auf einem Wifi Mikrocontroller gespeichert, welcher mit einem Tretroller verbunden ist und so, sobald der Roller ausgeliehen ist, mit Strom versorgt wird. Um die Arbeiten zu sehen verbindet man sich mit dem vom Wifi Chip gesendeten, lokalen unverschlüsselten WiFi  Netzwerk. Es öffnet sich automatisch ein Webportal, indem die Arbeit zu sehen ist. Es ist keine mobile Datenverbindung notwendig.
+        Alle Arbeiten wurden von den Künstler*innen speziell für die Betrachtung auf Smartphones optimiert.
+        <br><br>
+        OPENCOIL ist in keiner Weise mit der den „Mikro-Mobilitätsdiensten“ assoziiert, sondern bedient sich lediglich am bestehenden Rollernetzwerk. Die Umnutzung der Roller zu einem Ausstellungsort ist nach der Ausstellung komplett reversibel und schränkt den herkömmlichen Gebrauch der Roller (auch während der Ausstellung) in keiner Weise ein. Die Roller werden nicht beschädigt.<br><br>
+        Die Ausstellung startet am 26. Oktober auf dem öffentlichen Platz vor dem Zentrum für Netzkunst (Haus der Statistik) und wird in der Woche bis zum 1. November täglich von unserem Team gewartet und am Laufen gehalten. Sollte eine Arbeit beschädigt oder nicht auffindbar sein bitte per Mail (<a id="infolink" href="mailto:service@opencoil.show">service@opencoil.show</a>) oder über die Telegram App (<a id="infolink" href="https://t.me/opencoil">https://t.me/opencoil</a>)<br><br>
+    </p>
+    <div id="closeButtonbottom"  onclick="document.getElementById('infotext').style.visibility='hidden';">less info</div>
+</div>
+<div id="infotext_en">
+    <div id="closeButton"  onclick="document.getElementById('infotext_en').style.visibility='hidden'; document.getElementById('infotext').style.visibility='hidden';">X</div>
+    <p>
+        OPENCOIL - a roaming speed show
+        <br><br>
+        The OPENCOIL exhibition explores the impact of micro-mobility services on urban space by using its decentralised infrastructure as an exhibition space, while also addressing the conditions and effects of this infrastructure.
+        <br><br>
+        11 artists were invited to present their work on a small Wifi controller with ~2MB offline memory.
+        <br><br>
+        These "digital gallery spaces" are attached to 11 randomly selected e-scooters.
+        Thus the exhibition, unnoticed by the regular users of these scooters, drives through the city as a "roaming speed show".
+        <br><br>
+        From October 26th onwards the current location of the artworks will be displayed here on this website. In order to view the works the corresponding "Scooter Gallery" must be found in the offline urban space.
+        <br><br>
+        Once the scooter is rented, visitors will be able to access the 2MB gallery space and the exhibited works via their personal smartphone.
+        <br><br>
+        While capacity restrictions and the preferred avoidance of gatherings in closed spaces pose challenges on traditional galleries and museums, OPENCOIL aims to combine the independence of the online with the materiality of the offline (and vice versa). The infrastructure of "micro-mobility services" will be taken over - climate-neutral and decentralised.
+        <br><br>
+        The pavements of many cities around the world have been flooded in recent years by so-called 'dockless sharing vehicles'. With promises of eco-friendliness and electromobility, these risk capitalism activists have occupied the grey zone between private and public space on the streets of our cities. However, this unscrupulous conscientiousness of 'micro-mobility services' raises important questions about urban space, ownership, agency, production, ecology and very late capitalism.
+        <br><br>
+        How to deal with the occupation of public space?
+        What tools and ways are there to reclaim it?
+        <br><br>
+        OPENCOIL is not only meant to be a pandemic-proof way to show art in public offline space. OPENCOIL is also a creative (re)use of e-scooters, an attempt to approach them by artistic means.
+        On show are works that deal with questions of the overlap between public and private space, the use of resources, as well as greenwashing, risk capitalism and vandalism.
+        <br><br>
+        The participating artists are:
+        <br><br>
+        Aram Bartholl<br>
+        Constant Dullaart<br>
+        Dennis de Bel & Anton Jehle<br>
+        JODI<br>
+        Jonas Lund<br>
+        Martin Howse<br>
+        !Mediengruppe Bitnik<br>
+        Rosa Menkman<br>
+        Sarah Grant<br>
+        Sofya Aleynikova<br>
+        Danja Vasiliev<br>
+        <br><br><br>
+
+        Other explanatory notes:
+        <br><br>
+        The artistic contributions are each stored on a Wifi microcontroller, which is connected to a scooter and is thus supplied with power as soon as the scooter is rented. To view the works, you connect to the local unencrypted WiFi network sent by the Wifi chip. A web portal opens automatically, where the work can be viewed. No mobile data connection is necessary. All works have been specially optimised by the artists to be viewed on smartphones.
+        <br><br>
+        OPENCOIL is in no way associated with the "micro-mobility services", but only uses the existing scooter network. The conversion of the scooters into an exhibition space is completely reversible after the exhibition ends and in no way restricts the conventional use of the scooters (even during the exhibition). The scooters will not be damaged.
+        <br><br>
+        The exhibition will start on October 26th in the public space in front of Zentrum für Netzkunst (Haus der Statistik). For one week, until November 1st, the exhibition will be serviced and kept running daily by our team. Should a work be damaged or not be found, please send an e-mail (<a id="infolink" href="mailto:service@opencoil.show">service@opencoil.show</a>) or use the Telegram App (<a id="infolink" href="https://t.me/opencoil">https://t.me/opencoil</a>)
+    </p>
+    <div id="closeButtonbottom"  onclick="document.getElementById('infotext').style.visibility='hidden'; document.getElementById('infotext_en').style.visibility='hidden';">less info</div>
+</div>
+    
+<script>
+        // define icons   
+        // prefix: glyphicon = bootstrap, list can be found here: https://getbootstrap.com/docs/3.3/components/
+        // prefix: fa = fontawesome, list is here: https://fontawesome.com/v4.7.0/cheatsheet/
+        var availableIcon = L.AwesomeMarkers.icon(
+            {"icon": "wifi", "iconColor": "white", "markerColor": "purple", "prefix": "fa"}
+        );
+        var isRentedIcon = L.AwesomeMarkers.icon(
+            {"icon": "hourglass-half", "iconColor": "white", "spin": "true", "markerColor": "pink", "prefix": "fa"}
+        );
+        var isMaintenanceIcon = L.AwesomeMarkers.icon(
+            {"icon": "wrench", "iconColor": "white", "markerColor": "black", "prefix": "fa"}
+        );
+
+
+        var map = L.map('map', { zoomControl: false, attributionControl: false }).setView([52.516190, 13.377693], 11.5);
+
+        var Stamen_Toner = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.{ext}', {
+        attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+        subdomains: 'abcd',
+        minZoom: 0,
+        maxZoom: 20,
+        ext: 'png'
+        });
+        map.addLayer(Stamen_Toner);
+
+
+        //the magic: for each scooter in $scooters array, request status and construct marker
+        <?php 
+
+        $filename = "./latestData.json"; //latest locations, 1 entry per scooter
+        $filename_history = "./historicalData.json"; //historical locations
+
+        // check how old the latest json is
+        if (time()-filemtime($filename) > 60) { //if older than 60 seconds
+            $arrayToEcho = saveLatestJSON();
+            //append to historical json
+            appendJSON($filename_history, $arrayToEcho);
+
+            $latestData = json_encode($arrayToEcho, JSON_FORCE_OBJECT); // force object accepts 0 as a key for the array and not NULL
+            file_put_contents($filename, $latestData, LOCK_EX);
+
+
+            $id = 0; //start id
+            foreach($scooters as $item) {
+                echo makeMarker($id);
+                $id++;
+            }
+
+        } else { // file younger than 60 seconds
+            
+            $id = 0; //start id
+            foreach($scooters as $item) {
+                echo makeMarker($id);
+                $id++;
+            }
+        }
+
+
+
+
+        ?>
+
+        // time slider
+
+        //test markers
+        //var marker1 = L.marker([52.504926, 13.358061], {time: "2020-10-09T08:00:29Z"});
+        //var marker2 = L.marker([52.506926, 13.358061], {time: "2020-10-09T09:00:29Z"});
+        //var marker3 = L.marker([52.508926, 13.358061], {time: "2020-10-09T10:00:29Z"});
+
+        // var map = marker1;
+        // layerGroup = L.layerGroup([marker_e7a96a6d6b08479ba6d17d42769e5202]);
+        layerGroup = L.layerGroup([scooter0, scooter1, scooter2]); //make this dynamic
+        var sliderControl = L.control.sliderControl({layer:layerGroup});
+        map.addControl(sliderControl);
+        sliderControl.startSlider();
+    </script>
+</body>
+</html>

website/maintenance-map/index.php

@@ -0,0 +1,529 @@
+<?php
+// array of scooters, artist, title, description
+global $scooters;
+
+$scooters = array(
+    //array('https://opencoil.show/test-json.php?scooterID=1', 'artist name 0', 'title 0', 'desciption 0' ),
+    //array('https://opencoil.show/test-json.php?scooterID=2', 'artist name 1', 'title 1', 'desciption 1' ),
+    //array('https://opencoil.show/test-json.php?scooterID=3', 'artist name 2', 'title 2', 'desciption 2' ),
+    array('https://platform.tier-services.io/v1/vehicle/1cec9f29-0e56-459b-a30f-6341cc09ba84', 'Aram Bartholl', 'Fossils of late capitalism', 'Aram Bartholl has salvaged rental bikes and scooters from the Spree River and is now exhibiting them as material relics of the platform economy.'),
+    array('https://platform.tier-services.io/v1/vehicle/9c8902e0-8351-4809-a24a-a8eefe5249b5', '!Mediengruppe Bitnik', 'Follow the Rider ƪ(ړײ)ƪ', 'Follow the next person you see on an e-scooter. 👠 Keep distance but don\'t lose your guide.'),
+    array('https://platform.tier-services.io/v1/vehicle/27f129e5-6e2a-415f-afdf-075f6aa1bc37', 'Jonas Lund', 'Hello Capitalism', '\'Hello Capitalism\' is a text-based work by Jonas Lund, exploring a wide range of different types of capitalistic systems.'),
+    array('https://platform.tier-services.io/v1/vehicle/00020bdd-ee4c-486a-90f5-dd04672cfc54', 'Martin Howse', 'wok_the_cables', 'Adventure game for psychogeophysical divination of portals, realtime instructions to follow #wokthecables'),
+    array('https://platform.tier-services.io/v1/vehicle/acd0c627-5b16-461e-a662-65cef778d94d', 'Sofya Aleynikova', 'followers', 'Eine weibliche Protagonistin manifestiert sich als Meme im Web und stellt die richtigen Fragen.'),
+    array('https://platform.tier-services.io/v1/vehicle/7eebb2e6-2694-43a2-b390-d8fc70124377', 'JODI', '#4b38$R0ut.IDx', '██████████████████████████████████████████████████▒▒'),
+    array('https://platform.tier-services.io/v1/vehicle/50e749fc-1ebb-41b0-9de7-952db5c0aa05', 'Rosa Menkmann', 'Ariane', 'Ariane is a famous Shutterstock model. She also worries about getting older.'),
+    array('https://platform.tier-services.io/v1/vehicle/30895827-25f1-4c07-8528-25c215e80336', 'Sarah Grant(OLD)', 'Plague Rave 2020', 'Take a katamari style tour with corona through the vibrant Berlin club scene. Download a souvenir photo at the end of the trip!'),
+    array('https://platform.tier-services.io/v1/vehicle/2de46e02-d816-47eb-9ad8-0ecb4178af25', 'Danja Vasiliev', 'need4speed', 'A situationist game in public space adapted for the micro-mobility sector. Rent a scooter, ride while making continuous and sharp turns and find l00t!'),
+    array('https://platform.tier-services.io/v1/vehicle/f42debc7-2dd3-4b64-9956-de96a12d2af9', 'Constant Dullaart', 'constant time', 'Your network, your home, as temporary as seconds on the clock. Reconnect.'),
+    array('https://platform.tier-services.io/v1/vehicle/8cd255ae-e144-4a45-aa7d-8317908a2465', 'Dennis de Bel & Anton Jehle', 'Paracity Gallery v0.41', 'HOW TO: DIY Scooter Gallery Module'),
+    array('https://platform.tier-services.io/v1/vehicle/25f4f8f3-33a4-4192-9198-11e67ee33d9d', 'Sarah Grant', 'Plague Rave 2020', 'Take a katamari style tour with corona through the vibrant Berlin club scene. Download a souvenir photo at the end of the trip!'),
+
+); 
+
+
+function saveLatestJSON(){
+global $scooters; //"import" the global variable into the function's scope
+    
+    //TODO if latestData.json = older than ..2 minutes...call the API again
+    $id = 0; //start id
+    foreach($scooters as $item) {
+        $getJSON = callAPI($scooters[$id][0]); //abstract callAPI for neater reuse
+        // GET RID OF JSON DECODE!
+        $arr = json_decode($getJSON, true); // decode JSON data to PHP associative array
+        // access values from the associative array
+        $lat = $arr["data"]["attributes"]["lat"];  // get lattitude
+        $lng = $arr["data"]["attributes"]["lng"];  // get longitude
+        $pos = $lat.', '.$lng; // construct lat/lon for use in leafet
+        $lst = $arr["data"]["attributes"]["lastLocationUpdate"];  // get time of last position
+        $rnt = $arr["data"]["attributes"]["isRentable"]; // check if scooter is rentable,  
+        $act = $arr["data"]["attributes"]["state"]; // check if scooter is: ACTIVE, INACTIVE, MAINTAINANCE, DAMAGED, OUT_OF_ORDER
+        $bat = $arr["data"]["attributes"]["batteryLevel"]; // battery level 0-100
+        // access values from the multidimensional $scooters array
+        $nam = $scooters[$id][1]; // get the artist name
+        $tit = $scooters[$id][2]; // get the works title
+        $des = $scooters[$id][3]; // get the works description
+
+        //construct json with latest data
+        $latestData[] = array( "ID" => $id,
+                            "lastPos" => $pos,
+                            "lastLocationUpdate" => $lst,
+                            "isRentable" => $rnt,
+                            "state" => $act,
+                            "batteryLevel" => $bat,
+                            "name" => $nam,
+                            "title" => $tit,
+                            "desc" => $des);
+        $id++;
+    }
+
+    return $latestData; //return array
+
+}
+    
+
+function makeMarker(int $id){ // generate appropriate markers based on latest JSON
+
+    $readJSON = file_get_contents('./latestData.json'); //read latest data
+    $arr = json_decode($readJSON, true);
+
+    $pos = $arr[$id]["lastPos"];  // get last known position
+    $lst = $arr[$id]["lastLocationUpdate"];   // get time of last position
+    $rnt = $arr[$id]["isRentable"];  // check if scooter is rentable,  
+    $act = $arr[$id]["state"]; // check if scooter is: ACTIVE, INACTIVE, MAINTAINANCE, DAMAGED
+    $bat = $arr[$id]["batteryLevel"]; // battery level 0-100
+    // access values from the multidimensional $scooters array
+    $nam = $arr[$id]["name"];  // get the artist name
+    $tit = $arr[$id]["title"];  // get the works title
+    $des = $arr[$id]["desc"];  // get the works description
+
+
+
+    //check scooter status and construct marker with corresponding icon
+
+    //check if scooter is rentable
+    if($rnt == true && $act === 'ACTIVE'){ 
+        $marker =   'var scooter'.$id.' = L.marker(['.$pos.'], {time: "'.$lst.'"}).addTo(map)
+                .bindPopup("<b>'.$tit.'</b><br><b>batteryLevel: </b>'.$bat.'<br><b>Status: </b>'.$act.'<br>Last updated: '.$lst=str_replace(array('T', 'Z'), ' ', $lst).'<br>Status: rentable, gallery available")
+                .bindTooltip("'.$nam.'").setIcon(availableIcon);';
+                
+    //check if scooter is rented out            
+    };
+    if ($rnt == false && $act === 'ACTIVE') { 
+        $marker =   'var scooter'.$id.' = L.marker(['.$pos.'], {time: "'.$lst.'"}).addTo(map)
+                .bindPopup("<b>'.$tit.'</b><br><b>batteryLevel:</b>'.$bat.'<br><b>Status: </b>'.$act.'<br>Last updated: '.$lst=str_replace(array('T', 'Z'), ' ', $lst).'<br>Status: rented out, gallery on the move")
+                .bindTooltip("'.$nam.'").setIcon(isRentedIcon);';
+                
+    };
+    //check if scooter battery is low
+    if($act === "INACTIVE" && $bat > 0){
+        $marker =   'var scooter'.$id.' = L.marker(['.$pos.'], {time: "'.$lst.'"}).addTo(map)
+                .bindPopup("<b>'.$tit.'</b><br><b>batteryLevel:</b>'.$bat.'<br><b>Status: </b>'.$act.'<br>Last updated: '.$lst=str_replace(array('T', 'Z'), ' ', $lst).'<br>Status: battery low, gallery online")
+                .bindTooltip("'.$nam.'").setIcon(lowBatIcon);';
+    };        
+
+    //check if scooters battery is dead
+    if($act === "INACTIVE" && $bat == 0){
+        $marker =   'var scooter'.$id.' = L.marker(['.$pos.'], {time: "'.$lst.'"}).addTo(map)
+                .bindPopup("<b>'.$tit.'</b><br><b>batteryLevel:</b>'.$bat.'<br><b>Status: </b>'.$act.'<br>Last updated: '.$lst=str_replace(array('T', 'Z'), ' ', $lst).'<br>Status: battery dead, gallery unavailable")
+                .bindTooltip("'.$nam.'").setIcon(noBatIcon);';
+    };        
+
+    //check if scooters is dead
+    if($act === "DAMAGED" || $act === "MAINTAINANCE" || $act === "OUT_OF_ORDER"){
+        $marker =   'var scooter'.$id.' = L.marker(['.$pos.'], {time: "'.$lst.'"}).addTo(map)
+                .bindPopup("<b>'.$tit.'</b><br><b>batteryLevel:</b>'.$bat.'<br><b>Status: </b>'.$act.'<br>Last updated: '.$lst=str_replace(array('T', 'Z'), ' ', $lst).'<br>Status: scooter in maintenance, gallery unavailable")
+                .bindTooltip("'.$nam.'").setIcon(isMaintenanceIcon);';
+    };        
+
+
+    return $marker;
+
+
+}
+
+
+function appendJSON($filename, $data){ // create historical json data for documentation over time
+
+    // read the file if present
+    $handle = @fopen($filename, 'r+');
+
+    // create the file if needed
+    if ($handle === null)
+    {
+        $handle = fopen($filename, 'w+');
+    }
+
+    if ($handle)
+    {
+        // seek to the end
+        fseek($handle, 0, SEEK_END);
+
+        // are we at the end of is the file empty
+        if (ftell($handle) > 0)
+        {
+            // move back a byte
+            fseek($handle, -1, SEEK_END);
+
+            // add the trailing comma
+            fwrite($handle, ',', 1);
+
+            // add the new json string
+            fwrite($handle, json_encode($data) . ']');
+        }
+        else
+        {
+            // write the first event inside an array
+            fwrite($handle, json_encode(array($data)));
+        }
+
+            // close the handle on the file
+            fclose($handle);
+    }
+
+
+}
+
+
+
+function callAPI($url){
+        $curl = curl_init($url);
+        curl_setopt($curl, CURLOPT_FAILONERROR, true);
+        curl_setopt($curl, CURLOPT_FOLLOWLOCATION, true);
+        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
+        curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
+        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);  
+        curl_setopt($curl, CURLOPT_HTTPHEADER, array(
+                'x-api-key: bpEUTJEBTf74oGRWxaIcW7aeZMzDDODe1yBoSxi2',
+                'Content-Type: application/json',
+        )); // set the api key
+        curl_setopt($curl, CURLOPT_USERAGENT,'ProductionRelease/3.8.2 (app.tier.sharing; build:3.8.2.0; iOS 12.4.4) Alamofire/4.9.1'); // set user-agent to that of the Tier.app, sniffed by burpsuite
+
+        $result = curl_exec($curl);
+        if(!$result){die("Connection Failure");}
+        curl_close($curl);
+        return $result;
+}
+
+
+
+?>
+
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+        <title>OPENCOIL</title>
+        <script src="./js/jquery-1.12.4.min.js"></script>
+        <script src='./js/leaflet.js'></script>
+        <!--  icons -->
+        <script src="./js/bootstrap.min.js"></script>
+        <script src="./js/leaflet.awesome-markers.js"></script>
+        <link rel="stylesheet" href="./css/leaflet.css"/>
+        <link rel="stylesheet" href="./css/bootstrap.min.css"/>
+        <link rel="stylesheet" href="./css/bootstrap-theme.min.css"/>
+        <link rel="stylesheet" href="./css/font-awesome.min.css"/>
+        <link rel="stylesheet" href="./css/leaflet.awesome-markers.css"/>
+        <!-- <link rel="stylesheet" href="./css/leaflet.awesome.rotate.css"/> -->
+        <!-- location -->
+        <link rel="stylesheet" href="./css/L.Control.Locate.min.css"/>
+        <script src="./js/L.Control.Locate.min.js" charset="utf-8"></script>
+        <!-- main css -->
+        <link rel="stylesheet" href="./css/main.css"/>
+        <!-- begin timeslider
+        <script src="./js/SliderControl.js"></script>
+        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
+        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
+        <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
+        <!-- end of timeslider -->
+        
+        <script>
+            L_NO_TOUCH = false;
+            L_DISABLE_3D = false;
+        </script>
+    </head>
+<body>
+
+    <div id="map"></div>
+    <div id="title-container">
+        <h1>OPENCOIL</h1>
+        <h2>a roaming speedshow</h2>
+        <h3>26.10 - 1.11.</h3>
+        <!--<p>legendary code has once been written on a cold rainy night in october. it was 2 nay 1 day before the opening of this show when i typed this silly code. it was legendary. both the situation as well as the code. thanks for reading. bye</p>-->
+    <div id="bottom_menu">
+        <a href="#" onclick="document.getElementById('infotext').style.visibility='visible';document.getElementById('infotext').style.opacity='1';document.getElementById('contacttext').style.visibility='hidden';document.getElementById('abouttext').style.visibility='hidden';document.getElementById('howtotext').style.visibility='hidden';">info</a>
+        <a href="#" onclick="document.getElementById('howtotext').style.visibility='visible';document.getElementById('howtotext').style.opacity='1';document.getElementById('infotext').style.visibility='hidden';document.getElementById('abouttext').style.visibility='hidden';document.getElementById('contacttext').style.visibility='hidden';">how to</a>
+        <a href="#" onclick="document.getElementById('abouttext').style.visibility='visible';document.getElementById('abouttext').style.opacity='1';document.getElementById('contacttext').style.visibility='hidden';document.getElementById('infotext').style.visibility='hidden';document.getElementById('howtotext').style.visibility='hidden';">about</a>
+        <a href="#" onclick="document.getElementById('contacttext').style.visibility='visible';document.getElementById('contacttext').style.opacity='1';document.getElementById('infotext').style.visibility='hidden';document.getElementById('abouttext').style.visibility='hidden';document.getElementById('howtotext').style.visibility='hidden';">contact</a>
+    </div>
+    </div>
+<div id="howtotext">
+    <div id="infobuttons">
+        <div id="closeButton"  onclick="document.getElementById('howtotext').style.visibility='hidden';document.getElementById('howtotext').style.opacity='0';">X</div>
+        <div id="enButton"  onclick="document.getElementById('howtotext_en').style.visibility='visible';document.getElementById('howtotext_en').style.opacity='1';">EN</div>
+    </div>
+    <p>
+        <span id="howto">HOW TO: Die Scooter Gallerie besuchen</span><br><br>
+        1. Finde den Roller: Der aktuelle Standort aller Opencoil Roller wird dir auf der Karte angezeigt.<br> 
+        <span>Ein Pin mit dem 'Wifi' Icon bedeutet die Gallerie ist verfügbar.</span><br>
+        <span>Ein Pin mit einem Stundenglas Icon bedeuted, dass die Gallerie aktuell besetzt ist.</span><br>
+        <span>Ein schwarzer Pin mit Werkzeug Icon bedeuted, dass der Roller aktuell gewartet wird.</span><br><br>
+        2. Verbinde dich mit dem Wifi Netzwerk. Es trägt den Namen der Arbeit die in der Gallerie zu sehen ist.<br>
+        Auf dem iPhone sollte sich automatisch ein Fenster öffnen, indem nach kurzer Ladezeit die Arbeit zu sehen ist. Sollte dies einmal nicht funktionieren, öffne selbst den Browser und tipp die folgende Adresse ein: opencoil.local<br>
+        Auf Android Geräten bekommst du eventuell ein Popup bekommen welches dich fragt ob du die Verbindung zum Netzwerk behalten möchtest, da keine Verbindung zum Internet besteht. Klicke Verbindung behalten. Sollte dich dein Gerät fragen ob du dich ins Netzwerk einloggen möchtest, klicke einloggen. Alternativ kannst du einen Browser deiner Wahl öffnen und entweder 'opencoil.show' oder eine beliebige Zeichenfolge gefolgt von '.com' in das URL Feld eingeben.<br><br>
+        Solltest du Hilfe benötigen, zögere nicht uns per <a href="mailto:service@opencoil.show">Mail</a> oder <a href="https://t.me/opencoil">Telegram App</a> zu kontaktieren.<br><br>
+        Support kann sowohl in Deutsch als auch in Englisch geleistet werden.<br><br>
+        Allgemeine Infos<br><br>
+        Die Arbeiten von Constant Dulaart & Martin Howse nutzen den Namen des Netzwerks, der sich bei ihnen konstant ändert. Es ist normal, dass du dich nicht mit ihnen verbinden kannst.<br>
+        Die Arbeit von Danja Vasiliev wurde für Android Geräte optimiert. Auf dem iPhone kannst du, indem du mit zwei Fingern über das Bild streichst, ein Rennen simulieren.<br>
+        Generell braucht es eventuell kurz bis die Arbeiten im Browser angezeigt werden. Geduld bitte.<br><br>
+        Viel Spaß!
+    </p>
+</div>
+<div id="howtotext_en">
+    <div id="closeButton"  onclick="document.getElementById('howtotext_en').style.visibility='hidden'; document.getElementById('howtotext').style.visibility='hidden';">X</div>
+    <p>
+        <span id="howto">HOW TO: Visit the scooter gallery</span><br><br>
+        1. Find a scooter: The current location of all scooters will be displayed on the map.<br> 
+        <span>A map marker with a wifi icon means the gallery is available .</span>
+        <span>a marker with an hourglass icon means its currently unavailable.</span>
+        <span>a black marker & wrench icon means the scooter is beeing serviced.</span><br><br>
+        2. Connect to the wifi network. The name should be the same as the artwork title.<br>
+        Using an iPhone there should be a portal page popping up automatically. After a few seconds it will display the artwork. Should this not work for you, open up a browser and type 'opencoil.local' in the adressbar.<br>
+        On an Android device you might get a popup asking you wether you want to stay connected to the network even without an internet connection. select yes. Should your device ask wether you want to log in to the network, select yes as well. Otherwise open up a browser and type either 'opencoil.show' or any short combination of letters followed by '.com' into the adressbar.<br><br>
+        if you can't get it to work, don't hesitate to contact us via <a href="mailto:service@opencoil.show">mail</a> or <a href="https://t.me/opencoil">Telegram app</a><br><br>
+        Support is available in german and english.<br><br>
+        General information<br><br>
+        The works by Constant Dullaart & Martin Howse use the actual network name, wich changes constantly. It's normal that you can not connect to these.<br>
+        Danja Vasiliev's work was optimized for Android devices. On an iPhone you can simulate a race by swiping over the picture displayed using two fingers.<br>
+        In general the works might sometimes take a second to load. be patient.<br><br>
+        Have fun!
+    </p>
+</div>
+<div id="abouttext">
+    <div id="infobuttons">
+        <div id="closeButton"  onclick="document.getElementById('abouttext').style.visibility='hidden';document.getElementById('abouttext').style.opacity='0';">X</div>
+    </div>
+    <p>
+        OPENCOIL - a roaming speedshow<br><br>
+        <span id="infolink">curated by Dennis de Bel & Anton Jehle</span><br><br>
+        Impressum<br><br>
+        <span id="infolink">
+            Zentrum für Netzkunst e.V.<br>
+            c/o Robert Sakrowski<br>
+            Kollwitzstraße 71<br>
+            10435 Berlin<br><br>
+            Register-Eintrag Nr.: VR 38280 B<br>
+            Steuernummer 27/647/51440
+        </span>
+    </p>
+</div>
+<div id="contacttext">
+    <div id="infobuttons">
+        <div id="closeButton"  onclick="document.getElementById('contacttext').style.visibility='hidden';document.getElementById('contacttext').style.opacity='0';">X</div>
+    </div>
+    <p>
+        Generelle Anfragen / general inquiries<br><br>
+        <a id="infolink" href="mailto:mail@opencoil.show">mail@opencoil.show</a><br><br>
+        Technischer Support / technical support<br><br>
+        <span>Mail: </span><a id="infolink" href="mailto:service@opencoil.show" style="padding-left: 0;">service@opencoil.show</a><br>
+        <span>Telegram: </span><a id="infolink" href="https://t.me/opencoil" style="padding-left: 0;">https://t.me/opencoil</a><br><br>
+        Zentrum für Netzkunst<br><br>
+        <span id="infolink">Werkstatt Haus der Statistik<br></span>
+        <span id="infolink">Karl-Marx-Allee 1, Haus D<br></span>
+        <span id="infolink">10178 Berlin<br></span>
+        <a id="infolink" href="mailto:info@netart.berlin">info@netart.berlin</a>
+
+    </p>
+
+</div>
+<div id="infotext">
+    <div id="infobuttons">
+        <div id="closeButton"  onclick="document.getElementById('infotext').style.visibility='hidden';document.getElementById('infotext').style.opacity='0';">X</div>
+        <div id="enButton"  onclick="document.getElementById('infotext_en').style.visibility='visible';document.getElementById('infotext_en').style.opacity='1';">EN</div>
+    </div>
+    <p>
+        OPENCOIL – a roaming Speedshow <br><br>
+
+        Die Ausstellung OPENCOIL setzt sich mit den Auswirkungen von Mikro-Mobilitätsdiensten auf den Stadtraum auseinander, indem sie ihre dezentrale Infrastruktur als Ausstellungsraum nutzt und gleichzeitig die Bedingungen und Auswirkungen dieser Infrastrukturen auch zum Thema macht. 
+
+        <br><br>
+        11 Künstler*innen wurden eingeladen, ihre Arbeiten auf einem kleinen Wifi Controller mit ~2MB Offline-Speicher zu präsentieren. 
+
+        <br><br>
+        Diese „digitalen Galerieräume“ werden an 11 zufällig ausgewählten E-Scootern angebracht.
+
+        <br>
+
+        So fährt die Ausstellung, von den Nutzer*Innen der Roller unbemerkt, als „roaming Speedshow“ durch die Stadt.
+
+        <br><br>
+        Der aktuelle Standort der Kunstwerke kann ab dem 26. Oktober über diese Website verfolgt werden. Damit die Werke betrachtet werden können, muss die „Roller-Galerie“ im Stadtraum gefunden werden.
+
+        <br><br>
+        Sobald der Roller angemietet ist, erhalten die Besucher*innen über ihr persönliches Smartphone, Zugang zu dem 2MB großen Galerieraum und den ausgestellten Werken.
+        <br><br>
+        Während Kapazitätsbeschränkungen und die bevorzugte Vermeidung von Zusammenkünften in geschlossenen Räumen, traditionelle Galerien und Museen vor Herausforderungen stellen, zielt OPENCOIL darauf ab, die Ortsunabhängigkeit des Online mit der Materialität des Offline (und umgekehrt) zu verbinden. Die Infrastruktur der „Mikro-Mobiltitätsdienste“ wird übernommen – klimaneutral und dezentral.
+        <br><br>
+        Die Gehwege vieler Städte auf der ganzen Welt wurden in den letzten Jahren von sogenannten 'dockless sharing vehicles' regelrecht überflutet. Mit Versprechungen von Umweltfreundlichkeit und Elektromobilität, besetzten diese Risikokapitalismus Aktivisten die Grauzone zwischen privatem und öffentlichem Raum auf den Straßen unserer Städte. Diese gewissenlose Gewissenhaftigkeit der "Mikro-Mobilitätsdienste" wirft jedoch wichtige Fragen zu städtischem Raum, Eigentum, Agentur, Produktion, Ökologie und sehr spätem Kapitalismus auf.
+        <br><br>
+        Wie umgehen mit der Inbesitznahme öffentlichen Raums?<br> 
+        Welche Werkzeuge und Wege gibt es sich diesen zurückzuerobern?<br>
+        <br>
+        OPENCOIL soll nicht nur ein Pandemie-tauglicher Weg sein, um Kunst im öffentlichen Offline-Raum zu zeigen. OPENCOIL ist auch eine kreative (Um-)Nutzung von E-Scootern, ein Versuch, sich ihnen mit künstlerischen Mitteln zu nähern.
+        <br>
+        Gezeigt werden Arbeiten, die sich mit Fragen der Überschneidung von öffentlichem und privatem Raum, dem Umgang mit Ressourcen sowie mit Greenwashing, Risikokapitalismus und Vandalismus befassen.
+        <br><br>
+        Die teilnehmenden Künstler*innen sind:
+        <br><br>
+        Aram Bartholl<br>
+        Constant Dullaart<br>
+        Dennis de Bel & Anton Jehle<br>
+        JODI<br>
+        Jonas Lund<br>
+        Martin Howse<br>
+        !Mediengruppe Bitnik<br>
+        Rosa Menkman<br>
+        Sarah Grant<br>
+        Sofya Aleynikova<br>
+        Danja Vasiliev<br>
+        <br><br>
+        Sonstige Erläuterungen:
+        <br><br>
+        Die künstlerischen Beiträge sind jeweils auf einem Wifi Mikrocontroller gespeichert, welcher mit einem Tretroller verbunden ist und so, sobald der Roller ausgeliehen ist, mit Strom versorgt wird. Um die Arbeiten zu sehen verbindet man sich mit dem vom Wifi Chip gesendeten, lokalen unverschlüsselten WiFi  Netzwerk. Es öffnet sich automatisch ein Webportal, indem die Arbeit zu sehen ist. Es ist keine mobile Datenverbindung notwendig.
+        Alle Arbeiten wurden von den Künstler*innen speziell für die Betrachtung auf Smartphones optimiert.
+        <br><br>
+        OPENCOIL ist in keiner Weise mit der den „Mikro-Mobilitätsdiensten“ assoziiert, sondern bedient sich lediglich am bestehenden Rollernetzwerk. Die Umnutzung der Roller zu einem Ausstellungsort ist nach der Ausstellung komplett reversibel und schränkt den herkömmlichen Gebrauch der Roller (auch während der Ausstellung) in keiner Weise ein. Die Roller werden nicht beschädigt.<br><br>
+        Die Ausstellung startet am 26. Oktober mit Rollern in ganz Berlin und wird in der Woche bis zum 1. November täglich von unserem Team gewartet und am Laufen gehalten. Sollte eine Arbeit beschädigt oder nicht auffindbar sein bitte per Mail (<a id="infolink" href="mailto:service@opencoil.show">service@opencoil.show</a>) oder über die Telegram App (<a id="infolink" href="https://t.me/opencoil">https://t.me/opencoil</a>)<br><br>
+    </p>
+    <div id="closeButtonbottom"  onclick="document.getElementById('infotext').style.visibility='hidden';">less info</div>
+</div>
+<div id="infotext_en">
+    <div id="closeButton"  onclick="document.getElementById('infotext_en').style.visibility='hidden'; document.getElementById('infotext').style.visibility='hidden';">X</div>
+    <p>
+        OPENCOIL - a roaming speed show
+        <br><br>
+        The OPENCOIL exhibition explores the impact of micro-mobility services on urban space by using its decentralised infrastructure as an exhibition space, while also addressing the conditions and effects of this infrastructure.
+        <br><br>
+        11 artists were invited to present their work on a small Wifi controller with ~2MB offline memory.
+        <br><br>
+        These "digital gallery spaces" are attached to 11 randomly selected e-scooters.
+        Thus the exhibition, unnoticed by the regular users of these scooters, drives through the city as a "roaming speed show".
+        <br><br>
+        From October 26th onwards the current location of the artworks will be displayed here on this website. In order to view the works the corresponding "Scooter Gallery" must be found in the offline urban space.
+        <br><br>
+        Once the scooter is rented, visitors will be able to access the 2MB gallery space and the exhibited works via their personal smartphone.
+        <br><br>
+        While capacity restrictions and the preferred avoidance of gatherings in closed spaces pose challenges on traditional galleries and museums, OPENCOIL aims to combine the independence of the online with the materiality of the offline (and vice versa). The infrastructure of "micro-mobility services" will be taken over - climate-neutral and decentralised.
+        <br><br>
+        The pavements of many cities around the world have been flooded in recent years by so-called 'dockless sharing vehicles'. With promises of eco-friendliness and electromobility, these risk capitalism activists have occupied the grey zone between private and public space on the streets of our cities. However, this unscrupulous conscientiousness of 'micro-mobility services' raises important questions about urban space, ownership, agency, production, ecology and very late capitalism.
+        <br><br>
+        How to deal with the occupation of public space?
+        What tools and ways are there to reclaim it?
+        <br><br>
+        OPENCOIL is not only meant to be a pandemic-proof way to show art in public offline space. OPENCOIL is also a creative (re)use of e-scooters, an attempt to approach them by artistic means.
+        On show are works that deal with questions of the overlap between public and private space, the use of resources, as well as greenwashing, risk capitalism and vandalism.
+        <br><br>
+        The participating artists are:
+        <br><br>
+        Aram Bartholl<br>
+        Constant Dullaart<br>
+        Dennis de Bel & Anton Jehle<br>
+        JODI<br>
+        Jonas Lund<br>
+        Martin Howse<br>
+        !Mediengruppe Bitnik<br>
+        Rosa Menkman<br>
+        Sarah Grant<br>
+        Sofya Aleynikova<br>
+        Danja Vasiliev<br>
+        <br><br><br>
+
+        Other explanatory notes:
+        <br><br>
+        The artistic contributions are each stored on a Wifi microcontroller, which is connected to a scooter and is thus supplied with power as soon as the scooter is rented. To view the works, you connect to the local unencrypted WiFi network sent by the Wifi chip. A web portal opens automatically, where the work can be viewed. No mobile data connection is necessary. All works have been specially optimised by the artists to be viewed on smartphones.
+        <br><br>
+        OPENCOIL is in no way associated with the "micro-mobility services", but only uses the existing scooter network. The conversion of the scooters into an exhibition space is completely reversible after the exhibition ends and in no way restricts the conventional use of the scooters (even during the exhibition). The scooters will not be damaged.
+        <br><br>
+        The exhibition will start on October 26th with scooters spread around Berlin. For one week, until November 1st, the exhibition will be serviced and kept running daily by our team. Should a work be damaged or not be found, please send an e-mail (<a id="infolink" href="mailto:service@opencoil.show">service@opencoil.show</a>) or use the Telegram App (<a id="infolink" href="https://t.me/opencoil">https://t.me/opencoil</a>)
+    </p>
+    <div id="closeButtonbottom"  onclick="document.getElementById('infotext').style.visibility='hidden'; document.getElementById('infotext_en').style.visibility='hidden';">less info</div>
+</div>
+    
+<script>
+        // define icons   
+        // prefix: glyphicon = bootstrap, list can be found here: https://getbootstrap.com/docs/3.3/components/
+        // prefix: fa = fontawesome, list is here: https://fontawesome.com/v4.7.0/cheatsheet/
+        var availableIcon = L.AwesomeMarkers.icon(
+            {"icon": "wifi", "iconColor": "white", "markerColor": "purple", "prefix": "fa"}
+        );
+        var isRentedIcon = L.AwesomeMarkers.icon(
+            {"icon": "hourglass-half", "iconColor": "white", "spin": "true", "markerColor": "pink", "prefix": "fa"}
+        );
+        var lowBatIcon = L.AwesomeMarkers.icon(
+            {"icon": "battery-1", "iconColor": "white", "markerColor": "pink", "prefix": "fa"}
+        );
+        var noBatIcon = L.AwesomeMarkers.icon(
+            {"icon": "battery-empty", "iconColor": "white", "markerColor": "black", "prefix": "fa"}
+        );
+        var isMaintenanceIcon = L.AwesomeMarkers.icon(
+            {"icon": "wrench", "iconColor": "white", "markerColor": "black", "prefix": "fa"}
+        );
+
+
+        var map = L.map('map', { zoomControl: false, attributionControl: false }).setView([52.516190, 13.377693], 11.5);
+
+        var Stamen_Toner = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.{ext}', {
+        attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+        subdomains: 'abcd',
+        minZoom: 0,
+        maxZoom: 20,
+        ext: 'png'
+        });
+        map.addLayer(Stamen_Toner);
+
+
+        //the magic: for each scooter in $scooters array, request status and construct marker
+        <?php 
+
+        $filename = "./latestData.json"; //latest locations, 1 entry per scooter
+        $filename_history = "./historicalData.json"; //historical locations
+
+        // check how old the latest json is
+        if (time()-filemtime($filename) > 60) { //if older than 60 seconds
+            $arrayToEcho = saveLatestJSON();
+            //append to historical json
+            appendJSON($filename_history, $arrayToEcho);
+
+            $latestData = json_encode($arrayToEcho, JSON_FORCE_OBJECT); // force object accepts 0 as a key for the array and not NULL
+            file_put_contents($filename, $latestData, LOCK_EX);
+
+
+            $id = 0; //start id
+            foreach($scooters as $item) {
+                echo makeMarker($id);
+                $id++;
+            }
+
+        } else { // file younger than 60 seconds
+            
+            $id = 0; //start id
+            foreach($scooters as $item) {
+                echo makeMarker($id);
+                $id++;
+            }
+        }
+
+
+
+
+        ?>
+
+        // time slider
+
+        //test markers
+        //var marker1 = L.marker([52.504926, 13.358061], {time: "2020-10-09T08:00:29Z"});
+        //var marker2 = L.marker([52.506926, 13.358061], {time: "2020-10-09T09:00:29Z"});
+        //var marker3 = L.marker([52.508926, 13.358061], {time: "2020-10-09T10:00:29Z"});
+
+        // var map = marker1;
+        //layerGroup = L.layerGroup([scooter0, scooter1, scooter2]); //make this dynamic
+        //var sliderControl = L.control.sliderControl({layer:layerGroup});
+        //map.addControl(sliderControl);
+        //sliderControl.startSlider();
+
+        // client location
+        L.control.locate(
+            {   "keepCurrentZoomLevel": "true", 
+                icon: 'fa fa-crosshairs',
+                follow: true,
+                circleStyle: {},  // change the style of the circle around the user's location
+                markerStyle: {},
+                locateOptions: {
+                    enableHighAccuracy: true
+                }
+            }).addTo(map);
+
+    </script>
+</body>
+</html>

website/maintenance-map/js/SliderControl.js

@@ -0,0 +1,193 @@
+L.Control.SliderControl = L.Control.extend({
+    options: {
+        position: 'topright',
+        layers: null,
+        timeAttribute: 'time',
+        isEpoch: false,     // whether the time attribute is seconds elapsed from epoch
+        startTimeIdx: 0,    // where to start looking for a timestring
+        timeStrLength: 19,  // the size of  yyyy-mm-dd hh:mm:ss - if millis are present this will be larger
+        maxValue: -1,
+        minValue: 0,
+        showAllOnStart: false,
+        markers: null,
+        range: false,
+        follow: false,
+        sameDate: false,
+        alwaysShowDate : false,
+        rezoom: null
+    },
+
+    initialize: function (options) {
+        L.Util.setOptions(this, options);
+        this._layer = this.options.layer;
+
+    },
+
+    extractTimestamp: function(time, options) {
+        if (options.isEpoch) {
+            time = (new Date(parseInt(time))).toString(); // this is local time
+        }
+        return time.substr(options.startTimeIdx, options.startTimeIdx + options.timeStrLength);
+    },
+
+    setPosition: function (position) {
+        var map = this._map;
+
+        if (map) {
+            map.removeControl(this);
+        }
+
+        this.options.position = position;
+
+        if (map) {
+            map.addControl(this);
+        }
+        this.startSlider();
+        return this;
+    },
+
+    onAdd: function (map) {
+        this.options.map = map;
+
+        // Create a control sliderContainer with a jquery ui slider
+        var sliderContainer = L.DomUtil.create('div', 'slider', this._container);
+        $(sliderContainer).append('<div id="leaflet-slider" style="width:200px"><div class="ui-slider-handle"></div><div id="slider-timestamp" style="width:200px; margin-top:13px; background-color:#FFFFFF; text-align:center; border-radius:5px;"></div></div>');
+        //Prevent map panning/zooming while using the slider
+        $(sliderContainer).mousedown(function () {
+            map.dragging.disable();
+        });
+        $(document).mouseup(function () {
+            map.dragging.enable();
+            //Hide the slider timestamp if not range and option alwaysShowDate is set on false
+            if (options.range || !options.alwaysShowDate) {
+                $('#slider-timestamp').html('');
+            }
+        });
+
+        var options = this.options;
+        this.options.markers = [];
+
+        //If a layer has been provided: calculate the min and max values for the slider
+        if (this._layer) {
+            var index_temp = 0;
+            this._layer.eachLayer(function (layer) {
+                options.markers[index_temp] = layer;
+                ++index_temp;
+            });
+            options.maxValue = index_temp - 1;
+            this.options = options;
+        } else {
+            console.log("Error: You have to specify a layer via new SliderControl({layer: your_layer});");
+        }
+        return sliderContainer;
+    },
+
+    onRemove: function (map) {
+        //Delete all markers which where added via the slider and remove the slider div
+        for (i = this.options.minValue; i <= this.options.maxValue; i++) {
+            map.removeLayer(this.options.markers[i]);
+        }
+        $('#leaflet-slider').remove();
+
+        // unbind listeners to prevent memory leaks
+        $(document).off("mouseup");
+        $(".slider").off("mousedown");
+    },
+
+    startSlider: function () {
+        _options = this.options;
+        _extractTimestamp = this.extractTimestamp
+        var index_start = _options.minValue;
+        if(_options.showAllOnStart){
+            index_start = _options.maxValue;
+            if(_options.range) _options.values = [_options.minValue,_options.maxValue];
+            else _options.value = _options.maxValue;
+        }
+        $("#leaflet-slider").slider({
+            range: _options.range,
+            value: _options.value,
+            values: _options.values,
+            min: _options.minValue,
+            max: _options.maxValue,
+            sameDate: _options.sameDate,
+            step: 1,
+            slide: function (e, ui) {
+                var map = _options.map;
+                var fg = L.featureGroup();
+                if(!!_options.markers[ui.value]) {
+                    // If there is no time property, this line has to be removed (or exchanged with a different property)
+                    if(_options.markers[ui.value].feature !== undefined) {
+                        if(_options.markers[ui.value].feature.properties[_options.timeAttribute]){
+                            if(_options.markers[ui.value]) $('#slider-timestamp').html(
+                                _extractTimestamp(_options.markers[ui.value].feature.properties[_options.timeAttribute], _options));
+                        }else {
+                            console.error("Time property "+ _options.timeAttribute +" not found in data");
+                        }
+                    }else {
+                        // set by leaflet Vector Layers
+                        if(_options.markers [ui.value].options[_options.timeAttribute]){
+                            if(_options.markers[ui.value]) $('#slider-timestamp').html(
+                                _extractTimestamp(_options.markers[ui.value].options[_options.timeAttribute], _options));
+                        }else {
+                            console.error("Time property "+ _options.timeAttribute +" not found in data");
+                        }
+                    }
+
+                    var i;
+                    // clear markers
+                    for (i = _options.minValue; i <= _options.maxValue; i++) {
+                        if(_options.markers[i]) map.removeLayer(_options.markers[i]);
+                    }
+                    if(_options.range){
+                        // jquery ui using range
+                        for (i = ui.values[0]; i <= ui.values[1]; i++){
+                           if(_options.markers[i]) {
+                               map.addLayer(_options.markers[i]);
+                               fg.addLayer(_options.markers[i]);
+                           }
+                        }
+                    }else if(_options.follow){
+                        for (i = ui.value - _options.follow + 1; i <= ui.value ; i++) {
+                            if(_options.markers[i]) {
+                                map.addLayer(_options.markers[i]);
+                                fg.addLayer(_options.markers[i]);
+                            }
+                        }
+                    }else if(_options.sameDate){
+                        var currentTime;
+                        if (_options.markers[ui.value].feature !== undefined) {
+                            currentTime = _options.markers[ui.value].feature.properties.time;
+                        } else {
+                            currentTime = _options.markers[ui.value].options.time;
+                        }
+                        for (i = _options.minValue; i <= _options.maxValue; i++) {
+                            if(_options.markers[i].options.time == currentTime) map.addLayer(_options.markers[i]);
+                        }
+                    }else{
+                        for (i = _options.minValue; i <= ui.value ; i++) {
+                            if(_options.markers[i]) {
+                                map.addLayer(_options.markers[i]);
+                                fg.addLayer(_options.markers[i]);
+                            }
+                        }
+                    }
+                };
+                if(_options.rezoom) {
+                    map.fitBounds(fg.getBounds(), {
+                        maxZoom: _options.rezoom
+                    });
+                }
+            }
+        });
+        if (!_options.range && _options.alwaysShowDate) {
+            $('#slider-timestamp').html(_extractTimeStamp(_options.markers[index_start].feature.properties[_options.timeAttribute], _options));
+        }
+        for (i = _options.minValue; i <= index_start; i++) {
+            _options.map.addLayer(_options.markers[i]);
+        }
+    }
+});
+
+L.control.sliderControl = function (options) {
+    return new L.Control.SliderControl(options);
+};

website/maintenance-map/js/leaflet.awesome-markers.js

@@ -0,0 +1,125 @@
+/*
+  Leaflet.AwesomeMarkers, a plugin that adds colorful iconic markers for Leaflet, based on the Font Awesome icons
+  (c) 2012-2013, Lennard Voogdt
+
+  http://leafletjs.com
+  https://github.com/lvoogdt
+*/
+
+/*global L*/
+
+(function (window, document, undefined) {
+    "use strict";
+    /*
+     * Leaflet.AwesomeMarkers assumes that you have already included the Leaflet library.
+     */
+
+    L.AwesomeMarkers = {};
+
+    L.AwesomeMarkers.version = '2.0.1';
+
+    L.AwesomeMarkers.Icon = L.Icon.extend({
+        options: {
+            iconSize: [35, 45],
+            iconAnchor:   [17, 42],
+            popupAnchor: [1, -32],
+            shadowAnchor: [10, 12],
+            shadowSize: [36, 16],
+            className: 'awesome-marker',
+            prefix: 'glyphicon',
+            spinClass: 'fa-spin',
+            extraClasses: '',
+            icon: 'home',
+            markerColor: 'blue',
+            iconColor: 'white'
+        },
+
+        initialize: function (options) {
+            options = L.Util.setOptions(this, options);
+        },
+
+        createIcon: function () {
+            var div = document.createElement('div'),
+                options = this.options;
+
+            if (options.icon) {
+                div.innerHTML = this._createInner();
+            }
+
+            if (options.bgPos) {
+                div.style.backgroundPosition =
+                    (-options.bgPos.x) + 'px ' + (-options.bgPos.y) + 'px';
+            }
+
+            this._setIconStyles(div, 'icon-' + options.markerColor);
+            return div;
+        },
+
+        _createInner: function() {
+            var iconClass, iconSpinClass = "", iconColorClass = "", iconColorStyle = "", options = this.options;
+
+            if(options.icon.slice(0,options.prefix.length+1) === options.prefix + "-") {
+                iconClass = options.icon;
+            } else {
+                iconClass = options.prefix + "-" + options.icon;
+            }
+
+            if(options.spin && typeof options.spinClass === "string") {
+                iconSpinClass = options.spinClass;
+            }
+
+            if(options.iconColor) {
+                if(options.iconColor === 'white' || options.iconColor === 'black') {
+                    iconColorClass = "icon-" + options.iconColor;
+                } else {
+                    iconColorStyle = "style='color: " + options.iconColor + "' ";
+                }
+            }
+
+            return "<i " + iconColorStyle + "class='" + options.extraClasses + " " + options.prefix + " " + iconClass + " " + iconSpinClass + " " + iconColorClass + "'></i>";
+        },
+
+        _setIconStyles: function (img, name) {
+            var options = this.options,
+                size = L.point(options[name === 'shadow' ? 'shadowSize' : 'iconSize']),
+                anchor;
+
+            if (name === 'shadow') {
+                anchor = L.point(options.shadowAnchor || options.iconAnchor);
+            } else {
+                anchor = L.point(options.iconAnchor);
+            }
+
+            if (!anchor && size) {
+                anchor = size.divideBy(2, true);
+            }
+
+            img.className = 'awesome-marker-' + name + ' ' + options.className;
+
+            if (anchor) {
+                img.style.marginLeft = (-anchor.x) + 'px';
+                img.style.marginTop  = (-anchor.y) + 'px';
+            }
+
+            if (size) {
+                img.style.width  = size.x + 'px';
+                img.style.height = size.y + 'px';
+            }
+        },
+
+        createShadow: function () {
+            var div = document.createElement('div');
+
+            this._setIconStyles(div, 'shadow');
+            return div;
+      }
+    });
+        
+    L.AwesomeMarkers.icon = function (options) {
+        return new L.AwesomeMarkers.Icon(options);
+    };
+
+}(this, document));
+
+
+