├── .gitignore ├── .npm └── package │ ├── .gitignore │ ├── README │ └── npm-shrinkwrap.json ├── images ├── layers.png ├── layers-2x.png ├── marker-icon.png ├── marker-icon-2x.png └── marker-shadow.png ├── CHANGELOG.md ├── package.js ├── README.md └── styles └── leaflet.css /.gitignore: -------------------------------------------------------------------------------- 1 | .versions 2 | .npm-debug.log 3 | -------------------------------------------------------------------------------- /.npm/package/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /images/layers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/truemagic-coder/meteor-leaflet/HEAD/images/layers.png -------------------------------------------------------------------------------- /images/layers-2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/truemagic-coder/meteor-leaflet/HEAD/images/layers-2x.png -------------------------------------------------------------------------------- /images/marker-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/truemagic-coder/meteor-leaflet/HEAD/images/marker-icon.png -------------------------------------------------------------------------------- /images/marker-icon-2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/truemagic-coder/meteor-leaflet/HEAD/images/marker-icon-2x.png -------------------------------------------------------------------------------- /images/marker-shadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/truemagic-coder/meteor-leaflet/HEAD/images/marker-shadow.png -------------------------------------------------------------------------------- /.npm/package/README: -------------------------------------------------------------------------------- 1 | This directory and the files immediately inside it are automatically generated 2 | when you change this package's NPM dependencies. Commit the files in this 3 | directory (npm-shrinkwrap.json, .gitignore, and this README) to source control 4 | so that others run the same versions of sub-dependencies. 5 | 6 | You should NOT check in the node_modules directory that Meteor automatically 7 | creates; if you are using git, the .gitignore file tells git to ignore it. 8 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # ChangeLog 2 | 3 | ## 3.2.0 4 | - upgrade to Leaflet 1.3.4 5 | - upgrade to Leaflet MarkerCluster 1.4.1 6 | - upgrade to Leaflet Providers 1.5.0 7 | - upgrade to Leaflet Spin 1.1.0 8 | 9 | ## 3.1.1 10 | - upgrade to Leaflet Spin 1.1.0 11 | 12 | ## 3.1.0 13 | - add leaflet.markercluster 1.0.2 14 | 15 | ## 3.0.3 16 | - upgrade to Leaflet 1.0.3 17 | 18 | ## 3.0.2 19 | - upgrade to Leaflet 1.0.2 20 | - upgrade Leaflet Providers 1.1.16 21 | 22 | ## 3.0.0 23 | - upgrade to Leaflet 1.0.0 24 | - upgrade Leaflet Providers 1.1.15 25 | 26 | ## 2.0.0 27 | - upgrade to Leaflet 0.7.7 28 | - upgrade to Leaflet Providers 1.1.7 29 | - upgrade to Spin.js 2.3.2 30 | 31 | ## 1.3.1 32 | - upgrade to Leaflet 1.0.0-beta.2 33 | - upgrade to Leaflet Providers 1.1.6 34 | 35 | ## 1.2.1 36 | - support Meteor 1.2 with addAssets 37 | 38 | ## 1.0.0 39 | - upgrade to Leaflet 1.0.0-beta.1 40 | - remove Leaflet MarkerCluster as it is incompatible with Leaflet 1.0.0-beta.1 41 | -------------------------------------------------------------------------------- /package.js: -------------------------------------------------------------------------------- 1 | Package.describe({ 2 | name: "bevanhunt:leaflet", 3 | summary: "leaflet - mobile-friendly maps.", 4 | git: "https://github.com/bevanhunt/meteor-leaflet.git", 5 | author: "Bevan Hunt (http://bevanhunt.com)", 6 | version: "3.2.0", 7 | license: "MIT" 8 | }); 9 | 10 | Npm.depends({ 11 | "leaflet": "1.3.4", 12 | "leaflet.markercluster": "1.4.1", 13 | "leaflet-providers": "1.5.0", 14 | "leaflet-spin": "1.1.0", 15 | "spin.js": "2.3.2" 16 | }); 17 | 18 | Package.onUse(function (api) { 19 | api.versionsFrom('1.2'); 20 | api.addFiles([ 21 | '.npm/package/node_modules/leaflet/dist/leaflet-src.js', 22 | '.npm/package/node_modules/leaflet-providers/leaflet-providers.js', 23 | '.npm/package/node_modules/leaflet.markercluster/dist/leaflet.markercluster-src.js', 24 | '.npm/package/node_modules/leaflet.markercluster/dist/MarkerCluster.css', 25 | '.npm/package/node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css', 26 | '.npm/package/node_modules/spin.js/spin.js', 27 | '.npm/package/node_modules/leaflet-spin/leaflet.spin.js', 28 | 'styles/leaflet.css', 29 | ], 'client'); 30 | api.addAssets([ 31 | 'images/layers-2x.png', 32 | 'images/layers.png', 33 | 'images/marker-icon-2x.png', 34 | 'images/marker-icon.png', 35 | 'images/marker-shadow.png' 36 | ],'client'); 37 | }); 38 | -------------------------------------------------------------------------------- /.npm/package/npm-shrinkwrap.json: -------------------------------------------------------------------------------- 1 | { 2 | "lockfileVersion": 1, 3 | "dependencies": { 4 | "leaflet": { 5 | "version": "1.3.4", 6 | "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.3.4.tgz", 7 | "integrity": "sha512-FYL1LGFdj6v+2Ifpw+AcFIuIOqjNggfoLUwuwQv6+3sS21Za7Wvapq+LhbSE4NDXrEj6eYnW3y7LsaBICpyXtw==" 8 | }, 9 | "leaflet-providers": { 10 | "version": "1.5.0", 11 | "resolved": "https://registry.npmjs.org/leaflet-providers/-/leaflet-providers-1.5.0.tgz", 12 | "integrity": "sha512-btncloSyOHrgYNexoz2dRpCl+U9iDQME91RsOWQWNAD9jQUPAkq9mxuTvL/O9VOwrqcEtzhvuHBHIOacJAZDxQ==" 13 | }, 14 | "leaflet-spin": { 15 | "version": "1.1.0", 16 | "resolved": "https://registry.npmjs.org/leaflet-spin/-/leaflet-spin-1.1.0.tgz", 17 | "integrity": "sha1-cpi+O+mrBbVAkT2EkV1jR/SbHk4=", 18 | "dependencies": { 19 | "spin.js": { 20 | "version": "2.3.2", 21 | "resolved": "https://registry.npmjs.org/spin.js/-/spin.js-2.3.2.tgz", 22 | "integrity": "sha1-bKpW1SBnNFD9XPvGlx5tB3LDeho=" 23 | } 24 | } 25 | }, 26 | "leaflet.markercluster": { 27 | "version": "1.4.1", 28 | "resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.4.1.tgz", 29 | "integrity": "sha512-ZSEpE/EFApR0bJ1w/dUGwTSUvWlpalKqIzkaYdYB7jaftQA/Y2Jav+eT4CMtEYFj+ZK4mswP13Q2acnPBnhGOw==" 30 | }, 31 | "spin.js": { 32 | "version": "2.3.2", 33 | "resolved": "https://registry.npmjs.org/spin.js/-/spin.js-2.3.2.tgz", 34 | "integrity": "sha1-bKpW1SBnNFD9XPvGlx5tB3LDeho=" 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Leaflet for Meteor 2 | 3 | ## Purpose 4 | 5 | To provide a Meteor package to quickly build real-time cross-platform map apps. 6 | 7 | ## Meteor Package 8 | - [bevanhunt:meteor-leaflet](https://atmospherejs.com/bevanhunt/leaflet) 9 | 10 | ## Demo 11 | Meteor Leafet Demo | [GitHub](https://github.com/bevanhunt/meteor-leaflet-demo) 12 | 13 | ## Packaged Libraries 14 | - [Leaflet: 1.3.4](https://www.npmjs.com/package/leaflet) 15 | - [Leaflet Providers: 1.5.0](https://www.npmjs.com/package/leaflet-providers) 16 | - [Leaflet MarkerCluster: 1.4.1](https://www.npmjs.com/package/leaflet.markercluster) 17 | - [Leaflet Spin: 1.1.0](https://www.npmjs.com/package/leaflet-spin) 18 | - [Spin.js: 2.3.2](https://www.npmjs.com/package/spin.js) 19 | 20 | ## Roadmap 21 | [Roadmap](https://github.com/bevanhunt/meteor-leaflet/milestones) 22 | 23 | ## Usage 24 | - add this package to your Meteor project 25 | 26 | ```bash 27 | meteor add bevanhunt:leaflet 28 | ``` 29 | 30 | - add a map div to html 31 | 32 | ```html 33 |
34 | ``` 35 | 36 | - add a style for map to css 37 | 38 | ```css 39 | #map { 40 | min-height: 350px; 41 | min-width: 100%; 42 | } 43 | ``` 44 | 45 | - in Javascript client-side code define Leaflet map with default image path 46 | 47 | ```javascript 48 | if (Meteor.isClient) { 49 | L.Icon.Default.imagePath = '/packages/bevanhunt_leaflet/images/'; 50 | var map = L.map('map'); 51 | } 52 | ``` 53 | 54 | - in Javascript client-side code use a free tile provider [optional] - [View Map Choices](http://leaflet-extras.github.io/leaflet-providers/preview/) 55 | 56 | ```javascript 57 | if (Meteor.isClient) { 58 | L.tileLayer.provider('Stamen.Watercolor').addTo(map); 59 | } 60 | ``` 61 | 62 | - in Javascript client-side code use Leaflet Spin [optional] 63 | 64 | - to start the loading spinner 65 | ```javascript 66 | if (Meteor.isClient) { 67 | map.spin(true); 68 | } 69 | ``` 70 | 71 | - to stop the loading spinner 72 | ```javascript 73 | if (Meteor.isClient) { 74 | map.spin(false); 75 | } 76 | ``` 77 | 78 | ## Reactive Popups 79 | 80 | - in Javascript client-side to create Reactive Popups - more [info on Blaze.renderWithData](http://docs.meteor.com/#/full/blaze_renderwithdata). 81 | 82 | ```javascript 83 | if (Meteor.isClient) { 84 | // add marker to map 85 | var marker = L.marker([50.5, 30.5]).addTo(map); 86 | // wrapping node for bindPopup 87 | var containerNode = document.createElement('div'); 88 | // Which template to use for the popup? Some data for it, and attach it to node 89 | Blaze.renderWithData(Template.popup, dataContext, containerNode); 90 | // Finally bind the containerNode to the popup 91 | marker.bindPopup(containerNode).openPopup(); 92 | } 93 | ``` 94 | 95 | ## GeoJSON 96 | 97 | ### From Arrays 98 | * [meteor-leaflet-demo geojson branch](https://github.com/bevanhunt/meteor-leaflet-demo/tree/geojson) is an example array conversion app using the [geojson npm package](https://www.npmjs.com/package/geojson). 99 | 100 | ### From KML/GPX 101 | * [meteor-leaflet-demo KML branch](https://github.com/bevanhunt/meteor-leaflet-demo/tree/kml) is a example KML conversion app using the [togeojson npm package](https://www.npmjs.com/package/togeojson). 102 | 103 | ### From other Formats 104 | * [Orge Web Service](http://ogre.adc4gis.com/) can be used for straight conversion. 105 | 106 | ## Featured Blog Posts 107 | 108 | * [GeoSpatital Indexing in Meteor](http://joshowens.me/using-mongodb-geospatial-index-with-meteor-js/) 109 | 110 | * [RealTime Maps in Meteor](http://asynchrotron.com/blog/2013/12/27/realtime-maps-with-meteor-and-leaflet/) - use bevanhunt:leaflet not mrt:leaflet 111 | 112 | * [Animate with D3 and Leaflet](http://zevross.com/blog/2014/09/30/use-the-amazing-d3-library-to-animate-a-path-on-a-leaflet-map/) (not Meteor specific) 113 | 114 | ## License 115 | MIT 116 | -------------------------------------------------------------------------------- /styles/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-pane > svg, 9 | .leaflet-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 | } 20 | .leaflet-tile, 21 | .leaflet-marker-icon, 22 | .leaflet-marker-shadow { 23 | -webkit-user-select: none; 24 | -moz-user-select: none; 25 | user-select: none; 26 | -webkit-user-drag: none; 27 | } 28 | /* Safari renders non-retina tile on retina better with this, but Chrome is worse */ 29 | .leaflet-safari .leaflet-tile { 30 | image-rendering: -webkit-optimize-contrast; 31 | } 32 | /* hack that prevents hw layers "stretching" when loading new tiles */ 33 | .leaflet-safari .leaflet-tile-container { 34 | width: 1600px; 35 | height: 1600px; 36 | -webkit-transform-origin: 0 0; 37 | } 38 | .leaflet-marker-icon, 39 | .leaflet-marker-shadow { 40 | display: block; 41 | } 42 | /* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */ 43 | /* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */ 44 | .leaflet-container .leaflet-overlay-pane svg, 45 | .leaflet-container .leaflet-marker-pane img, 46 | .leaflet-container .leaflet-shadow-pane img, 47 | .leaflet-container .leaflet-tile-pane img, 48 | .leaflet-container img.leaflet-image-layer, 49 | .leaflet-container .leaflet-tile { 50 | max-width: none !important; 51 | max-height: none !important; 52 | } 53 | 54 | .leaflet-container.leaflet-touch-zoom { 55 | -ms-touch-action: pan-x pan-y; 56 | touch-action: pan-x pan-y; 57 | } 58 | .leaflet-container.leaflet-touch-drag { 59 | -ms-touch-action: pinch-zoom; 60 | /* Fallback for FF which doesn't support pinch-zoom */ 61 | touch-action: none; 62 | touch-action: pinch-zoom; 63 | } 64 | .leaflet-container.leaflet-touch-drag.leaflet-touch-zoom { 65 | -ms-touch-action: none; 66 | touch-action: none; 67 | } 68 | .leaflet-container { 69 | -webkit-tap-highlight-color: transparent; 70 | } 71 | .leaflet-container a { 72 | -webkit-tap-highlight-color: rgba(51, 181, 229, 0.4); 73 | } 74 | .leaflet-tile { 75 | filter: inherit; 76 | visibility: hidden; 77 | } 78 | .leaflet-tile-loaded { 79 | visibility: inherit; 80 | } 81 | .leaflet-zoom-box { 82 | width: 0; 83 | height: 0; 84 | -moz-box-sizing: border-box; 85 | box-sizing: border-box; 86 | z-index: 800; 87 | } 88 | /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */ 89 | .leaflet-overlay-pane svg { 90 | -moz-user-select: none; 91 | } 92 | 93 | .leaflet-pane { z-index: 400; } 94 | 95 | .leaflet-tile-pane { z-index: 200; } 96 | .leaflet-overlay-pane { z-index: 400; } 97 | .leaflet-shadow-pane { z-index: 500; } 98 | .leaflet-marker-pane { z-index: 600; } 99 | .leaflet-tooltip-pane { z-index: 650; } 100 | .leaflet-popup-pane { z-index: 700; } 101 | 102 | .leaflet-map-pane canvas { z-index: 100; } 103 | .leaflet-map-pane svg { z-index: 200; } 104 | 105 | .leaflet-vml-shape { 106 | width: 1px; 107 | height: 1px; 108 | } 109 | .lvml { 110 | /* removed this line to avoid breaking css build scripts trying to resolve path */ 111 | /* behavior: url(#default#VML);*/ 112 | display: inline-block; 113 | position: absolute; 114 | } 115 | 116 | 117 | /* control positioning */ 118 | 119 | .leaflet-control { 120 | position: relative; 121 | z-index: 800; 122 | pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */ 123 | pointer-events: auto; 124 | } 125 | .leaflet-top, 126 | .leaflet-bottom { 127 | position: absolute; 128 | z-index: 1000; 129 | pointer-events: none; 130 | } 131 | .leaflet-top { 132 | top: 0; 133 | } 134 | .leaflet-right { 135 | right: 0; 136 | } 137 | .leaflet-bottom { 138 | bottom: 0; 139 | } 140 | .leaflet-left { 141 | left: 0; 142 | } 143 | .leaflet-control { 144 | float: left; 145 | clear: both; 146 | } 147 | .leaflet-right .leaflet-control { 148 | float: right; 149 | } 150 | .leaflet-top .leaflet-control { 151 | margin-top: 10px; 152 | } 153 | .leaflet-bottom .leaflet-control { 154 | margin-bottom: 10px; 155 | } 156 | .leaflet-left .leaflet-control { 157 | margin-left: 10px; 158 | } 159 | .leaflet-right .leaflet-control { 160 | margin-right: 10px; 161 | } 162 | 163 | 164 | /* zoom and fade animations */ 165 | 166 | .leaflet-fade-anim .leaflet-tile { 167 | will-change: opacity; 168 | } 169 | .leaflet-fade-anim .leaflet-popup { 170 | opacity: 0; 171 | -webkit-transition: opacity 0.2s linear; 172 | -moz-transition: opacity 0.2s linear; 173 | transition: opacity 0.2s linear; 174 | } 175 | .leaflet-fade-anim .leaflet-map-pane .leaflet-popup { 176 | opacity: 1; 177 | } 178 | .leaflet-zoom-animated { 179 | -webkit-transform-origin: 0 0; 180 | -ms-transform-origin: 0 0; 181 | transform-origin: 0 0; 182 | } 183 | .leaflet-zoom-anim .leaflet-zoom-animated { 184 | will-change: transform; 185 | } 186 | .leaflet-zoom-anim .leaflet-zoom-animated { 187 | -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1); 188 | -moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1); 189 | transition: transform 0.25s cubic-bezier(0,0,0.25,1); 190 | } 191 | .leaflet-zoom-anim .leaflet-tile, 192 | .leaflet-pan-anim .leaflet-tile { 193 | -webkit-transition: none; 194 | -moz-transition: none; 195 | transition: none; 196 | } 197 | 198 | .leaflet-zoom-anim .leaflet-zoom-hide { 199 | visibility: hidden; 200 | } 201 | 202 | 203 | /* cursors */ 204 | 205 | .leaflet-interactive { 206 | cursor: pointer; 207 | } 208 | .leaflet-grab { 209 | cursor: -webkit-grab; 210 | cursor: -moz-grab; 211 | cursor: grab; 212 | } 213 | .leaflet-crosshair, 214 | .leaflet-crosshair .leaflet-interactive { 215 | cursor: crosshair; 216 | } 217 | .leaflet-popup-pane, 218 | .leaflet-control { 219 | cursor: auto; 220 | } 221 | .leaflet-dragging .leaflet-grab, 222 | .leaflet-dragging .leaflet-grab .leaflet-interactive, 223 | .leaflet-dragging .leaflet-marker-draggable { 224 | cursor: move; 225 | cursor: -webkit-grabbing; 226 | cursor: -moz-grabbing; 227 | cursor: grabbing; 228 | } 229 | 230 | /* marker & overlays interactivity */ 231 | .leaflet-marker-icon, 232 | .leaflet-marker-shadow, 233 | .leaflet-image-layer, 234 | .leaflet-pane > svg path, 235 | .leaflet-tile-container { 236 | pointer-events: none; 237 | } 238 | 239 | .leaflet-marker-icon.leaflet-interactive, 240 | .leaflet-image-layer.leaflet-interactive, 241 | .leaflet-pane > svg path.leaflet-interactive { 242 | pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */ 243 | pointer-events: auto; 244 | } 245 | 246 | /* visual tweaks */ 247 | 248 | .leaflet-container { 249 | background: #ddd; 250 | outline: 0; 251 | } 252 | .leaflet-container a { 253 | color: #0078A8; 254 | } 255 | .leaflet-container a.leaflet-active { 256 | outline: 2px solid orange; 257 | } 258 | .leaflet-zoom-box { 259 | border: 2px dotted #38f; 260 | background: rgba(255,255,255,0.5); 261 | } 262 | 263 | 264 | /* general typography */ 265 | .leaflet-container { 266 | font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; 267 | } 268 | 269 | 270 | /* general toolbar styles */ 271 | 272 | .leaflet-bar { 273 | box-shadow: 0 1px 5px rgba(0,0,0,0.65); 274 | border-radius: 4px; 275 | } 276 | .leaflet-bar a, 277 | .leaflet-bar a:hover { 278 | background-color: #fff; 279 | border-bottom: 1px solid #ccc; 280 | width: 26px; 281 | height: 26px; 282 | line-height: 26px; 283 | display: block; 284 | text-align: center; 285 | text-decoration: none; 286 | color: black; 287 | } 288 | .leaflet-bar a, 289 | .leaflet-control-layers-toggle { 290 | background-position: 50% 50%; 291 | background-repeat: no-repeat; 292 | display: block; 293 | } 294 | .leaflet-bar a:hover { 295 | background-color: #f4f4f4; 296 | } 297 | .leaflet-bar a:first-child { 298 | border-top-left-radius: 4px; 299 | border-top-right-radius: 4px; 300 | } 301 | .leaflet-bar a:last-child { 302 | border-bottom-left-radius: 4px; 303 | border-bottom-right-radius: 4px; 304 | border-bottom: none; 305 | } 306 | .leaflet-bar a.leaflet-disabled { 307 | cursor: default; 308 | background-color: #f4f4f4; 309 | color: #bbb; 310 | } 311 | 312 | .leaflet-touch .leaflet-bar a { 313 | width: 30px; 314 | height: 30px; 315 | line-height: 30px; 316 | } 317 | .leaflet-touch .leaflet-bar a:first-child { 318 | border-top-left-radius: 2px; 319 | border-top-right-radius: 2px; 320 | } 321 | .leaflet-touch .leaflet-bar a:last-child { 322 | border-bottom-left-radius: 2px; 323 | border-bottom-right-radius: 2px; 324 | } 325 | 326 | /* zoom control */ 327 | 328 | .leaflet-control-zoom-in, 329 | .leaflet-control-zoom-out { 330 | font: bold 18px 'Lucida Console', Monaco, monospace; 331 | text-indent: 1px; 332 | } 333 | 334 | .leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out { 335 | font-size: 22px; 336 | } 337 | 338 | 339 | /* layers control */ 340 | 341 | .leaflet-control-layers { 342 | box-shadow: 0 1px 5px rgba(0,0,0,0.4); 343 | background: #fff; 344 | border-radius: 5px; 345 | } 346 | .leaflet-control-layers-toggle { 347 | background-image: url(images/layers.png); 348 | width: 36px; 349 | height: 36px; 350 | } 351 | .leaflet-retina .leaflet-control-layers-toggle { 352 | background-image: url(images/layers-2x.png); 353 | background-size: 26px 26px; 354 | } 355 | .leaflet-touch .leaflet-control-layers-toggle { 356 | width: 44px; 357 | height: 44px; 358 | } 359 | .leaflet-control-layers .leaflet-control-layers-list, 360 | .leaflet-control-layers-expanded .leaflet-control-layers-toggle { 361 | display: none; 362 | } 363 | .leaflet-control-layers-expanded .leaflet-control-layers-list { 364 | display: block; 365 | position: relative; 366 | } 367 | .leaflet-control-layers-expanded { 368 | padding: 6px 10px 6px 6px; 369 | color: #333; 370 | background: #fff; 371 | } 372 | .leaflet-control-layers-scrollbar { 373 | overflow-y: scroll; 374 | overflow-x: hidden; 375 | padding-right: 5px; 376 | } 377 | .leaflet-control-layers-selector { 378 | margin-top: 2px; 379 | position: relative; 380 | top: 1px; 381 | } 382 | .leaflet-control-layers label { 383 | display: block; 384 | } 385 | .leaflet-control-layers-separator { 386 | height: 0; 387 | border-top: 1px solid #ddd; 388 | margin: 5px -10px 5px -6px; 389 | } 390 | 391 | /* Default icon URLs */ 392 | .leaflet-default-icon-path { 393 | background-image: url(images/marker-icon.png); 394 | } 395 | 396 | 397 | /* attribution and scale controls */ 398 | 399 | .leaflet-container .leaflet-control-attribution { 400 | background: #fff; 401 | background: rgba(255, 255, 255, 0.7); 402 | margin: 0; 403 | } 404 | .leaflet-control-attribution, 405 | .leaflet-control-scale-line { 406 | padding: 0 5px; 407 | color: #333; 408 | } 409 | .leaflet-control-attribution a { 410 | text-decoration: none; 411 | } 412 | .leaflet-control-attribution a:hover { 413 | text-decoration: underline; 414 | } 415 | .leaflet-container .leaflet-control-attribution, 416 | .leaflet-container .leaflet-control-scale { 417 | font-size: 11px; 418 | } 419 | .leaflet-left .leaflet-control-scale { 420 | margin-left: 5px; 421 | } 422 | .leaflet-bottom .leaflet-control-scale { 423 | margin-bottom: 5px; 424 | } 425 | .leaflet-control-scale-line { 426 | border: 2px solid #777; 427 | border-top: none; 428 | line-height: 1.1; 429 | padding: 2px 5px 1px; 430 | font-size: 11px; 431 | white-space: nowrap; 432 | overflow: hidden; 433 | -moz-box-sizing: border-box; 434 | box-sizing: border-box; 435 | 436 | background: #fff; 437 | background: rgba(255, 255, 255, 0.5); 438 | } 439 | .leaflet-control-scale-line:not(:first-child) { 440 | border-top: 2px solid #777; 441 | border-bottom: none; 442 | margin-top: -2px; 443 | } 444 | .leaflet-control-scale-line:not(:first-child):not(:last-child) { 445 | border-bottom: 2px solid #777; 446 | } 447 | 448 | .leaflet-touch .leaflet-control-attribution, 449 | .leaflet-touch .leaflet-control-layers, 450 | .leaflet-touch .leaflet-bar { 451 | box-shadow: none; 452 | } 453 | .leaflet-touch .leaflet-control-layers, 454 | .leaflet-touch .leaflet-bar { 455 | border: 2px solid rgba(0,0,0,0.2); 456 | background-clip: padding-box; 457 | } 458 | 459 | 460 | /* popup */ 461 | 462 | .leaflet-popup { 463 | position: absolute; 464 | text-align: center; 465 | margin-bottom: 20px; 466 | } 467 | .leaflet-popup-content-wrapper { 468 | padding: 1px; 469 | text-align: left; 470 | border-radius: 12px; 471 | } 472 | .leaflet-popup-content { 473 | margin: 13px 19px; 474 | line-height: 1.4; 475 | } 476 | .leaflet-popup-content p { 477 | margin: 18px 0; 478 | } 479 | .leaflet-popup-tip-container { 480 | width: 40px; 481 | height: 20px; 482 | position: absolute; 483 | left: 50%; 484 | margin-left: -20px; 485 | overflow: hidden; 486 | pointer-events: none; 487 | } 488 | .leaflet-popup-tip { 489 | width: 17px; 490 | height: 17px; 491 | padding: 1px; 492 | 493 | margin: -10px auto 0; 494 | 495 | -webkit-transform: rotate(45deg); 496 | -moz-transform: rotate(45deg); 497 | -ms-transform: rotate(45deg); 498 | transform: rotate(45deg); 499 | } 500 | .leaflet-popup-content-wrapper, 501 | .leaflet-popup-tip { 502 | background: white; 503 | color: #333; 504 | box-shadow: 0 3px 14px rgba(0,0,0,0.4); 505 | } 506 | .leaflet-container a.leaflet-popup-close-button { 507 | position: absolute; 508 | top: 0; 509 | right: 0; 510 | padding: 4px 4px 0 0; 511 | border: none; 512 | text-align: center; 513 | width: 18px; 514 | height: 14px; 515 | font: 16px/14px Tahoma, Verdana, sans-serif; 516 | color: #c3c3c3; 517 | text-decoration: none; 518 | font-weight: bold; 519 | background: transparent; 520 | } 521 | .leaflet-container a.leaflet-popup-close-button:hover { 522 | color: #999; 523 | } 524 | .leaflet-popup-scrolled { 525 | overflow: auto; 526 | border-bottom: 1px solid #ddd; 527 | border-top: 1px solid #ddd; 528 | } 529 | 530 | .leaflet-oldie .leaflet-popup-content-wrapper { 531 | zoom: 1; 532 | } 533 | .leaflet-oldie .leaflet-popup-tip { 534 | width: 24px; 535 | margin: 0 auto; 536 | 537 | -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)"; 538 | filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678); 539 | } 540 | .leaflet-oldie .leaflet-popup-tip-container { 541 | margin-top: -1px; 542 | } 543 | 544 | .leaflet-oldie .leaflet-control-zoom, 545 | .leaflet-oldie .leaflet-control-layers, 546 | .leaflet-oldie .leaflet-popup-content-wrapper, 547 | .leaflet-oldie .leaflet-popup-tip { 548 | border: 1px solid #999; 549 | } 550 | 551 | 552 | /* div icon */ 553 | 554 | .leaflet-div-icon { 555 | background: #fff; 556 | border: 1px solid #666; 557 | } 558 | 559 | 560 | /* Tooltip */ 561 | /* Base styles for the element that has a tooltip */ 562 | .leaflet-tooltip { 563 | position: absolute; 564 | padding: 6px; 565 | background-color: #fff; 566 | border: 1px solid #fff; 567 | border-radius: 3px; 568 | color: #222; 569 | white-space: nowrap; 570 | -webkit-user-select: none; 571 | -moz-user-select: none; 572 | -ms-user-select: none; 573 | user-select: none; 574 | pointer-events: none; 575 | box-shadow: 0 1px 3px rgba(0,0,0,0.4); 576 | } 577 | .leaflet-tooltip.leaflet-clickable { 578 | cursor: pointer; 579 | pointer-events: auto; 580 | } 581 | .leaflet-tooltip-top:before, 582 | .leaflet-tooltip-bottom:before, 583 | .leaflet-tooltip-left:before, 584 | .leaflet-tooltip-right:before { 585 | position: absolute; 586 | pointer-events: none; 587 | border: 6px solid transparent; 588 | background: transparent; 589 | content: ""; 590 | } 591 | 592 | /* Directions */ 593 | 594 | .leaflet-tooltip-bottom { 595 | margin-top: 6px; 596 | } 597 | .leaflet-tooltip-top { 598 | margin-top: -6px; 599 | } 600 | .leaflet-tooltip-bottom:before, 601 | .leaflet-tooltip-top:before { 602 | left: 50%; 603 | margin-left: -6px; 604 | } 605 | .leaflet-tooltip-top:before { 606 | bottom: 0; 607 | margin-bottom: -12px; 608 | border-top-color: #fff; 609 | } 610 | .leaflet-tooltip-bottom:before { 611 | top: 0; 612 | margin-top: -12px; 613 | margin-left: -6px; 614 | border-bottom-color: #fff; 615 | } 616 | .leaflet-tooltip-left { 617 | margin-left: -6px; 618 | } 619 | .leaflet-tooltip-right { 620 | margin-left: 6px; 621 | } 622 | .leaflet-tooltip-left:before, 623 | .leaflet-tooltip-right:before { 624 | top: 50%; 625 | margin-top: -6px; 626 | } 627 | .leaflet-tooltip-left:before { 628 | right: 0; 629 | margin-right: -12px; 630 | border-left-color: #fff; 631 | } 632 | .leaflet-tooltip-right:before { 633 | left: 0; 634 | margin-left: -12px; 635 | border-right-color: #fff; 636 | } 637 | --------------------------------------------------------------------------------