1 /* required styles */
\r
5 .leaflet-marker-icon,
\r
6 .leaflet-marker-shadow,
\r
8 .leaflet-tile-container,
\r
9 .leaflet-overlay-pane,
\r
10 .leaflet-shadow-pane,
\r
11 .leaflet-marker-pane,
\r
12 .leaflet-popup-pane,
\r
13 .leaflet-overlay-pane svg,
\r
15 .leaflet-image-layer,
\r
21 .leaflet-container {
\r
23 -ms-touch-action: none;
\r
26 .leaflet-marker-icon,
\r
27 .leaflet-marker-shadow {
\r
28 -webkit-user-select: none;
\r
29 -moz-user-select: none;
\r
31 -webkit-user-drag: none;
\r
33 .leaflet-marker-icon,
\r
34 .leaflet-marker-shadow {
\r
37 /* map is broken in FF if you have max-width: 100% on tiles */
\r
38 .leaflet-container img {
\r
39 max-width: none !important;
\r
41 /* stupid Android 2 doesn't understand "max-width: none" properly */
\r
42 .leaflet-container img.leaflet-image-layer {
\r
43 max-width: 15000px !important;
\r
49 .leaflet-tile-loaded {
\r
50 visibility: inherit;
\r
57 .leaflet-tile-pane { z-index: 2; }
\r
58 .leaflet-objects-pane { z-index: 3; }
\r
59 .leaflet-overlay-pane { z-index: 4; }
\r
60 .leaflet-shadow-pane { z-index: 5; }
\r
61 .leaflet-marker-pane { z-index: 6; }
\r
62 .leaflet-popup-pane { z-index: 7; }
\r
65 /* control positioning */
\r
70 pointer-events: auto;
\r
76 pointer-events: none;
\r
94 .leaflet-right .leaflet-control {
\r
97 .leaflet-top .leaflet-control {
\r
100 .leaflet-bottom .leaflet-control {
\r
101 margin-bottom: 10px;
\r
103 .leaflet-left .leaflet-control {
\r
106 .leaflet-right .leaflet-control {
\r
107 margin-right: 10px;
\r
111 /* zoom and fade animations */
\r
113 .leaflet-fade-anim .leaflet-tile,
\r
114 .leaflet-fade-anim .leaflet-popup {
\r
116 -webkit-transition: opacity 0.2s linear;
\r
117 -moz-transition: opacity 0.2s linear;
\r
118 -o-transition: opacity 0.2s linear;
\r
119 transition: opacity 0.2s linear;
\r
121 .leaflet-fade-anim .leaflet-tile-loaded,
\r
122 .leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
\r
126 .leaflet-zoom-anim .leaflet-zoom-animated {
\r
127 -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
\r
128 -moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
\r
129 -o-transition: -o-transform 0.25s cubic-bezier(0,0,0.25,1);
\r
130 transition: transform 0.25s cubic-bezier(0,0,0.25,1);
\r
132 .leaflet-zoom-anim .leaflet-tile,
\r
133 .leaflet-pan-anim .leaflet-tile,
\r
134 .leaflet-touching .leaflet-zoom-animated {
\r
135 -webkit-transition: none;
\r
136 -moz-transition: none;
\r
137 -o-transition: none;
\r
141 .leaflet-zoom-anim .leaflet-zoom-hide {
\r
142 visibility: hidden;
\r
148 .leaflet-clickable {
\r
151 .leaflet-container {
\r
152 cursor: -webkit-grab;
\r
155 .leaflet-popup-pane,
\r
160 .leaflet-dragging .leaflet-clickable,
\r
161 .leaflet-dragging .leaflet-container {
\r
163 cursor: -webkit-grabbing;
\r
164 cursor: -moz-grabbing;
\r
168 /* visual tweaks */
\r
170 .leaflet-container {
\r
174 .leaflet-container a {
\r
177 .leaflet-container a.leaflet-active {
\r
178 outline: 2px solid orange;
\r
180 .leaflet-zoom-box {
\r
181 border: 2px dotted #05f;
\r
187 /* general typography */
\r
188 .leaflet-container {
\r
189 font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
\r
193 /* general toolbar styles */
\r
196 box-shadow: 0 1px 7px rgba(0,0,0,0.65);
\r
197 -webkit-border-radius: 4px;
\r
198 border-radius: 4px;
\r
200 .leaflet-bar a, .leaflet-bar a:hover {
\r
201 background-color: #fff;
\r
202 border-bottom: 1px solid #ccc;
\r
207 text-align: center;
\r
208 text-decoration: none;
\r
212 .leaflet-control-layers-toggle {
\r
213 background-position: 50% 50%;
\r
214 background-repeat: no-repeat;
\r
217 .leaflet-bar a:hover {
\r
218 background-color: #f4f4f4;
\r
220 .leaflet-bar a:first-child {
\r
221 -webkit-border-top-left-radius: 4px;
\r
222 border-top-left-radius: 4px;
\r
223 -webkit-border-top-right-radius: 4px;
\r
224 border-top-right-radius: 4px;
\r
226 .leaflet-bar a:last-child {
\r
227 -webkit-border-bottom-left-radius: 4px;
\r
228 border-bottom-left-radius: 4px;
\r
229 -webkit-border-bottom-right-radius: 4px;
\r
230 border-bottom-right-radius: 4px;
\r
231 border-bottom: none;
\r
233 .leaflet-bar a.leaflet-disabled {
\r
235 background-color: #f4f4f4;
\r
239 .leaflet-touch .leaflet-bar {
\r
240 -webkit-border-radius: 10px;
\r
241 border-radius: 10px;
\r
243 .leaflet-touch .leaflet-bar a {
\r
247 .leaflet-touch .leaflet-bar a:first-child {
\r
248 -webkit-border-top-left-radius: 7px;
\r
249 border-top-left-radius: 7px;
\r
250 -webkit-border-top-right-radius: 7px;
\r
251 border-top-right-radius: 7px;
\r
253 .leaflet-touch .leaflet-bar a:last-child {
\r
254 -webkit-border-bottom-left-radius: 7px;
\r
255 border-bottom-left-radius: 7px;
\r
256 -webkit-border-bottom-right-radius: 7px;
\r
257 border-bottom-right-radius: 7px;
\r
258 border-bottom: none;
\r
264 .leaflet-control-zoom-in {
\r
265 font: bold 18px 'Lucida Console', Monaco, monospace;
\r
267 .leaflet-control-zoom-out {
\r
268 font: bold 22px 'Lucida Console', Monaco, monospace;
\r
271 .leaflet-touch .leaflet-control-zoom-in {
\r
275 .leaflet-touch .leaflet-control-zoom-out {
\r
281 /* layers control */
\r
283 .leaflet-control-layers {
\r
284 box-shadow: 0 1px 7px rgba(0,0,0,0.4);
\r
285 background: #f8f8f9;
\r
286 -webkit-border-radius: 5px;
\r
287 border-radius: 5px;
\r
289 .leaflet-control-layers-toggle {
\r
290 background-image: url(images/layers.png);
\r
294 .leaflet-retina .leaflet-control-layers-toggle {
\r
295 background-image: url(images/layers-2x.png);
\r
296 background-size: 26px 26px;
\r
298 .leaflet-touch .leaflet-control-layers-toggle {
\r
302 .leaflet-control-layers .leaflet-control-layers-list,
\r
303 .leaflet-control-layers-expanded .leaflet-control-layers-toggle {
\r
306 .leaflet-control-layers-expanded .leaflet-control-layers-list {
\r
308 position: relative;
\r
310 .leaflet-control-layers-expanded {
\r
311 padding: 6px 10px 6px 6px;
\r
315 .leaflet-control-layers-selector {
\r
317 position: relative;
\r
320 .leaflet-control-layers label {
\r
323 .leaflet-control-layers-separator {
\r
325 border-top: 1px solid #ddd;
\r
326 margin: 5px -10px 5px -6px;
\r
330 /* attribution and scale controls */
\r
332 .leaflet-container .leaflet-control-attribution {
\r
333 background-color: rgba(255, 255, 255, 0.7);
\r
334 box-shadow: 0 0 5px #bbb;
\r
337 .leaflet-control-attribution,
\r
338 .leaflet-control-scale-line {
\r
342 .leaflet-container .leaflet-control-attribution,
\r
343 .leaflet-container .leaflet-control-scale {
\r
346 .leaflet-left .leaflet-control-scale {
\r
349 .leaflet-bottom .leaflet-control-scale {
\r
350 margin-bottom: 5px;
\r
352 .leaflet-control-scale-line {
\r
353 border: 2px solid #777;
\r
357 padding: 2px 5px 1px;
\r
359 text-shadow: 1px 1px 1px #fff;
\r
360 background-color: rgba(255, 255, 255, 0.5);
\r
361 box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);
\r
362 white-space: nowrap;
\r
365 .leaflet-control-scale-line:not(:first-child) {
\r
366 border-top: 2px solid #777;
\r
367 border-bottom: none;
\r
369 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
\r
371 .leaflet-control-scale-line:not(:first-child):not(:last-child) {
\r
372 border-bottom: 2px solid #777;
\r
375 .leaflet-touch .leaflet-control-attribution,
\r
376 .leaflet-touch .leaflet-control-layers,
\r
377 .leaflet-touch .leaflet-control-zoom {
\r
380 .leaflet-touch .leaflet-control-layers,
\r
381 .leaflet-touch .leaflet-control-zoom {
\r
382 border: 4px solid rgba(0,0,0,0.3);
\r
389 position: absolute;
\r
390 text-align: center;
\r
392 .leaflet-popup-content-wrapper {
\r
395 -webkit-border-radius: 12px;
\r
396 border-radius: 12px;
\r
398 .leaflet-popup-content {
\r
402 .leaflet-popup-content p {
\r
405 .leaflet-popup-tip-container {
\r
409 position: relative;
\r
412 .leaflet-popup-tip {
\r
417 margin: -10px auto 0;
\r
419 -webkit-transform: rotate(45deg);
\r
420 -moz-transform: rotate(45deg);
\r
421 -ms-transform: rotate(45deg);
\r
422 -o-transform: rotate(45deg);
\r
423 transform: rotate(45deg);
\r
425 .leaflet-popup-content-wrapper, .leaflet-popup-tip {
\r
428 box-shadow: 0 3px 14px rgba(0,0,0,0.4);
\r
430 .leaflet-container a.leaflet-popup-close-button {
\r
431 position: absolute;
\r
434 padding: 4px 4px 0 0;
\r
435 text-align: center;
\r
438 font: 16px/14px Tahoma, Verdana, sans-serif;
\r
440 text-decoration: none;
\r
442 background: transparent;
\r
444 .leaflet-container a.leaflet-popup-close-button:hover {
\r
447 .leaflet-popup-scrolled {
\r
449 border-bottom: 1px solid #ddd;
\r
450 border-top: 1px solid #ddd;
\r
456 .leaflet-div-icon {
\r
458 border: 1px solid #666;
\r
460 .leaflet-editing-icon {
\r
461 -webkit-border-radius: 2px;
\r
462 border-radius: 2px;
\r