Statically include leaflet, improve map integration
This commit is contained in:
parent
c056668c33
commit
2699afe84b
12 changed files with 1012 additions and 542 deletions
BIN
static/leaflet/images/layers-2x.png
Normal file
BIN
static/leaflet/images/layers-2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
static/leaflet/images/layers.png
Normal file
BIN
static/leaflet/images/layers.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 696 B |
BIN
static/leaflet/images/marker-icon-2x.png
Normal file
BIN
static/leaflet/images/marker-icon-2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
static/leaflet/images/marker-icon.png
Normal file
BIN
static/leaflet/images/marker-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
static/leaflet/images/marker-shadow.png
Normal file
BIN
static/leaflet/images/marker-shadow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 618 B |
656
static/leaflet/leaflet.css
Normal file
656
static/leaflet/leaflet.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
6
static/leaflet/leaflet.js
Normal file
6
static/leaflet/leaflet.js
Normal file
File diff suppressed because one or more lines are too long
274
static/map.js
Normal file
274
static/map.js
Normal file
|
|
@ -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: '© <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);
|
||||||
|
}
|
||||||
|
|
@ -171,41 +171,6 @@ h1, h2, h3, h4 {
|
||||||
height: 2.5em;
|
height: 2.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#map{
|
|
||||||
height: 400px;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.legend{
|
|
||||||
width: fit-content;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.legend > *{
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.square{
|
|
||||||
display: inline-block;
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
border: black solid 1px;
|
|
||||||
margin-right: 3px;
|
|
||||||
margin-left: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.green{
|
|
||||||
background-color: #3ef06e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blue{
|
|
||||||
background-color: #3388ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.orange{
|
|
||||||
background-color: #ffeb0a;
|
|
||||||
}
|
|
||||||
|
|
||||||
section {
|
section {
|
||||||
background-color: #FFFFFF;
|
background-color: #FFFFFF;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -301,6 +266,49 @@ footer h2 {
|
||||||
text-align: initial;
|
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) {
|
@media only screen and (max-width:768px) {
|
||||||
.header-content {
|
.header-content {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -7,12 +7,7 @@
|
||||||
<link rel="stylesheet" href="static/styles.css">
|
<link rel="stylesheet" href="static/styles.css">
|
||||||
<link rel="stylesheet" href="static/fonts/Lato/Lato.css">
|
<link rel="stylesheet" href="static/fonts/Lato/Lato.css">
|
||||||
<link rel="icon" href="" type="image/icon type">
|
<link rel="icon" href="" type="image/icon type">
|
||||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
|
{% block assets %}{% endblock %}
|
||||||
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
|
|
||||||
crossorigin=""/>
|
|
||||||
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
|
|
||||||
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
|
|
||||||
crossorigin="">
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,10 @@
|
||||||
{% extends "_base.html" %}
|
{% 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 %}
|
{% block main %}
|
||||||
<main>
|
<main>
|
||||||
<h1>Bedingungen</h1>
|
<h1>Bedingungen</h1>
|
||||||
|
|
@ -52,274 +58,33 @@
|
||||||
<div class="section-inner">
|
<div class="section-inner">
|
||||||
<h2>Anfahrtskosten</h2>
|
<h2>Anfahrtskosten</h2>
|
||||||
<div id="map"></div>
|
<div id="map"></div>
|
||||||
|
<div class="legend">
|
||||||
<script>
|
<span class="legend-item">
|
||||||
var map = L.map('map', {maxZoom: 18,
|
<span class="legend-square green"></span><span>Zone A</span>
|
||||||
minZoom: 10,
|
</span>
|
||||||
maxBounds: L.latLngBounds(L.latLng(47.3770, 11.2025), L.latLng(47.1770, 11.7025)),
|
<span class="legend-item">
|
||||||
maxBoundsViscosity: 1,
|
<span class="legend-square blue"></span><span>Zone B</span>
|
||||||
scrollWheelZoom: false}).setView([47.2770, 11.4525], 12);
|
</span>
|
||||||
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
<span class="legend-item">
|
||||||
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
<span class="legend-square orange"></span><span>Zone C</span>
|
||||||
}).addTo(map);
|
</span>
|
||||||
var zone_a = L.polygon([
|
</div>
|
||||||
[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});
|
|
||||||
|
|
||||||
//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);
|
|
||||||
rone_c.bindTooltip("Zone C",{permanent: true, direction:"center"});
|
|
||||||
</script>
|
|
||||||
<div class="legend"><div class="square green"></div><span>Zone A</span><div class="square blue"></div><span>Zone B</span><div class="square orange"></div><span>Zone C</span></div>
|
|
||||||
<p>
|
<p>
|
||||||
<br>
|
<h3 class="zone-heading">Zone A</h3>
|
||||||
<b>Zone A</b><br>
|
<p>
|
||||||
Innsbruck: Arzl, Olympisches Dorf, Mühlau<sup>1</sup> / Rum, Neu-Rum, Thaur<br>
|
Innsbruck: Arzl, Olympisches Dorf, Mühlau<sup>1</sup> / Rum, Neu-Rum, Thaur<br>
|
||||||
Anfahrtskosten: € 10,- – Erstmalige Anfahrt kostenlos!<br>
|
Anfahrtskosten: € 10,- – Erstmalige Anfahrt kostenlos!
|
||||||
<b>Zone B</b><br>
|
</p>
|
||||||
Innsbruck: Saggen, Mariahilf-St. Nikolaus, Dreiheiligen, Innenstadt, Reichenau / Hall in Tirol, Absam<br>
|
<h3 class="zone-heading">Zone B</h3>
|
||||||
Anfahrtkosten: € 25,-<br>
|
<p>
|
||||||
<b>Zone C</b><br>
|
Innsbruck: Saggen, Mariahilf-St. Nikolaus, Dreiheiligen, Innenstadt, Reichenau / Hall in Tirol, Absam<br>
|
||||||
Innsbruck: Hötting-Mitte<sup>1</sup>, Pradl, Wilten<sup>2</sup><br>
|
Anfahrtkosten: € 25,-
|
||||||
Anfahrtkosten: € 40,-<br>
|
</p>
|
||||||
<br>
|
<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>1</sup> Ausgenommen Hungerburg<br>
|
||||||
<sup>2</sup> Ausgenommen Mentlberg und Sieglanger<br>
|
<sup>2</sup> Ausgenommen Mentlberg und Sieglanger<br>
|
||||||
</p>
|
</p>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue