Statically include leaflet, improve map integration

static/leaflet/leaflet.css

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

static/map.js

@@ -0,0 +1,274 @@
+var zone_a = L.polygon([
+  [47.2999, 11.4829],
+  [47.2943, 11.4872],
+  [47.2799, 11.4779],
+  [47.2801, 11.4726],
+  [47.2710, 11.4726],
+  [47.2671, 11.4513],
+  [47.2680, 11.4472],
+  [47.2696, 11.4419],
+  [47.2773, 11.4222],
+  [47.2803, 11.4086],
+  [47.2802, 11.4049],
+  [47.2794, 11.4015],
+  [47.2816, 11.4004],
+  [47.2851, 11.4048],
+  [47.2859, 11.4104],
+  [47.2888, 11.4115],
+  [47.2902, 11.4136],
+  [47.2905, 11.4169],
+  [47.2883, 11.4218],
+  [47.2887, 11.4253],
+  [47.2954, 11.4251],
+  [47.2959, 11.4310],
+  [47.2963, 11.4363],
+  [47.2949, 11.4398],
+  [47.2908, 11.4445],
+  [47.2915, 11.4513],
+  [47.2940, 11.4549],
+  [47.2951, 11.4605],
+  [47.2967, 11.4668],
+  [47.3000, 11.4692],
+  [47.3010, 11.4716],
+  [47.3021, 11.4782]
+], {
+  color: "green",
+  fillColor: "#3ef06e",
+  fillOpacity: 0.3
+});
+
+var zone_b_1 = L.polygon([
+  [47.3021, 11.4782],
+  [47.2999, 11.4829],
+  [47.2943, 11.4872],
+  [47.2799, 11.4779],
+  [47.2801, 11.4726],
+  [47.2710, 11.4726],
+  [47.2731, 11.4837],
+  [47.2725, 11.4955],
+  [47.2731, 11.4986],
+  [47.2763, 11.5063],
+  [47.2769, 11.5103],
+  [47.2770, 11.5219],
+  [47.2781, 11.5288],
+  [47.2823, 11.5261],
+  [47.2861, 11.5257],
+  [47.2926, 11.5234],
+  [47.2962, 11.5246],
+  [47.2999, 11.5246],
+  [47.3039, 11.5227],
+  [47.3072, 11.5213],
+  [47.3095, 11.5196],
+  [47.3067, 11.5167],
+  [47.3064, 11.5078]
+]);
+
+var zone_b_2 = L.polygon([
+  [47.2794, 11.4015],
+  [47.2774, 11.3984],
+  [47.2782, 11.3970],
+  [47.2781, 11.3962],
+  [47.2778, 11.3960],
+  [47.2774, 11.3953],
+  [47.2769, 11.3947],
+  [47.2764, 11.3940],
+  [47.2755, 11.3930],
+  [47.2760, 11.3935],
+  [47.2758, 11.3934],
+  [47.2755, 11.3930],
+  [47.2753, 11.3927],
+  [47.2751, 11.3919],
+  [47.2749, 11.3918],
+  [47.2746, 11.3919],
+  [47.2740, 11.3918],
+  [47.2739, 11.3916],
+  [47.2734, 11.3906],
+  [47.2729, 11.3900],
+  [47.2727, 11.3908],
+  [47.2715, 11.3898],
+  [47.2700, 11.3883],
+  [47.2699, 11.3885],
+  [47.2698, 11.3882],
+  [47.2697, 11.3879],
+  [47.2700, 11.3876],
+  [47.2696, 11.3866],
+  [47.2694, 11.3866],
+  [47.2688, 11.3871],
+  [47.2684, 11.3860],
+  [47.2677, 11.3848],
+  [47.2673, 11.3855],
+  [47.2672, 11.3855],
+  [47.2662, 11.3861],
+  [47.2640, 11.3830],
+  [47.2617, 11.3811],
+  [47.2608, 11.3829],
+  [47.2617, 11.3840],
+  [47.2616, 11.3844],
+  [47.2622, 11.3893],
+  [47.2627, 11.3949],
+  [47.2629, 11.3964],
+  [47.2631, 11.3998],
+  [47.2618, 11.3993],
+  [47.2573, 11.4007],
+  [47.2576, 11.4037],
+  [47.2666, 11.4052],
+  [47.2683, 11.4061],
+  [47.2695, 11.4077],
+  [47.2703, 11.4084],
+  [47.2707, 11.4085],
+  [47.2717, 11.4086],
+  [47.2720, 11.4089],
+  [47.2734, 11.4123],
+  [47.2719, 11.4154],
+  [47.2714, 11.4149],
+  [47.2713, 11.4143],
+  [47.2700, 11.4151],
+  [47.2690, 11.4155],
+  [47.2650, 11.4239],
+  [47.2660, 11.4247],
+  [47.2650, 11.4262],
+  [47.2632, 11.4277],
+  [47.2638, 11.4320],
+  [47.2638, 11.4370],
+  [47.2642, 11.4372],
+  [47.2647, 11.4420],
+  [47.2662, 11.4452],
+  [47.2680, 11.4472],
+  [47.2696, 11.4419],
+  [47.2773, 11.4222],
+  [47.2803, 11.4086],
+  [47.2802, 11.4049],
+  [47.2794, 11.4015]
+]);
+
+var zone_c = L.polygon([
+  [47.2617, 11.3811],
+  [47.2608, 11.3829],
+  [47.2617, 11.3840],
+  [47.2616, 11.3844],
+  [47.2622, 11.3893],
+  [47.2627, 11.3949],
+  [47.2629, 11.3964],
+  [47.2631, 11.3998],
+  [47.2618, 11.3993],
+  [47.2573, 11.4007],
+  [47.2576, 11.4037],
+  [47.2666, 11.4052],
+  [47.2683, 11.4061],
+  [47.2695, 11.4077],
+  [47.2703, 11.4084],
+  [47.2707, 11.4085],
+  [47.2717, 11.4086],
+  [47.2720, 11.4089],
+  [47.2734, 11.4123],
+  [47.2719, 11.4154],
+  [47.2714, 11.4149],
+  [47.2713, 11.4143],
+  [47.2700, 11.4151],
+  [47.2690, 11.4155],
+  [47.2650, 11.4239],
+  [47.2660, 11.4247],
+  [47.2650, 11.4262],
+  [47.2632, 11.4277],
+  [47.2638, 11.4320],
+  [47.2638, 11.4370],
+  [47.2642, 11.4372],
+  [47.2647, 11.4420],
+  [47.2662, 11.4452],
+  [47.2680, 11.4472],
+  [47.2671, 11.4513],
+  [47.2624, 11.4510],
+  [47.2612, 11.4386],
+  [47.2574, 11.4307],
+  [47.2555, 11.4246],
+  [47.2541, 11.4172],
+  [47.2516, 11.4021],
+  [47.2491, 11.4025],
+  [47.2473, 11.3949],
+  [47.2522, 11.3917],
+  [47.2533, 11.3888],
+  [47.2528, 11.3842],
+  [47.2537, 11.3730],
+  [47.2570, 11.3767],
+  [47.2581, 11.3752],
+  [47.2644, 11.3725],
+  [47.2662, 11.3726],
+  [47.2669, 11.3733],
+  [47.2678, 11.3730],
+  [47.2682, 11.3721],
+  [47.2691, 11.3714],
+  [47.2702, 11.3700],
+  [47.2721, 11.3697],
+  [47.2735, 11.3702],
+  [47.2813, 11.3858],
+  [47.2805, 11.3926],
+  [47.2805, 11.3975],
+  [47.2816, 11.4004],
+  [47.2794, 11.4015],
+  [47.2774, 11.3984],
+  [47.2782, 11.3970],
+  [47.2781, 11.3962],
+  [47.2778, 11.3960],
+  [47.2774, 11.3953],
+  [47.2769, 11.3947],
+  [47.2764, 11.3940],
+  [47.2755, 11.3930],
+  [47.2760, 11.3935],
+  [47.2758, 11.3934],
+  [47.2755, 11.3930],
+  [47.2753, 11.3927],
+  [47.2751, 11.3919],
+  [47.2749, 11.3918],
+  [47.2746, 11.3919],
+  [47.2740, 11.3918],
+  [47.2739, 11.3916],
+  [47.2734, 11.3906],
+  [47.2729, 11.3900],
+  [47.2727, 11.3908],
+  [47.2715, 11.3898],
+  [47.2700, 11.3883],
+  [47.2699, 11.3885],
+  [47.2698, 11.3882],
+  [47.2697, 11.3879],
+  [47.2700, 11.3876],
+  [47.2696, 11.3866],
+  [47.2694, 11.3866],
+  [47.2688, 11.3871],
+  [47.2684, 11.3860],
+  [47.2677, 11.3848],
+  [47.2673, 11.3855],
+  [47.2672, 11.3855],
+  [47.2662, 11.3861],
+  [47.2640, 11.3830],
+  [47.2617, 11.3811]
+], {
+  color: "orange",
+  fillColor: "#ffeb0a",
+  fillOpacity: 0.3
+});
+
+function initMap(event) {
+  var map = L.map('map', {
+    maxZoom: 18,
+    minZoom: 10,
+    maxBounds: L.latLngBounds(L.latLng(47.3770, 11.2025), L.latLng(47.1770, 11.7025)),
+    maxBoundsViscosity: 1,
+    scrollWheelZoom: false
+  }).setView([47.2770, 11.4525], 12);
+
+  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+  }).addTo(map);
+
+  //Adding Zones in prefered order, to ensure correct coloring of borders
+  zone_c.addTo(map);
+  zone_a.addTo(map);
+  zone_b_1.addTo(map);
+  zone_b_2.addTo(map);
+}
+
+if (document.getElementById("map") != null) {
+  initMap(null);
+} else {
+  window.addEventListener("DOMContentLoaded", initMap);
+}

static/styles.css

@@ -266,6 +266,49 @@ footer h2 {
   text-align: initial;
 }
 
+#map {
+  height: 400px;
+  z-index: 1;
+}
+
+.zone-heading {
+  text-align: left;
+  margin-top: 1em;
+  margin-bottom: 0.3em;
+}
+
+.legend {
+  width: fit-content;
+  margin: 0.3em auto;
+}
+
+.legend-item {
+  display: inline-flex;
+  margin: 0 0.3em;
+  align-items: center;
+}
+
+.legend-square {
+  display: inline-block;
+  height: 1em;
+  width: 1em;
+  margin-right: 0.2em;
+  border-radius: 0.2em;
+  border: 1px solid #868686;
+}
+
+.green {
+  background-color: #3ef06e;
+}
+
+.blue {
+  background-color: #3388ff;
+}
+
+.orange {
+  background-color: #ffeb0a;
+}
+
 @media only screen and (max-width:768px) {
   .header-content {
     flex-direction: column;

static/styles_mobile.css

@@ -1,234 +0,0 @@
-*, *:before, *:after {
-  box-sizing: border-box;
-}
-
-html {
-  scroll-behavior: smooth;
-  scroll-padding-top: 7em;
-  height: 100%;
-}
-
-body {
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-  min-height: 100%;
-  font-size: 20px;
-  font-family: Lato, Roboto, sans-serif;
-}
-
-header, main, footer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-main {
-  flex-grow: 1;
-}
-
-.header-content, .main-content, .footer-content {
-  max-width: 1000px;
-  width: 100%;
-}
-
-.header-content {
-  display: flex;
-  flex-direction: column;
-  align-items: start;
-  margin: 0 auto;
-  padding: 5px 8px;
-}
-
-.header-nav .header-content {
-  font-size: 1.2em;
-}
-
-.header-contact .header-content {
-  line-height: 1.6em;
-}
-
-.header-right {
-  flex-grow: 1;
-  text-align: right;
-  margin-right: 10px;
-  display: flex;
-  flex-direction: row;
-  justify-content: right;
-}
-
-.header-spacer {
-  flex-grow: 1;
-  min-width: 1em;
-}
-
-.header-title {
-  font-size: 1.3em;
-  display: inline-flex;
-  align-items: center;
-}
-
-.header-nav {
-  width: 100%;
-  background-color: #77bc65;
-  position: sticky;
-  z-index: 100;
-  top: 0;
-  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.15);
-}
-
-.header-contact {
-  width: 100%;
-  background-color: #D6701C;
-}
-
-a {
-  text-decoration: none;
-}
-
-a, a:visited, a:hover, a:focus {
-  color: inherit;
-}
-
-a:hover {
-  text-decoration: underline;
-}
-
-.service-link:hover {
-  text-decoration: none;
-}
-
-.service-icon:hover {
-  filter: drop-shadow( 0px 0px 3px rgba(0, 0, 0, .7));
-}
-
-.nav-img {
-  width: 100px;
-  height: 60px;
-}
-
-/*
-.link-button {
-  background-color: rgba(255, 255, 255, 0.3);
-  border-radius: 10px;
-  padding: 10px 15px;
-}
-*/
-
-.lang-item {
-  margin: 0 0.2em;
-}
-
-h1, h2, h3, h4 {
-  text-align: center;
-}
-
-
-.overview {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  width: 100%;
-  justify-content: space-between;
-  text-align: center;
-}
-
-.overview > * {
-
-}
-
-.service-link {
-  display: flex;
-  flex-direction: column;
-}
-
-.service-icon {
-  width: 100%;
-}
-
-.service-name {
-  font-weight: bold;
-  font-size: 1.2em;
-  margin-bottom: 0.4em;
-}
-
-/*
-.service {
-  display: flex;
-  aspect-ratio: 1;
-  width: 32%;
-  border-radius: 10px;
-  background-size: cover;
-  background-position: center;
-  justify-content: center;
-  align-items: center;
-  font-size: 1.5em;
-  text-decoration: none;
-  color: inherit;
-}
-
-.service-inner {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  background: #e5f1ffcf;
-  justify-content: center;
-  align-items: center;
-  font-weight: 500;
-  transition: 1s;
-}
-*/
-
-.service:hover > .service-inner {
-  height: 2.5em;
-}
-
-section {
-  background-color: #FFFFFF;
-  width: 100%;
-}
-
-section:nth-child(even) {
-  background-color: #F5F5F5;
-}
-
-section > * {
-  max-width: 1000px;
-  width: 100%;
-  margin: auto;
-  padding: 2.5em 0.5em;
-}
-
-footer {
-  background: #77bc65;
-  padding: 2em 0.5em;
-  box-shadow: 0px -3px 3px rgba(0, 0, 0, 0.15);
-}
-
-.footer-content {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.footer-content > * {
-  flex-grow: 1;
-  text-align: center;
-}
-
-footer h2 {
-  margin-top: 0;
-}
-
-.footer-sep {
-  width: 0;
-  flex-grow: 0;
-  border-left: 0.2em solid #F5F5F5;
-}
-
-.credits {
-  font-size: 0.85em;
-}
-
-.privacy h2, .privacy h3, .privacy h3 {
-  text-align: initial;
-}

templates/_base.html

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="static/styles.css">
     <link rel="stylesheet" href="static/fonts/Lato/Lato.css">
     <link rel="icon" href="" type="image/icon type">
+    {% block assets %}{% endblock %}
   </head>
 
   <body>

templates/bedingungen.html

@@ -1,4 +1,10 @@
 {% extends "_base.html" %}
+{% block assets %}
+<link rel="stylesheet" href="static/leaflet/leaflet.css">
+<script defer src="static/leaflet/leaflet.js"></script>
+<script defer src="static/map.js"></script>
+{% endblock %}
+
 {% block main %}
 <main>
   <h1>Bedingungen</h1>
@@ -44,26 +50,41 @@
       <p>
         Für die Rückgabe per Rückversand, der Versand spätestens am Rückgabetag mittels per Mail übermittelten Versandetikett in einem geeigneten Paket zu erfolgen. Es ist darauf zu achten, dass der Laptop entsprechend für den Versand gepolstert wird, dafür benötigtes Verpackungsmaterial ist vom Kunden zu stellen. Für die Versandrückgabe inklusive Versandetikett wird ein Umkostenpreis von € 10,- verrechnet.
         Vorort-Abholung nach zu vereinbarenden Bedingungen möglich.
-        Persönliche Rückgabe ist ohne Mehrkosten nach Telefonischer Anmeldung mindestens zwei Tage vor vereinbarter Rückgabe möglich.
+        Persönliche Rückgabe ist ohne Mehrkosten nach telefonischer Anmeldung mindestens zwei Tage vor vereinbarter Rückgabe möglich.
       </p>
     </div>
   </section>
   <section>
     <div class="section-inner">
       <h2>Anfahrtskosten</h2>
+      <div id="map"></div>
+      <div class="legend">
+        <span class="legend-item">
+          <span class="legend-square green"></span><span>Zone A</span>
+        </span>
+        <span class="legend-item">
+          <span class="legend-square blue"></span><span>Zone B</span>
+        </span>
+        <span class="legend-item">
+          <span class="legend-square orange"></span><span>Zone C</span>
+        </span>
+      </div>
       <p>
-        Zone A: € 10,-<br>
-        Zone B: € 25,-<br>
-        Zone C: € 40,-<br>
-        <br>
-        <b>Zone A</b><br>
-        Innsbruck: Arzl, Olympisches Dorf, Mühlau<sup>1</sup> / Rum, Neu-Rum, Thaur<br>
-        Erstmalige Anfahrt innerhalb Zone A kostenlos!<br>
-        <b>Zone B</b><br>
-        Innsbruck: Saggen, Mariahilf-St. Nikolaus, Dreiheiligen, Innenstadt, Reichenau / Hall in Tirol, Absam<br>
-        <b>Zone C</b><br>
-        Innsbruck: Hötting-Mitte<sup>1</sup>, Pradl, Wilten<sup>2</sup><br>
-        <br>
+        <h3 class="zone-heading">Zone A</h3>
+        <p>
+          Innsbruck: Arzl, Olympisches Dorf, Mühlau<sup>1</sup> / Rum, Neu-Rum, Thaur<br>
+          Anfahrtskosten: € 10,- – Erstmalige Anfahrt kostenlos!
+        </p>
+        <h3 class="zone-heading">Zone B</h3>
+        <p>
+          Innsbruck: Saggen, Mariahilf-St. Nikolaus, Dreiheiligen, Innenstadt, Reichenau / Hall in Tirol, Absam<br>
+          Anfahrtkosten: € 25,-
+        </p>
+        <h3 class="zone-heading">Zone C</h3>
+        <p>
+          Innsbruck: Hötting-Mitte<sup>1</sup>, Pradl, Wilten<sup>2</sup><br>
+          Anfahrtkosten: € 40,-
+        </p>
         <sup>1</sup> Ausgenommen Hungerburg<br>
         <sup>2</sup> Ausgenommen Mentlberg und Sieglanger<br>
       </p>