├── LICENSE
├── README.md
├── package.json
└── src
    └── leaflet.zoomcss.js


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 Dag Jomar Mersland
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Leaflet.ZoomCSS
 2 | ===============
 3 | 
 4 | Add zoom level css class to map element for easy style updates based on zoom levels
 5 | 
 6 | Install
 7 | -------
 8 | 
 9 | Just include the leaflet.zoomcss.js file into your project.
10 | 
11 | done.
12 | 
13 | 
14 | How it works
15 | ===========
16 | 
17 | The plugin listens for zoomend events on the map, and updates a class on the map div element.
18 | 
19 | Example
20 | =======
21 | When map zooms to zoomlevel 14, the div would have a class named `z14` added to it
22 | 
23 | `<div id="map" class="leaflet-container z14"> ... </div>`
24 | 
25 | So in your css styles you could do something like:
26 | 
27 | ```
28 | .z14 .my-css-styled-labels{
29 |     font-size: 12px;
30 |     border: 1px solid grey;
31 | }
32 | .z15 .my-css-styled-labels{
33 |     font-size: 10px;
34 |     border: 1px solid grey;
35 | }
36 | .z16 .my-css-styled-labels{
37 |     font-size: 8px;
38 |     border: 0px;
39 | }
40 | .z13 .my-css-styled-labels, .z12 .my-css-styled-labels, .z11 .my-css-styled-labels, .z10 .my-css-styled-labels{
41 |     display: none;
42 | }
43 | ```
44 | 
45 | Another idea is to apply css-transitions for opacity animation on different zoom levels
46 | 
47 | Compatibility
48 | =============
49 | 
50 | Tested on Leaflet 1.2.0


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "leaflet-zoomcss",
 3 |   "version": "0.0.1",
 4 |   "description": "Add zoom level css class to map element for easy style updates based on zoom levels",
 5 |   "main": "src/leaflet.zoomcss.js",
 6 |   "module": "dist/leaflet.zoomcss.js",
 7 |   "repository": {
 8 |     "type": "git",
 9 |     "url": "https://github.com/dagjomar/Leaflet.ZoomCSS.git"
10 |   },
11 |   "author": "Dag Jomar Mersland",
12 |   "license": "MIT",
13 |   "bugs": {
14 |     "url": "https://github.com/dagjomar/Leaflet.ZoomCSS/issues"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/src/leaflet.zoomcss.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |   Leaflet.ZoomCSS
 3 |   Adding a css class on the map div element, so other elements, such as markers can be automatically styled based on the zoom level using css instead of javascript
 4 |   Copyright (c) 2014, Dag Jomar Mersland, dagjomar@gmail.com, @dagjomar
 5 | 
 6 |   https://github.com/dagjomar/Leaflet.ZoomCSS
 7 | */
 8 | 
 9 | 
10 | L.Map.mergeOptions({
11 |   zoomCss: true
12 | });
13 | 
14 | L.Map.ZoomCSS = L.Handler.extend({
15 |   addHooks: function () {
16 |     this._zoomCSS();
17 |     this._map.on('zoomend', this._zoomCSS, this);
18 |   },
19 | 
20 |   removeHooks: function () {
21 |     this._map.off('zoomend', this._zoomCSS, this);
22 |   },
23 | 
24 |   _zoomCSS: function (e) {
25 |     const zoomCssPrefix = 'z';
26 | 
27 |     var map = this._map,
28 |       zoom = map.getZoom(),
29 |       container = map.getContainer();
30 | 
31 |     for ( let i = 0; i < 24; i++ ) {
32 |       container.classList.remove(zoomCssPrefix + String(i));
33 |     }
34 |     if (zoom) {
35 |         container.classList.add(zoomCssPrefix + String(zoom));
36 |     }
37 |   }
38 | 
39 | 
40 | });
41 | 
42 | L.Map.addInitHook('addHandler', 'zoomCss', L.Map.ZoomCSS);
43 | 


--------------------------------------------------------------------------------