leaflet.css 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734
  1. /* required styles */
  2. .leaflet-pane,
  3. #mapDiv { height: 300px; }
  4. #mapDiv .point{
  5. width: 15px ;
  6. height: 15px;
  7. background: #3DC5C4;
  8. border-radius: 15px;
  9. border: 3px solid #FFFFFF;
  10. position: relative;
  11. }
  12. #mapDiv .point .point_bg{
  13. width: 100px;
  14. height: 100px;
  15. position: absolute;
  16. top: -42px;
  17. left: -42px;
  18. z-index: -1;
  19. overflow: hidden;
  20. border-radius: 50%;
  21. display: none;
  22. }
  23. #mapDiv .point .click_model{
  24. width: 40px;
  25. height: 40px;
  26. position: absolute;
  27. top: -12px;
  28. left: -12px;
  29. z-index: 5;
  30. cursor: pointer;
  31. }
  32. #mapDiv .point .point_bg .rotate{
  33. width: 50px;
  34. height: 50px;
  35. background: rgba(0,0,0,.4);
  36. box-sizing: border-box;
  37. border-right: 1px solid #ffffff;
  38. border-bottom: 1px solid #FFFFFF;
  39. }
  40. #mapDiv .point.active{
  41. background: #ff0000;
  42. }
  43. #mapDiv .point.active .point_bg{
  44. display: block;
  45. }
  46. #shapan .point{
  47. width: 15px ;
  48. height: 15px;
  49. background: #3DC5C4;
  50. border-radius: 15px;
  51. border: 3px solid #FFFFFF;
  52. position: relative;
  53. }
  54. #shapan .point .point_bg{
  55. width: 100px;
  56. height: 100px;
  57. position: absolute;
  58. top: -42px;
  59. left: -42px;
  60. z-index: -1;
  61. overflow: hidden;
  62. border-radius: 50%;
  63. display: none;
  64. }
  65. #shapan .point .click_model{
  66. width: 40px;
  67. height: 40px;
  68. position: absolute;
  69. top: -12px;
  70. left: -12px;
  71. z-index: 5;
  72. cursor: pointer;
  73. }
  74. #shapan .point .point_bg .rotate{
  75. width: 50px;
  76. height: 50px;
  77. background: rgba(0,0,0,.4);
  78. box-sizing: border-box;
  79. border-right: 1px solid #ffffff;
  80. border-bottom: 1px solid #FFFFFF;
  81. }
  82. #shapan .point.active{
  83. background: #ff0000;
  84. }
  85. #shapan .point.active .point_bg{
  86. display: block;
  87. }
  88. .leaflet-tile,
  89. .leaflet-marker-icon,
  90. .leaflet-marker-shadow,
  91. .leaflet-tile-container,
  92. .leaflet-pane > svg,
  93. .leaflet-pane > canvas,
  94. .leaflet-zoom-box,
  95. .leaflet-image-layer,
  96. .leaflet-layer {
  97. position: absolute;
  98. left: 0;
  99. top: 0;
  100. }
  101. .leaflet-container {
  102. overflow: hidden;
  103. }
  104. .leaflet-tile,
  105. .leaflet-marker-icon,
  106. .leaflet-marker-shadow {
  107. -webkit-user-select: none;
  108. -moz-user-select: none;
  109. user-select: none;
  110. -webkit-user-drag: none;
  111. }
  112. /* Prevents IE11 from highlighting tiles in blue */
  113. .leaflet-tile::selection {
  114. background: transparent;
  115. }
  116. /* Safari renders non-retina tile on retina better with this, but Chrome is worse */
  117. .leaflet-safari .leaflet-tile {
  118. image-rendering: -webkit-optimize-contrast;
  119. }
  120. /* hack that prevents hw layers "stretching" when loading new tiles */
  121. .leaflet-safari .leaflet-tile-container {
  122. width: 1600px;
  123. height: 1600px;
  124. -webkit-transform-origin: 0 0;
  125. }
  126. .leaflet-marker-icon,
  127. .leaflet-marker-shadow {
  128. display: block;
  129. }
  130. /* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
  131. /* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
  132. .leaflet-container .leaflet-overlay-pane svg,
  133. .leaflet-container .leaflet-marker-pane img,
  134. .leaflet-container .leaflet-shadow-pane img,
  135. .leaflet-container .leaflet-tile-pane img,
  136. .leaflet-container img.leaflet-image-layer,
  137. .leaflet-container .leaflet-tile {
  138. max-width: none !important;
  139. max-height: none !important;
  140. }
  141. .leaflet-container.leaflet-touch-zoom {
  142. -ms-touch-action: pan-x pan-y;
  143. touch-action: pan-x pan-y;
  144. }
  145. .leaflet-container.leaflet-touch-drag {
  146. -ms-touch-action: pinch-zoom;
  147. /* Fallback for FF which doesn't support pinch-zoom */
  148. touch-action: none;
  149. touch-action: pinch-zoom;
  150. }
  151. .leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
  152. -ms-touch-action: none;
  153. touch-action: none;
  154. }
  155. .leaflet-container {
  156. -webkit-tap-highlight-color: transparent;
  157. }
  158. .leaflet-container a {
  159. -webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
  160. }
  161. .leaflet-tile {
  162. filter: inherit;
  163. visibility: hidden;
  164. }
  165. .leaflet-tile-loaded {
  166. visibility: inherit;
  167. }
  168. .leaflet-zoom-box {
  169. width: 0;
  170. height: 0;
  171. -moz-box-sizing: border-box;
  172. box-sizing: border-box;
  173. z-index: 800;
  174. }
  175. /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
  176. .leaflet-overlay-pane svg {
  177. -moz-user-select: none;
  178. }
  179. .leaflet-pane { z-index: 400; }
  180. .leaflet-tile-pane { z-index: 200; }
  181. .leaflet-overlay-pane { z-index: 400; }
  182. .leaflet-shadow-pane { z-index: 500; }
  183. .leaflet-marker-pane { z-index: 600; }
  184. .leaflet-tooltip-pane { z-index: 650; }
  185. .leaflet-popup-pane { z-index: 700; }
  186. .leaflet-map-pane canvas { z-index: 100; }
  187. .leaflet-map-pane svg { z-index: 200; }
  188. .leaflet-vml-shape {
  189. width: 1px;
  190. height: 1px;
  191. }
  192. .lvml {
  193. behavior: url(#default#VML);
  194. display: inline-block;
  195. position: absolute;
  196. }
  197. /* control positioning */
  198. .leaflet-control {
  199. position: relative;
  200. z-index: 800;
  201. pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
  202. pointer-events: auto;
  203. }
  204. .leaflet-top,
  205. .leaflet-bottom {
  206. position: absolute;
  207. z-index: 1000;
  208. pointer-events: none;
  209. }
  210. .leaflet-top {
  211. top: 0;
  212. }
  213. .leaflet-right {
  214. right: 0;
  215. }
  216. .leaflet-bottom {
  217. bottom: 0;
  218. }
  219. .leaflet-left {
  220. left: 0;
  221. }
  222. .leaflet-control {
  223. float: left;
  224. clear: both;
  225. }
  226. .leaflet-right .leaflet-control {
  227. float: right;
  228. }
  229. .leaflet-top .leaflet-control {
  230. margin-top: 10px;
  231. }
  232. .leaflet-bottom .leaflet-control {
  233. margin-bottom: 10px;
  234. }
  235. .leaflet-left .leaflet-control {
  236. margin-left: 10px;
  237. }
  238. .leaflet-right .leaflet-control {
  239. margin-right: 10px;
  240. }
  241. /* zoom and fade animations */
  242. .leaflet-fade-anim .leaflet-tile {
  243. will-change: opacity;
  244. }
  245. .leaflet-fade-anim .leaflet-popup {
  246. opacity: 0;
  247. -webkit-transition: opacity 0.2s linear;
  248. -moz-transition: opacity 0.2s linear;
  249. transition: opacity 0.2s linear;
  250. }
  251. .leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
  252. opacity: 1;
  253. }
  254. .leaflet-zoom-animated {
  255. -webkit-transform-origin: 0 0;
  256. -ms-transform-origin: 0 0;
  257. transform-origin: 0 0;
  258. }
  259. .leaflet-zoom-anim .leaflet-zoom-animated {
  260. will-change: transform;
  261. }
  262. .leaflet-zoom-anim .leaflet-zoom-animated {
  263. -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
  264. -moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
  265. transition: transform 0.25s cubic-bezier(0,0,0.25,1);
  266. }
  267. .leaflet-zoom-anim .leaflet-tile,
  268. .leaflet-pan-anim .leaflet-tile {
  269. -webkit-transition: none;
  270. -moz-transition: none;
  271. transition: none;
  272. }
  273. .leaflet-zoom-anim .leaflet-zoom-hide {
  274. visibility: hidden;
  275. }
  276. /* cursors */
  277. .leaflet-interactive {
  278. cursor: pointer;
  279. }
  280. .leaflet-grab {
  281. cursor: -webkit-grab;
  282. cursor: -moz-grab;
  283. cursor: grab;
  284. }
  285. .leaflet-crosshair,
  286. .leaflet-crosshair .leaflet-interactive {
  287. cursor: crosshair;
  288. }
  289. .leaflet-popup-pane,
  290. .leaflet-control {
  291. cursor: auto;
  292. }
  293. .leaflet-dragging .leaflet-grab,
  294. .leaflet-dragging .leaflet-grab .leaflet-interactive,
  295. .leaflet-dragging .leaflet-marker-draggable {
  296. cursor: move;
  297. cursor: -webkit-grabbing;
  298. cursor: -moz-grabbing;
  299. cursor: grabbing;
  300. }
  301. /* marker & overlays interactivity */
  302. .leaflet-marker-icon,
  303. .leaflet-marker-shadow,
  304. .leaflet-image-layer,
  305. .leaflet-pane > svg path,
  306. .leaflet-tile-container {
  307. pointer-events: none;
  308. }
  309. .leaflet-marker-icon.leaflet-interactive,
  310. .leaflet-image-layer.leaflet-interactive,
  311. .leaflet-pane > svg path.leaflet-interactive,
  312. svg.leaflet-image-layer.leaflet-interactive path {
  313. pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
  314. pointer-events: auto;
  315. }
  316. /* visual tweaks */
  317. .leaflet-container {
  318. background: #ddd;
  319. outline: 0;
  320. }
  321. .leaflet-container a {
  322. color: #0078A8;
  323. }
  324. .leaflet-container a.leaflet-active {
  325. outline: 2px solid orange;
  326. }
  327. .leaflet-zoom-box {
  328. border: 2px dotted #38f;
  329. background: rgba(255,255,255,0.5);
  330. }
  331. /* general typography */
  332. .leaflet-container {
  333. font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
  334. }
  335. /* general toolbar styles */
  336. .leaflet-bar {
  337. box-shadow: 0 1px 5px rgba(0,0,0,0.65);
  338. border-radius: 4px;
  339. }
  340. .leaflet-bar a,
  341. .leaflet-bar a:hover {
  342. background-color: #fff;
  343. border-bottom: 1px solid #ccc;
  344. width: 26px;
  345. height: 26px;
  346. line-height: 26px;
  347. display: block;
  348. text-align: center;
  349. text-decoration: none;
  350. color: black;
  351. }
  352. .leaflet-bar a,
  353. .leaflet-control-layers-toggle {
  354. background-position: 50% 50%;
  355. background-repeat: no-repeat;
  356. display: block;
  357. }
  358. .leaflet-bar a:hover {
  359. background-color: #f4f4f4;
  360. }
  361. .leaflet-bar a:first-child {
  362. border-top-left-radius: 4px;
  363. border-top-right-radius: 4px;
  364. }
  365. .leaflet-bar a:last-child {
  366. border-bottom-left-radius: 4px;
  367. border-bottom-right-radius: 4px;
  368. border-bottom: none;
  369. }
  370. .leaflet-bar a.leaflet-disabled {
  371. cursor: default;
  372. background-color: #f4f4f4;
  373. color: #bbb;
  374. }
  375. .leaflet-touch .leaflet-bar a {
  376. width: 30px;
  377. height: 30px;
  378. line-height: 30px;
  379. }
  380. .leaflet-touch .leaflet-bar a:first-child {
  381. border-top-left-radius: 2px;
  382. border-top-right-radius: 2px;
  383. }
  384. .leaflet-touch .leaflet-bar a:last-child {
  385. border-bottom-left-radius: 2px;
  386. border-bottom-right-radius: 2px;
  387. }
  388. /* zoom control */
  389. .leaflet-control-zoom-in,
  390. .leaflet-control-zoom-out {
  391. font: bold 18px 'Lucida Console', Monaco, monospace;
  392. text-indent: 1px;
  393. }
  394. .leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
  395. font-size: 22px;
  396. }
  397. /* layers control */
  398. .leaflet-control-layers {
  399. box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  400. background: #fff;
  401. border-radius: 5px;
  402. }
  403. .leaflet-control-layers-toggle {
  404. background-image: url(images/layers.png);
  405. width: 36px;
  406. height: 36px;
  407. }
  408. .leaflet-retina .leaflet-control-layers-toggle {
  409. background-image: url(images/layers-2x.png);
  410. background-size: 26px 26px;
  411. }
  412. .leaflet-touch .leaflet-control-layers-toggle {
  413. width: 44px;
  414. height: 44px;
  415. }
  416. .leaflet-control-layers .leaflet-control-layers-list,
  417. .leaflet-control-layers-expanded .leaflet-control-layers-toggle {
  418. display: none;
  419. }
  420. .leaflet-control-layers-expanded .leaflet-control-layers-list {
  421. display: block;
  422. position: relative;
  423. }
  424. .leaflet-control-layers-expanded {
  425. padding: 6px 10px 6px 6px;
  426. color: #333;
  427. background: #fff;
  428. }
  429. .leaflet-control-layers-scrollbar {
  430. overflow-y: scroll;
  431. overflow-x: hidden;
  432. padding-right: 5px;
  433. }
  434. .leaflet-control-layers-selector {
  435. margin-top: 2px;
  436. position: relative;
  437. top: 1px;
  438. }
  439. .leaflet-control-layers label {
  440. display: block;
  441. }
  442. .leaflet-control-layers-separator {
  443. height: 0;
  444. border-top: 1px solid #ddd;
  445. margin: 5px -10px 5px -6px;
  446. }
  447. /* Default icon URLs */
  448. .leaflet-default-icon-path {
  449. background-image: url(images/marker-icon.png);
  450. }
  451. /* attribution and scale controls */
  452. .leaflet-container .leaflet-control-attribution {
  453. background: #fff;
  454. background: rgba(255, 255, 255, 0.7);
  455. margin: 0;
  456. }
  457. .leaflet-control-attribution,
  458. .leaflet-control-scale-line {
  459. padding: 0 5px;
  460. color: #333;
  461. }
  462. .leaflet-control-attribution a {
  463. text-decoration: none;
  464. }
  465. .leaflet-control-attribution a:hover {
  466. text-decoration: underline;
  467. }
  468. .leaflet-container .leaflet-control-attribution,
  469. .leaflet-container .leaflet-control-scale {
  470. font-size: 11px;
  471. }
  472. .leaflet-left .leaflet-control-scale {
  473. margin-left: 5px;
  474. }
  475. .leaflet-bottom .leaflet-control-scale {
  476. margin-bottom: 5px;
  477. }
  478. .leaflet-control-scale-line {
  479. border: 2px solid #777;
  480. border-top: none;
  481. line-height: 1.1;
  482. padding: 2px 5px 1px;
  483. font-size: 11px;
  484. white-space: nowrap;
  485. overflow: hidden;
  486. -moz-box-sizing: border-box;
  487. box-sizing: border-box;
  488. background: #fff;
  489. background: rgba(255, 255, 255, 0.5);
  490. }
  491. .leaflet-control-scale-line:not(:first-child) {
  492. border-top: 2px solid #777;
  493. border-bottom: none;
  494. margin-top: -2px;
  495. }
  496. .leaflet-control-scale-line:not(:first-child):not(:last-child) {
  497. border-bottom: 2px solid #777;
  498. }
  499. .leaflet-touch .leaflet-control-attribution,
  500. .leaflet-touch .leaflet-control-layers,
  501. .leaflet-touch .leaflet-bar {
  502. box-shadow: none;
  503. }
  504. .leaflet-touch .leaflet-control-layers,
  505. .leaflet-touch .leaflet-bar {
  506. border: 2px solid rgba(0,0,0,0.2);
  507. background-clip: padding-box;
  508. }
  509. /* popup */
  510. .leaflet-popup {
  511. position: absolute;
  512. text-align: center;
  513. margin-bottom: 20px;
  514. }
  515. .leaflet-popup-content-wrapper {
  516. padding: 1px;
  517. text-align: left;
  518. border-radius: 12px;
  519. }
  520. .leaflet-popup-content {
  521. margin: 13px 19px;
  522. line-height: 1.4;
  523. }
  524. .leaflet-popup-content p {
  525. margin: 18px 0;
  526. }
  527. .leaflet-popup-tip-container {
  528. width: 40px;
  529. height: 20px;
  530. position: absolute;
  531. left: 50%;
  532. margin-left: -20px;
  533. overflow: hidden;
  534. pointer-events: none;
  535. }
  536. .leaflet-popup-tip {
  537. width: 17px;
  538. height: 17px;
  539. padding: 1px;
  540. margin: -10px auto 0;
  541. -webkit-transform: rotate(45deg);
  542. -moz-transform: rotate(45deg);
  543. -ms-transform: rotate(45deg);
  544. transform: rotate(45deg);
  545. }
  546. .leaflet-popup-content-wrapper,
  547. .leaflet-popup-tip {
  548. background: white;
  549. color: #333;
  550. box-shadow: 0 3px 14px rgba(0,0,0,0.4);
  551. }
  552. .leaflet-container a.leaflet-popup-close-button {
  553. position: absolute;
  554. top: 0;
  555. right: 0;
  556. padding: 4px 4px 0 0;
  557. border: none;
  558. text-align: center;
  559. width: 18px;
  560. height: 14px;
  561. font: 16px/14px Tahoma, Verdana, sans-serif;
  562. color: #c3c3c3;
  563. text-decoration: none;
  564. font-weight: bold;
  565. background: transparent;
  566. }
  567. .leaflet-container a.leaflet-popup-close-button:hover {
  568. color: #999;
  569. }
  570. .leaflet-popup-scrolled {
  571. overflow: auto;
  572. border-bottom: 1px solid #ddd;
  573. border-top: 1px solid #ddd;
  574. }
  575. .leaflet-oldie .leaflet-popup-content-wrapper {
  576. -ms-zoom: 1;
  577. }
  578. .leaflet-oldie .leaflet-popup-tip {
  579. width: 24px;
  580. margin: 0 auto;
  581. -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
  582. filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
  583. }
  584. .leaflet-oldie .leaflet-popup-tip-container {
  585. margin-top: -1px;
  586. }
  587. .leaflet-oldie .leaflet-control-zoom,
  588. .leaflet-oldie .leaflet-control-layers,
  589. .leaflet-oldie .leaflet-popup-content-wrapper,
  590. .leaflet-oldie .leaflet-popup-tip {
  591. border: 1px solid #999;
  592. }
  593. /* div icon */
  594. .leaflet-div-icon {
  595. background: #fff;
  596. border: 1px solid #666;
  597. }
  598. /* Tooltip */
  599. /* Base styles for the element that has a tooltip */
  600. .leaflet-tooltip {
  601. position: absolute;
  602. padding: 6px;
  603. background-color: #fff;
  604. border: 1px solid #fff;
  605. border-radius: 3px;
  606. color: #222;
  607. white-space: nowrap;
  608. -webkit-user-select: none;
  609. -moz-user-select: none;
  610. -ms-user-select: none;
  611. user-select: none;
  612. pointer-events: none;
  613. box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  614. }
  615. .leaflet-tooltip.leaflet-clickable {
  616. cursor: pointer;
  617. pointer-events: auto;
  618. }
  619. .leaflet-tooltip-top:before,
  620. .leaflet-tooltip-bottom:before,
  621. .leaflet-tooltip-left:before,
  622. .leaflet-tooltip-right:before {
  623. position: absolute;
  624. pointer-events: none;
  625. border: 6px solid transparent;
  626. background: transparent;
  627. content: "";
  628. }
  629. /* Directions */
  630. .leaflet-tooltip-bottom {
  631. margin-top: 6px;
  632. }
  633. .leaflet-tooltip-top {
  634. margin-top: -6px;
  635. }
  636. .leaflet-tooltip-bottom:before,
  637. .leaflet-tooltip-top:before {
  638. left: 50%;
  639. margin-left: -6px;
  640. }
  641. .leaflet-tooltip-top:before {
  642. bottom: 0;
  643. margin-bottom: -12px;
  644. border-top-color: #fff;
  645. }
  646. .leaflet-tooltip-bottom:before {
  647. top: 0;
  648. margin-top: -12px;
  649. margin-left: -6px;
  650. border-bottom-color: #fff;
  651. }
  652. .leaflet-tooltip-left {
  653. margin-left: -6px;
  654. }
  655. .leaflet-tooltip-right {
  656. margin-left: 6px;
  657. }
  658. .leaflet-tooltip-left:before,
  659. .leaflet-tooltip-right:before {
  660. top: 50%;
  661. margin-top: -6px;
  662. }
  663. .leaflet-tooltip-left:before {
  664. right: 0;
  665. margin-right: -12px;
  666. border-left-color: #fff;
  667. }
  668. .leaflet-tooltip-right:before {
  669. left: 0;
  670. margin-left: -12px;
  671. border-right-color: #fff;
  672. }