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