1 | /* required styles */
|
---|
2 |
|
---|
3 | .leaflet-map-pane,
|
---|
4 | .leaflet-tile,
|
---|
5 | .leaflet-marker-icon,
|
---|
6 | .leaflet-marker-shadow,
|
---|
7 | .leaflet-tile-pane,
|
---|
8 | .leaflet-tile-container,
|
---|
9 | .leaflet-overlay-pane,
|
---|
10 | .leaflet-shadow-pane,
|
---|
11 | .leaflet-marker-pane,
|
---|
12 | .leaflet-popup-pane,
|
---|
13 | .leaflet-overlay-pane svg,
|
---|
14 | .leaflet-zoom-box,
|
---|
15 | .leaflet-image-layer,
|
---|
16 | .leaflet-layer {
|
---|
17 | position: absolute;
|
---|
18 | left: 0;
|
---|
19 | top: 0;
|
---|
20 | }
|
---|
21 | .leaflet-container {
|
---|
22 | overflow: hidden;
|
---|
23 | -ms-touch-action: none;
|
---|
24 | }
|
---|
25 | .leaflet-tile,
|
---|
26 | .leaflet-marker-icon,
|
---|
27 | .leaflet-marker-shadow {
|
---|
28 | -webkit-user-select: none;
|
---|
29 | -moz-user-select: none;
|
---|
30 | user-select: none;
|
---|
31 | -webkit-user-drag: none;
|
---|
32 | }
|
---|
33 | .leaflet-marker-icon,
|
---|
34 | .leaflet-marker-shadow {
|
---|
35 | display: block;
|
---|
36 | }
|
---|
37 | /* map is broken in FF if you have max-width: 100% on tiles */
|
---|
38 | .leaflet-container img {
|
---|
39 | max-width: none !important;
|
---|
40 | }
|
---|
41 | /* stupid Android 2 doesn't understand "max-width: none" properly */
|
---|
42 | .leaflet-container img.leaflet-image-layer {
|
---|
43 | max-width: 15000px !important;
|
---|
44 | }
|
---|
45 | .leaflet-tile {
|
---|
46 | filter: inherit;
|
---|
47 | visibility: hidden;
|
---|
48 | }
|
---|
49 | .leaflet-tile-loaded {
|
---|
50 | visibility: inherit;
|
---|
51 | }
|
---|
52 | .leaflet-zoom-box {
|
---|
53 | width: 0;
|
---|
54 | height: 0;
|
---|
55 | }
|
---|
56 | /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
|
---|
57 | .leaflet-overlay-pane svg {
|
---|
58 | -moz-user-select: none;
|
---|
59 | }
|
---|
60 |
|
---|
61 | .leaflet-tile-pane { z-index: 2; }
|
---|
62 | .leaflet-objects-pane { z-index: 3; }
|
---|
63 | .leaflet-overlay-pane { z-index: 4; }
|
---|
64 | .leaflet-shadow-pane { z-index: 5; }
|
---|
65 | .leaflet-marker-pane { z-index: 6; }
|
---|
66 | .leaflet-popup-pane { z-index: 7; }
|
---|
67 |
|
---|
68 | .leaflet-vml-shape {
|
---|
69 | width: 1px;
|
---|
70 | height: 1px;
|
---|
71 | }
|
---|
72 | .lvml {
|
---|
73 | behavior: url(#default#VML);
|
---|
74 | display: inline-block;
|
---|
75 | position: absolute;
|
---|
76 | }
|
---|
77 |
|
---|
78 |
|
---|
79 | /* control positioning */
|
---|
80 |
|
---|
81 | .leaflet-control {
|
---|
82 | position: relative;
|
---|
83 | z-index: 7;
|
---|
84 | pointer-events: auto;
|
---|
85 | }
|
---|
86 | .leaflet-top,
|
---|
87 | .leaflet-bottom {
|
---|
88 | position: absolute;
|
---|
89 | z-index: 1000;
|
---|
90 | pointer-events: none;
|
---|
91 | }
|
---|
92 | .leaflet-top {
|
---|
93 | top: 0;
|
---|
94 | }
|
---|
95 | .leaflet-right {
|
---|
96 | right: 0;
|
---|
97 | }
|
---|
98 | .leaflet-bottom {
|
---|
99 | bottom: 0;
|
---|
100 | }
|
---|
101 | .leaflet-left {
|
---|
102 | left: 0;
|
---|
103 | }
|
---|
104 | .leaflet-control {
|
---|
105 | float: left;
|
---|
106 | clear: both;
|
---|
107 | }
|
---|
108 | .leaflet-right .leaflet-control {
|
---|
109 | float: right;
|
---|
110 | }
|
---|
111 | .leaflet-top .leaflet-control {
|
---|
112 | margin-top: 10px;
|
---|
113 | }
|
---|
114 | .leaflet-bottom .leaflet-control {
|
---|
115 | margin-bottom: 10px;
|
---|
116 | }
|
---|
117 | .leaflet-left .leaflet-control {
|
---|
118 | margin-left: 10px;
|
---|
119 | }
|
---|
120 | .leaflet-right .leaflet-control {
|
---|
121 | margin-right: 10px;
|
---|
122 | }
|
---|
123 |
|
---|
124 |
|
---|
125 | /* zoom and fade animations */
|
---|
126 |
|
---|
127 | .leaflet-fade-anim .leaflet-tile,
|
---|
128 | .leaflet-fade-anim .leaflet-popup {
|
---|
129 | opacity: 0;
|
---|
130 | -webkit-transition: opacity 0.2s linear;
|
---|
131 | -moz-transition: opacity 0.2s linear;
|
---|
132 | -o-transition: opacity 0.2s linear;
|
---|
133 | transition: opacity 0.2s linear;
|
---|
134 | }
|
---|
135 | .leaflet-fade-anim .leaflet-tile-loaded,
|
---|
136 | .leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
|
---|
137 | opacity: 1;
|
---|
138 | }
|
---|
139 |
|
---|
140 | .leaflet-zoom-anim .leaflet-zoom-animated {
|
---|
141 | -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
|
---|
142 | -moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
|
---|
143 | -o-transition: -o-transform 0.25s cubic-bezier(0,0,0.25,1);
|
---|
144 | transition: transform 0.25s cubic-bezier(0,0,0.25,1);
|
---|
145 | }
|
---|
146 | .leaflet-zoom-anim .leaflet-tile,
|
---|
147 | .leaflet-pan-anim .leaflet-tile,
|
---|
148 | .leaflet-touching .leaflet-zoom-animated {
|
---|
149 | -webkit-transition: none;
|
---|
150 | -moz-transition: none;
|
---|
151 | -o-transition: none;
|
---|
152 | transition: none;
|
---|
153 | }
|
---|
154 |
|
---|
155 | .leaflet-zoom-anim .leaflet-zoom-hide {
|
---|
156 | visibility: hidden;
|
---|
157 | }
|
---|
158 |
|
---|
159 |
|
---|
160 | /* cursors */
|
---|
161 |
|
---|
162 | .leaflet-clickable {
|
---|
163 | cursor: pointer;
|
---|
164 | }
|
---|
165 | .leaflet-container {
|
---|
166 | cursor: -webkit-grab;
|
---|
167 | cursor: -moz-grab;
|
---|
168 | }
|
---|
169 | .leaflet-popup-pane,
|
---|
170 | .leaflet-control {
|
---|
171 | cursor: auto;
|
---|
172 | }
|
---|
173 | .leaflet-dragging .leaflet-container,
|
---|
174 | .leaflet-dragging .leaflet-clickable {
|
---|
175 | cursor: move;
|
---|
176 | cursor: -webkit-grabbing;
|
---|
177 | cursor: -moz-grabbing;
|
---|
178 | }
|
---|
179 |
|
---|
180 |
|
---|
181 | /* visual tweaks */
|
---|
182 |
|
---|
183 | .leaflet-container {
|
---|
184 | background: #ddd;
|
---|
185 | outline: 0;
|
---|
186 | }
|
---|
187 | .leaflet-container a {
|
---|
188 | color: #0078A8;
|
---|
189 | }
|
---|
190 | .leaflet-container a.leaflet-active {
|
---|
191 | outline: 2px solid orange;
|
---|
192 | }
|
---|
193 | .leaflet-zoom-box {
|
---|
194 | border: 2px dotted #38f;
|
---|
195 | background: rgba(255,255,255,0.5);
|
---|
196 | }
|
---|
197 |
|
---|
198 |
|
---|
199 | /* general typography */
|
---|
200 | .leaflet-container {
|
---|
201 | font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
|
---|
202 | }
|
---|
203 |
|
---|
204 |
|
---|
205 | /* general toolbar styles */
|
---|
206 |
|
---|
207 | .leaflet-bar {
|
---|
208 | box-shadow: 0 1px 5px rgba(0,0,0,0.65);
|
---|
209 | border-radius: 4px;
|
---|
210 | }
|
---|
211 | .leaflet-bar a,
|
---|
212 | .leaflet-bar a:hover {
|
---|
213 | background-color: #fff;
|
---|
214 | border-bottom: 1px solid #ccc;
|
---|
215 | width: 26px;
|
---|
216 | height: 26px;
|
---|
217 | line-height: 26px;
|
---|
218 | display: block;
|
---|
219 | text-align: center;
|
---|
220 | text-decoration: none;
|
---|
221 | color: black;
|
---|
222 | }
|
---|
223 | .leaflet-bar a,
|
---|
224 | .leaflet-control-layers-toggle {
|
---|
225 | background-position: 50% 50%;
|
---|
226 | background-repeat: no-repeat;
|
---|
227 | display: block;
|
---|
228 | }
|
---|
229 | .leaflet-bar a:hover {
|
---|
230 | background-color: #f4f4f4;
|
---|
231 | }
|
---|
232 | .leaflet-bar a:first-child {
|
---|
233 | border-top-left-radius: 4px;
|
---|
234 | border-top-right-radius: 4px;
|
---|
235 | }
|
---|
236 | .leaflet-bar a:last-child {
|
---|
237 | border-bottom-left-radius: 4px;
|
---|
238 | border-bottom-right-radius: 4px;
|
---|
239 | border-bottom: none;
|
---|
240 | }
|
---|
241 | .leaflet-bar a.leaflet-disabled {
|
---|
242 | cursor: default;
|
---|
243 | background-color: #f4f4f4;
|
---|
244 | color: #bbb;
|
---|
245 | }
|
---|
246 |
|
---|
247 | .leaflet-touch .leaflet-bar a {
|
---|
248 | width: 30px;
|
---|
249 | height: 30px;
|
---|
250 | line-height: 30px;
|
---|
251 | }
|
---|
252 |
|
---|
253 |
|
---|
254 | /* zoom control */
|
---|
255 |
|
---|
256 | .leaflet-control-zoom-in,
|
---|
257 | .leaflet-control-zoom-out {
|
---|
258 | font: bold 18px 'Lucida Console', Monaco, monospace;
|
---|
259 | text-indent: 1px;
|
---|
260 | }
|
---|
261 | .leaflet-control-zoom-out {
|
---|
262 | font-size: 20px;
|
---|
263 | }
|
---|
264 |
|
---|
265 | .leaflet-touch .leaflet-control-zoom-in {
|
---|
266 | font-size: 22px;
|
---|
267 | }
|
---|
268 | .leaflet-touch .leaflet-control-zoom-out {
|
---|
269 | font-size: 24px;
|
---|
270 | }
|
---|
271 |
|
---|
272 |
|
---|
273 | /* layers control */
|
---|
274 |
|
---|
275 | .leaflet-control-layers {
|
---|
276 | box-shadow: 0 1px 5px rgba(0,0,0,0.4);
|
---|
277 | background: #fff;
|
---|
278 | border-radius: 5px;
|
---|
279 | }
|
---|
280 | .leaflet-control-layers-toggle {
|
---|
281 | background-image: url(images/layers.png);
|
---|
282 | width: 36px;
|
---|
283 | height: 36px;
|
---|
284 | }
|
---|
285 | .leaflet-retina .leaflet-control-layers-toggle {
|
---|
286 | background-image: url(images/layers-2x.png);
|
---|
287 | background-size: 26px 26px;
|
---|
288 | }
|
---|
289 | .leaflet-touch .leaflet-control-layers-toggle {
|
---|
290 | width: 44px;
|
---|
291 | height: 44px;
|
---|
292 | }
|
---|
293 | .leaflet-control-layers .leaflet-control-layers-list,
|
---|
294 | .leaflet-control-layers-expanded .leaflet-control-layers-toggle {
|
---|
295 | display: none;
|
---|
296 | }
|
---|
297 | .leaflet-control-layers-expanded .leaflet-control-layers-list {
|
---|
298 | display: block;
|
---|
299 | position: relative;
|
---|
300 | }
|
---|
301 | .leaflet-control-layers-expanded {
|
---|
302 | padding: 6px 10px 6px 6px;
|
---|
303 | color: #333;
|
---|
304 | background: #fff;
|
---|
305 | }
|
---|
306 | .leaflet-control-layers-selector {
|
---|
307 | margin-top: 2px;
|
---|
308 | position: relative;
|
---|
309 | top: 1px;
|
---|
310 | }
|
---|
311 | .leaflet-control-layers label {
|
---|
312 | display: block;
|
---|
313 | }
|
---|
314 | .leaflet-control-layers-separator {
|
---|
315 | height: 0;
|
---|
316 | border-top: 1px solid #ddd;
|
---|
317 | margin: 5px -10px 5px -6px;
|
---|
318 | }
|
---|
319 |
|
---|
320 |
|
---|
321 | /* attribution and scale controls */
|
---|
322 |
|
---|
323 | .leaflet-container .leaflet-control-attribution {
|
---|
324 | background: #fff;
|
---|
325 | background: rgba(255, 255, 255, 0.7);
|
---|
326 | margin: 0;
|
---|
327 | }
|
---|
328 | .leaflet-control-attribution,
|
---|
329 | .leaflet-control-scale-line {
|
---|
330 | padding: 0 5px;
|
---|
331 | color: #333;
|
---|
332 | }
|
---|
333 | .leaflet-control-attribution a {
|
---|
334 | text-decoration: none;
|
---|
335 | }
|
---|
336 | .leaflet-control-attribution a:hover {
|
---|
337 | text-decoration: underline;
|
---|
338 | }
|
---|
339 | .leaflet-container .leaflet-control-attribution,
|
---|
340 | .leaflet-container .leaflet-control-scale {
|
---|
341 | font-size: 11px;
|
---|
342 | }
|
---|
343 | .leaflet-left .leaflet-control-scale {
|
---|
344 | margin-left: 5px;
|
---|
345 | }
|
---|
346 | .leaflet-bottom .leaflet-control-scale {
|
---|
347 | margin-bottom: 5px;
|
---|
348 | }
|
---|
349 | .leaflet-control-scale-line {
|
---|
350 | border: 2px solid #777;
|
---|
351 | border-top: none;
|
---|
352 | line-height: 1.1;
|
---|
353 | padding: 2px 5px 1px;
|
---|
354 | font-size: 11px;
|
---|
355 | white-space: nowrap;
|
---|
356 | overflow: hidden;
|
---|
357 | -moz-box-sizing: content-box;
|
---|
358 | box-sizing: content-box;
|
---|
359 |
|
---|
360 | background: #fff;
|
---|
361 | background: rgba(255, 255, 255, 0.5);
|
---|
362 | }
|
---|
363 | .leaflet-control-scale-line:not(:first-child) {
|
---|
364 | border-top: 2px solid #777;
|
---|
365 | border-bottom: none;
|
---|
366 | margin-top: -2px;
|
---|
367 | }
|
---|
368 | .leaflet-control-scale-line:not(:first-child):not(:last-child) {
|
---|
369 | border-bottom: 2px solid #777;
|
---|
370 | }
|
---|
371 |
|
---|
372 | .leaflet-touch .leaflet-control-attribution,
|
---|
373 | .leaflet-touch .leaflet-control-layers,
|
---|
374 | .leaflet-touch .leaflet-bar {
|
---|
375 | box-shadow: none;
|
---|
376 | }
|
---|
377 | .leaflet-touch .leaflet-control-layers,
|
---|
378 | .leaflet-touch .leaflet-bar {
|
---|
379 | border: 2px solid rgba(0,0,0,0.2);
|
---|
380 | background-clip: padding-box;
|
---|
381 | }
|
---|
382 |
|
---|
383 |
|
---|
384 | /* popup */
|
---|
385 |
|
---|
386 | .leaflet-popup {
|
---|
387 | position: absolute;
|
---|
388 | text-align: center;
|
---|
389 | }
|
---|
390 | .leaflet-popup-content-wrapper {
|
---|
391 | padding: 1px;
|
---|
392 | text-align: left;
|
---|
393 | border-radius: 12px;
|
---|
394 | }
|
---|
395 | .leaflet-popup-content {
|
---|
396 | margin: 13px 19px;
|
---|
397 | line-height: 1.4;
|
---|
398 | }
|
---|
399 | .leaflet-popup-content p {
|
---|
400 | margin: 18px 0;
|
---|
401 | }
|
---|
402 | .leaflet-popup-tip-container {
|
---|
403 | margin: 0 auto;
|
---|
404 | width: 40px;
|
---|
405 | height: 20px;
|
---|
406 | position: relative;
|
---|
407 | overflow: hidden;
|
---|
408 | }
|
---|
409 | .leaflet-popup-tip {
|
---|
410 | width: 17px;
|
---|
411 | height: 17px;
|
---|
412 | padding: 1px;
|
---|
413 |
|
---|
414 | margin: -10px auto 0;
|
---|
415 |
|
---|
416 | -webkit-transform: rotate(45deg);
|
---|
417 | -moz-transform: rotate(45deg);
|
---|
418 | -ms-transform: rotate(45deg);
|
---|
419 | -o-transform: rotate(45deg);
|
---|
420 | transform: rotate(45deg);
|
---|
421 | }
|
---|
422 | .leaflet-popup-content-wrapper,
|
---|
423 | .leaflet-popup-tip {
|
---|
424 | background: white;
|
---|
425 |
|
---|
426 | box-shadow: 0 3px 14px rgba(0,0,0,0.4);
|
---|
427 | }
|
---|
428 | .leaflet-container a.leaflet-popup-close-button {
|
---|
429 | position: absolute;
|
---|
430 | top: 0;
|
---|
431 | right: 0;
|
---|
432 | padding: 4px 4px 0 0;
|
---|
433 | text-align: center;
|
---|
434 | width: 18px;
|
---|
435 | height: 14px;
|
---|
436 | font: 16px/14px Tahoma, Verdana, sans-serif;
|
---|
437 | color: #c3c3c3;
|
---|
438 | text-decoration: none;
|
---|
439 | font-weight: bold;
|
---|
440 | background: transparent;
|
---|
441 | }
|
---|
442 | .leaflet-container a.leaflet-popup-close-button:hover {
|
---|
443 | color: #999;
|
---|
444 | }
|
---|
445 | .leaflet-popup-scrolled {
|
---|
446 | overflow: auto;
|
---|
447 | border-bottom: 1px solid #ddd;
|
---|
448 | border-top: 1px solid #ddd;
|
---|
449 | }
|
---|
450 |
|
---|
451 | .leaflet-oldie .leaflet-popup-content-wrapper {
|
---|
452 | zoom: 1;
|
---|
453 | }
|
---|
454 | .leaflet-oldie .leaflet-popup-tip {
|
---|
455 | width: 24px;
|
---|
456 | margin: 0 auto;
|
---|
457 |
|
---|
458 | -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
|
---|
459 | filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
|
---|
460 | }
|
---|
461 | .leaflet-oldie .leaflet-popup-tip-container {
|
---|
462 | margin-top: -1px;
|
---|
463 | }
|
---|
464 |
|
---|
465 | .leaflet-oldie .leaflet-control-zoom,
|
---|
466 | .leaflet-oldie .leaflet-control-layers,
|
---|
467 | .leaflet-oldie .leaflet-popup-content-wrapper,
|
---|
468 | .leaflet-oldie .leaflet-popup-tip {
|
---|
469 | border: 1px solid #999;
|
---|
470 | }
|
---|
471 |
|
---|
472 |
|
---|
473 | /* div icon */
|
---|
474 |
|
---|
475 | .leaflet-div-icon {
|
---|
476 | background: #fff;
|
---|
477 | border: 1px solid #666;
|
---|
478 | }
|
---|