/* required styles */\r
\r
-.leaflet-map-pane,\r
+.leaflet-pane,\r
.leaflet-tile,\r
.leaflet-marker-icon,\r
.leaflet-marker-shadow,\r
-.leaflet-tile-pane,\r
.leaflet-tile-container,\r
-.leaflet-overlay-pane,\r
-.leaflet-shadow-pane,\r
-.leaflet-marker-pane,\r
-.leaflet-popup-pane,\r
-.leaflet-overlay-pane svg,\r
+.leaflet-pane > svg,\r
+.leaflet-pane > canvas,\r
.leaflet-zoom-box,\r
.leaflet-image-layer,\r
.leaflet-layer {\r
}\r
.leaflet-container {\r
overflow: hidden;\r
- -ms-touch-action: none;\r
- touch-action: none;\r
}\r
.leaflet-tile,\r
.leaflet-marker-icon,\r
-webkit-user-select: none;\r
-moz-user-select: none;\r
user-select: none;\r
- -webkit-user-drag: none;\r
+ -webkit-user-drag: none;\r
+ }\r
+/* Prevents IE11 from highlighting tiles in blue */\r
+.leaflet-tile::selection {\r
+ background: transparent;\r
+}\r
+/* Safari renders non-retina tile on retina better with this, but Chrome is worse */\r
+.leaflet-safari .leaflet-tile {\r
+ image-rendering: -webkit-optimize-contrast;\r
+ }\r
+/* hack that prevents hw layers "stretching" when loading new tiles */\r
+.leaflet-safari .leaflet-tile-container {\r
+ width: 1600px;\r
+ height: 1600px;\r
+ -webkit-transform-origin: 0 0;\r
}\r
.leaflet-marker-icon,\r
.leaflet-marker-shadow {\r
display: block;\r
}\r
-/* map is broken in FF if you have max-width: 100% on tiles */\r
-.leaflet-container img {\r
+/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */\r
+/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */\r
+.leaflet-container .leaflet-overlay-pane svg,\r
+.leaflet-container .leaflet-marker-pane img,\r
+.leaflet-container .leaflet-shadow-pane img,\r
+.leaflet-container .leaflet-tile-pane img,\r
+.leaflet-container img.leaflet-image-layer,\r
+.leaflet-container .leaflet-tile {\r
max-width: none !important;\r
+ max-height: none !important;\r
}\r
-/* stupid Android 2 doesn't understand "max-width: none" properly */\r
-.leaflet-container img.leaflet-image-layer {\r
- max-width: 15000px !important;\r
+\r
+.leaflet-container.leaflet-touch-zoom {\r
+ -ms-touch-action: pan-x pan-y;\r
+ touch-action: pan-x pan-y;\r
}\r
+.leaflet-container.leaflet-touch-drag {\r
+ -ms-touch-action: pinch-zoom;\r
+ /* Fallback for FF which doesn't support pinch-zoom */\r
+ touch-action: none;\r
+ touch-action: pinch-zoom;\r
+}\r
+.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {\r
+ -ms-touch-action: none;\r
+ touch-action: none;\r
+}\r
+.leaflet-container {\r
+ -webkit-tap-highlight-color: transparent;\r
+}\r
+.leaflet-container a {\r
+ -webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);\r
+}\r
.leaflet-tile {\r
filter: inherit;\r
visibility: hidden;\r
.leaflet-zoom-box {\r
width: 0;\r
height: 0;\r
+ -moz-box-sizing: border-box;\r
+ box-sizing: border-box;\r
+ z-index: 800;\r
}\r
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */\r
.leaflet-overlay-pane svg {\r
-moz-user-select: none;\r
}\r
\r
-.leaflet-tile-pane { z-index: 2; }\r
-.leaflet-objects-pane { z-index: 3; }\r
-.leaflet-overlay-pane { z-index: 4; }\r
-.leaflet-shadow-pane { z-index: 5; }\r
-.leaflet-marker-pane { z-index: 6; }\r
-.leaflet-popup-pane { z-index: 7; }\r
+.leaflet-pane { z-index: 400; }\r
+\r
+.leaflet-tile-pane { z-index: 200; }\r
+.leaflet-overlay-pane { z-index: 400; }\r
+.leaflet-shadow-pane { z-index: 500; }\r
+.leaflet-marker-pane { z-index: 600; }\r
+.leaflet-tooltip-pane { z-index: 650; }\r
+.leaflet-popup-pane { z-index: 700; }\r
+\r
+.leaflet-map-pane canvas { z-index: 100; }\r
+.leaflet-map-pane svg { z-index: 200; }\r
\r
.leaflet-vml-shape {\r
width: 1px;\r
\r
.leaflet-control {\r
position: relative;\r
- z-index: 7;\r
+ z-index: 800;\r
+ pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */\r
pointer-events: auto;\r
}\r
.leaflet-top,\r
\r
/* zoom and fade animations */\r
\r
-.leaflet-fade-anim .leaflet-tile,\r
+.leaflet-fade-anim .leaflet-tile {\r
+ will-change: opacity;\r
+ }\r
.leaflet-fade-anim .leaflet-popup {\r
opacity: 0;\r
-webkit-transition: opacity 0.2s linear;\r
-moz-transition: opacity 0.2s linear;\r
- -o-transition: opacity 0.2s linear;\r
transition: opacity 0.2s linear;\r
}\r
-.leaflet-fade-anim .leaflet-tile-loaded,\r
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {\r
opacity: 1;\r
}\r
-\r
+.leaflet-zoom-animated {\r
+ -webkit-transform-origin: 0 0;\r
+ -ms-transform-origin: 0 0;\r
+ transform-origin: 0 0;\r
+ }\r
+.leaflet-zoom-anim .leaflet-zoom-animated {\r
+ will-change: transform;\r
+ }\r
.leaflet-zoom-anim .leaflet-zoom-animated {\r
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);\r
-moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);\r
- -o-transition: -o-transform 0.25s cubic-bezier(0,0,0.25,1);\r
transition: transform 0.25s cubic-bezier(0,0,0.25,1);\r
}\r
.leaflet-zoom-anim .leaflet-tile,\r
-.leaflet-pan-anim .leaflet-tile,\r
-.leaflet-touching .leaflet-zoom-animated {\r
+.leaflet-pan-anim .leaflet-tile {\r
-webkit-transition: none;\r
-moz-transition: none;\r
- -o-transition: none;\r
transition: none;\r
}\r
\r
\r
/* cursors */\r
\r
-.leaflet-clickable {\r
+.leaflet-interactive {\r
cursor: pointer;\r
}\r
-.leaflet-container {\r
+.leaflet-grab {\r
cursor: -webkit-grab;\r
cursor: -moz-grab;\r
+ cursor: grab;\r
+ }\r
+.leaflet-crosshair,\r
+.leaflet-crosshair .leaflet-interactive {\r
+ cursor: crosshair;\r
}\r
.leaflet-popup-pane,\r
.leaflet-control {\r
cursor: auto;\r
}\r
-.leaflet-dragging .leaflet-container,\r
-.leaflet-dragging .leaflet-clickable {\r
+.leaflet-dragging .leaflet-grab,\r
+.leaflet-dragging .leaflet-grab .leaflet-interactive,\r
+.leaflet-dragging .leaflet-marker-draggable {\r
cursor: move;\r
cursor: -webkit-grabbing;\r
cursor: -moz-grabbing;\r
+ cursor: grabbing;\r
}\r
\r
+/* marker & overlays interactivity */\r
+.leaflet-marker-icon,\r
+.leaflet-marker-shadow,\r
+.leaflet-image-layer,\r
+.leaflet-pane > svg path,\r
+.leaflet-tile-container {\r
+ pointer-events: none;\r
+ }\r
+\r
+.leaflet-marker-icon.leaflet-interactive,\r
+.leaflet-image-layer.leaflet-interactive,\r
+.leaflet-pane > svg path.leaflet-interactive,\r
+svg.leaflet-image-layer.leaflet-interactive path {\r
+ pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */\r
+ pointer-events: auto;\r
+ }\r
\r
/* visual tweaks */\r
\r
height: 30px;\r
line-height: 30px;\r
}\r
-\r
+.leaflet-touch .leaflet-bar a:first-child {\r
+ border-top-left-radius: 2px;\r
+ border-top-right-radius: 2px;\r
+ }\r
+.leaflet-touch .leaflet-bar a:last-child {\r
+ border-bottom-left-radius: 2px;\r
+ border-bottom-right-radius: 2px;\r
+ }\r
\r
/* zoom control */\r
\r
font: bold 18px 'Lucida Console', Monaco, monospace;\r
text-indent: 1px;\r
}\r
-.leaflet-control-zoom-out {\r
- font-size: 20px;\r
- }\r
\r
-.leaflet-touch .leaflet-control-zoom-in {\r
+.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {\r
font-size: 22px;\r
}\r
-.leaflet-touch .leaflet-control-zoom-out {\r
- font-size: 24px;\r
- }\r
\r
\r
/* layers control */\r
color: #333;\r
background: #fff;\r
}\r
+.leaflet-control-layers-scrollbar {\r
+ overflow-y: scroll;\r
+ overflow-x: hidden;\r
+ padding-right: 5px;\r
+ }\r
.leaflet-control-layers-selector {\r
margin-top: 2px;\r
position: relative;\r
margin: 5px -10px 5px -6px;\r
}\r
\r
+/* Default icon URLs */\r
+.leaflet-default-icon-path {\r
+ background-image: url(images/marker-icon.png);\r
+ }\r
+\r
\r
/* attribution and scale controls */\r
\r
font-size: 11px;\r
white-space: nowrap;\r
overflow: hidden;\r
- -moz-box-sizing: content-box;\r
- box-sizing: content-box;\r
+ -moz-box-sizing: border-box;\r
+ box-sizing: border-box;\r
\r
background: #fff;\r
background: rgba(255, 255, 255, 0.5);\r
.leaflet-popup {\r
position: absolute;\r
text-align: center;\r
+ margin-bottom: 20px;\r
}\r
.leaflet-popup-content-wrapper {\r
padding: 1px;\r
margin: 18px 0;\r
}\r
.leaflet-popup-tip-container {\r
- margin: 0 auto;\r
width: 40px;\r
height: 20px;\r
- position: relative;\r
+ position: absolute;\r
+ left: 50%;\r
+ margin-left: -20px;\r
overflow: hidden;\r
+ pointer-events: none;\r
}\r
.leaflet-popup-tip {\r
width: 17px;\r
-webkit-transform: rotate(45deg);\r
-moz-transform: rotate(45deg);\r
-ms-transform: rotate(45deg);\r
- -o-transform: rotate(45deg);\r
transform: rotate(45deg);\r
}\r
.leaflet-popup-content-wrapper,\r
.leaflet-popup-tip {\r
background: white;\r
-\r
+ color: #333;\r
box-shadow: 0 3px 14px rgba(0,0,0,0.4);\r
}\r
.leaflet-container a.leaflet-popup-close-button {\r
top: 0;\r
right: 0;\r
padding: 4px 4px 0 0;\r
+ border: none;\r
text-align: center;\r
width: 18px;\r
height: 14px;\r
background: #fff;\r
border: 1px solid #666;\r
}\r
+\r
+\r
+/* Tooltip */\r
+/* Base styles for the element that has a tooltip */\r
+.leaflet-tooltip {\r
+ position: absolute;\r
+ padding: 6px;\r
+ background-color: #fff;\r
+ border: 1px solid #fff;\r
+ border-radius: 3px;\r
+ color: #222;\r
+ white-space: nowrap;\r
+ -webkit-user-select: none;\r
+ -moz-user-select: none;\r
+ -ms-user-select: none;\r
+ user-select: none;\r
+ pointer-events: none;\r
+ box-shadow: 0 1px 3px rgba(0,0,0,0.4);\r
+ }\r
+.leaflet-tooltip.leaflet-clickable {\r
+ cursor: pointer;\r
+ pointer-events: auto;\r
+ }\r
+.leaflet-tooltip-top:before,\r
+.leaflet-tooltip-bottom:before,\r
+.leaflet-tooltip-left:before,\r
+.leaflet-tooltip-right:before {\r
+ position: absolute;\r
+ pointer-events: none;\r
+ border: 6px solid transparent;\r
+ background: transparent;\r
+ content: "";\r
+ }\r
+\r
+/* Directions */\r
+\r
+.leaflet-tooltip-bottom {\r
+ margin-top: 6px;\r
+}\r
+.leaflet-tooltip-top {\r
+ margin-top: -6px;\r
+}\r
+.leaflet-tooltip-bottom:before,\r
+.leaflet-tooltip-top:before {\r
+ left: 50%;\r
+ margin-left: -6px;\r
+ }\r
+.leaflet-tooltip-top:before {\r
+ bottom: 0;\r
+ margin-bottom: -12px;\r
+ border-top-color: #fff;\r
+ }\r
+.leaflet-tooltip-bottom:before {\r
+ top: 0;\r
+ margin-top: -12px;\r
+ margin-left: -6px;\r
+ border-bottom-color: #fff;\r
+ }\r
+.leaflet-tooltip-left {\r
+ margin-left: -6px;\r
+}\r
+.leaflet-tooltip-right {\r
+ margin-left: 6px;\r
+}\r
+.leaflet-tooltip-left:before,\r
+.leaflet-tooltip-right:before {\r
+ top: 50%;\r
+ margin-top: -6px;\r
+ }\r
+.leaflet-tooltip-left:before {\r
+ right: 0;\r
+ margin-right: -12px;\r
+ border-left-color: #fff;\r
+ }\r
+.leaflet-tooltip-right:before {\r
+ left: 0;\r
+ margin-left: -12px;\r
+ border-right-color: #fff;\r
+ }\r