Add updateOpacity to options

consbio · May 29, 2018 · b5cc75d · b5cc75d
1 parent 9aef962
commit b5cc75d
Show file tree

Hide file tree

Showing 7 changed files with 159 additions and 55 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,9 @@
-0.2.3 (2017-11-13)
+0.3.1 (2018-05-29)
+  * Add `updateOpacity` to `options`
+    - A new method that allows to use a custom function for adjusting layers opacity
+  * Fix version
+
+0.3.0 (2017-11-13)
   * Add `addLegend`
     - A new method to add legends to existing instances of HtmlLegend
 

diff --git a/README.md b/README.md
@@ -29,22 +29,19 @@ Include the JavaScript:
 ```
 
 
-Options:
-```
-{
-    position: 'topright',
-    legends: [],   // array of legend entries. see below for the structure
-    collapseSimple: false,  // if true, legend entries that are from a simple renderer will use compact presentation
-    detectStretched: false,  // if true, will test to see if legend entries look stretched.  These are usually in sets of 3 with the middle element having no label.
-    collapsedOnInit: false,  // if true, legends will be collapsed when a new instance is initialized.
-    defaultOpacity: 1, // default opacity for layers in specified in legends.
-    visibleIcon: 'leaflet-html-legend-icon-eye',  // css class for the visible icon on opacity slider
-    hiddenIcon: 'leaflet-html-legend-icon-eye-slash',  // css class for the hidden icon on opacity slider
-    toggleIcon: 'leaflet-html-legend-icon-eye-slash'  // css class for the icon on visibility toggle button
-}
-```
-
-
+#### Options:
+| Option | Type | Default | Description |
+| :---   | :--- | :---    | :---        |
+| position | String | 'topright' | Map position of element |
+| legend | Array | - | Array of legend entries (see below for the structure) |
+| collapseSimple | bool | false | Whether to use compact presentation for legend entries that are from a simple renderer |
+| detectStreched | bool | false | Test to see if legend entries look stretched (these are usually in sets of 3 with the middle element having no label) |
+| collapsedOnInit | bool | false | Whether to initialize instance in collapsed mode |
+| updateOpacity | function | null | If set, this function is used to update opacity of the attached layer (it receives the layer and opacity as arguments) |
+| defaultOpacity | number | 1 | Default opacity for layers in specified in legends |
+| visibleIcon | String | 'leaflet-html-legend-icon-eye' | css class for the visible icon on opacity slider |
+| hiddenIcon | String | 'leaflet-html-legend-icon-eye-slash' | css class for the hidden icon on opacity slider |
+| toggleIcon | String | 'leaflet-html-legend-icon-eye-slash' | css class for the icon on visibility toggle button |
 
 Each entry in `legends` array can have the following keys:
 * name

diff --git a/dist/L.Control.HtmlLegend.js b/dist/L.Control.HtmlLegend.js
diff --git a/dist/L.Control.HtmlLegend.js.map b/dist/L.Control.HtmlLegend.js.map
diff --git a/index.html b/index.html
@@ -36,6 +36,34 @@
         .icon-eye:before {
             content: "\e904";
         }
+
+        .hexagon {
+            position: relative;
+            width: 13px;
+            height: 7.51px;
+            background-color: #64C7CC;
+            margin: 3.75px 0;
+        }
+
+        .hexagon:before,
+        .hexagon:after {
+            content: "";
+            position: absolute;
+            width: 0;
+            border-left: 6.5px solid transparent;
+            border-right: 6.5px solid transparent;
+        }
+
+        .hexagon:before {
+            bottom: 100%;
+            border-bottom: 3.75px solid #64C7CC;
+        }
+
+        .hexagon:after {
+            top: 100%;
+            width: 0;
+            border-top: 3.75px solid #64C7CC;
+        }
     </style>
 </head>
 <body>
@@ -56,14 +84,14 @@
 </div>
 
 <script>
-    var map = L.map('map').setView([28.707, -109], 8);
+    var map = L.map('map').setView([28.707, -109], 8)
 
     L.tileLayer('//stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png', {
         attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
         subdomains: 'abcd',
         maxZoom: 10,
         minZoom: 2
-    }).addTo(map);
+    }).addTo(map)
 
     var layer1GeoJSON = {
         'type': 'FeatureCollection',
@@ -131,7 +159,7 @@
                 }
             }
         ]
-    };
+    }
 
     var layer2GeoJSON = {
         'type': 'FeatureCollection',
@@ -164,9 +192,9 @@
                 }
             }
         ]
-    };
+    }
 
-    layer3GeoJSON = {
+    var layer3GeoJSON = {
         'type': 'Feature',
         'properties': {},
         'geometry': {
@@ -200,35 +228,85 @@
                 ]
             ]
         }
-    };
+    }
+
+    var layer4GeoJSON = {
+        'type': 'FeatureCollection',
+        'features': [
+            {
+                'type': 'Feature',
+                'properties': {},
+                'geometry': {
+                    'type': 'Polygon',
+                    'coordinates': [
+                        [
+                            [
+                                -108.25653076171875,
+                                29.188135030802496
+                            ],
+                            [
+                                -108.28262329101562,
+                                29.10897615145302
+                            ],
+                            [
+                                -108.22769165039062,
+                                29.059771002186196
+                            ],
+                            [
+                                -108.13980102539062,
+                                29.054969241647125
+                            ],
+                            [
+                                -108.09036254882812,
+                                29.123373210819224
+                            ],
+                            [
+                                -108.12606811523438,
+                                29.185737173254434
+                            ],
+                            [
+                                -108.25653076171875,
+                                29.188135030802496
+                            ]
+                        ]
+                    ]
+                }
+            }
+        ]
+    }
 
     var layer1 = L.geoJSON(layer1GeoJSON, {
         style: function (feature) {
-            return { color: feature.properties.color, fill: false };
+            return { color: feature.properties.color, fill: false }
         }
-    }).addTo(map);
+    }).addTo(map)
 
     var layer2 = L.geoJSON(layer2GeoJSON, {
         style: function (feature) {
-            return { color: 'blue', fill: false };
+            return { color: 'blue', fill: false }
         }
-    });
+    })
 
     var layer3 = L.geoJSON(layer3GeoJSON, {
         style: function (feature) {
-            return { color: 'orange', fill: false };
+            return { color: 'orange', fill: false }
         }
-    }).addTo(map);
+    }).addTo(map)
+
+    var layer4 = L.geoJSON(layer4GeoJSON, {
+        style: { stroke: false, fillColor: '#64C7CC', fill: true }
+    }).addTo(map)
 
     var overlays = {
         'Layer 1': layer1,
         'Layer 2': layer2,
-        'Layer 3': layer3
-    };
+        'Layer 3': layer3,
+        'Layer 4:': layer4
+    }
 
-    L.control.layers(null, overlays, { collapsed: false }).addTo(map);
+    L.control.layers(null, overlays, { collapsed: false }).addTo(map)
 
-    var htmlLegend1 = L.control.htmllegend({
+    var htmlLegend1and2 = L.control.htmllegend({
         position: 'bottomright',
         legends: [{
             name: 'Layer 1',
@@ -257,9 +335,9 @@
         defaultOpacity: 0.7,
         visibleIcon: 'icon icon-eye',
         hiddenIcon: 'icon icon-eye-slash'
-    });
+    })
 
-    htmlLegend1.addLegend({
+    htmlLegend1and2.addLegend({
         name: 'Layer 2',
         layer: layer2,
         opacity: 0.5,
@@ -271,10 +349,10 @@
                 'height': '10px'
             }
         }]
-    });
-    map.addControl(htmlLegend1);
+    })
+    map.addControl(htmlLegend1and2)
 
-    var htmlLegend2 = L.control.htmllegend({
+    var htmlLegend3 = L.control.htmllegend({
         position: 'bottomright',
         legends: [{
             name: 'Layer 3',
@@ -287,9 +365,31 @@
         detectStretched: true,
         visibleIcon: 'icon icon-eye',
         hiddenIcon: 'icon icon-eye-slash'
-    });
+    })
+
+    map.addControl(htmlLegend3)
+
+    var htmlLegend4 = L.control.htmllegend({
+        position: 'bottomright',
+        legends: [{
+            name: 'Layer 4',
+            layer: layer4,
+            elements: [{
+                label: 'Hexagon',
+                html: '<div class="hexagon"></div>'
+            }]
+        }],
+        defaultOpacity: 0.8,
+        collapseSimple: true,
+        detectStretched: true,
+        visibleIcon: 'icon icon-eye',
+        hiddenIcon: 'icon icon-eye-slash',
+        updateOpacity: function (layer, opacity) {
+            layer.setStyle({ stroke: false, fillColor: '#64C7CC', fill: true, fillOpacity: opacity })
+        }
+    })
 
-    map.addControl(htmlLegend2);
+    map.addControl(htmlLegend4)
 </script>
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,29 +1,29 @@
 {
   "name": "leaflet-html-legend",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Leaflet legend plugin using html elements",
   "homepage": "http://github.com/consbio/Leaflet.HtmlLegend",
   "author": {
     "name": "Kaveh Karimi",
-    "email": "kaveh.ka@consbio.org"
+    "email": "[email protected]"
   },
   "scripts": {
     "build": "webpack --config webpack.config.js"
   },
   "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-preset-es2015": "^6.24.1",
-    "css-loader": "^0.28.7",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "style-loader": "^0.19.0",
-    "webpack": "^3.8.1"
+    "babel-core": "^6.26.*",
+    "babel-loader": "^7.1.*",
+    "babel-preset-es2015": "^6.24.*",
+    "css-loader": "^0.28.*",
+    "extract-text-webpack-plugin": "^3.0.*",
+    "style-loader": "^0.19.*",
+    "webpack": "^3.8.*"
   },
   "bugs": {
     "url": "https://github.com/consbio/Leaflet.HtmlLegend/issues"
   },
   "peerDependencies": {
-    "leaflet": "^1.2.0"
+    "leaflet": "^1.3.*"
   },
   "main": "dist/L.Control.HtmlLegend.js",
   "repository": {

diff --git a/src/L.Control.HtmlLegend.js b/src/L.Control.HtmlLegend.js
@@ -17,6 +17,7 @@ L.Control.HtmlLegend = L.Control.extend({
         // if true, legends will be collapsed when a new instance is initialized
         collapsedOnInit: false,
 
+        updateOpacity: null,
         defaultOpacity: 1,
         visibleIcon: 'leaflet-html-legend-icon-eye',
         hiddenIcon: 'leaflet-html-legend-icon-eye-slash',
@@ -120,10 +121,11 @@ L.Control.HtmlLegend = L.Control.extend({
     },
 
     _updateOpacity(layer, opacity) {
-        if (typeof layer.setOpacity === 'function') {
+        if (typeof this.options.updateOpacity === 'function') {
+            this.options.updateOpacity(layer, opacity)
+        } else if (typeof layer.setOpacity === 'function') {
             layer.setOpacity(opacity);
-        }
-        else if (typeof layer.setStyle === 'function') {
+        } else if (typeof layer.setStyle === 'function') {
             layer.setStyle({ opacity });
         }
     },