Fixes for size- and width-based modes

- point/size and line/width modes: -- now support proper symbolizing and mapping of nodata features -- symbols' size/width property is set based on the lowest symbol category, their fill or stroke color is defined by `noDataColor` -- nodata appears in legend as well like when using other modes - `noDataColor`: now affects all modes (previously it only affected polygon, point/color and line/color modes). - updated documentation
balladaniel · Nov 1, 2023 · 55e0a13 · 55e0a13
1 parent 4fb2ee8
commit 55e0a13
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -112,7 +112,7 @@ const layer = L.dataClassification(data, {
 #### General options
 - `colorRamp <string>`: color ramp to use for symbology. Based on ColorBrewer2 color ramps (https://colorbrewer2.org/), included in Chroma.js. Custom colors (`colorCustom`) override this. (default: 'PuRd')
 - `colorCustom <array<string>>`: custom color ramp defined as an array, colors in formats supported by Chroma.js, with opacity support. A minimum of two colors are required. If defined, custom colors override `colorRamp`. Example: ['rgba(210,255,178,1)', '#fec44f', 'f95f0eff']. Examples for yellow in different color formats: '#ffff00', 'ffff00', '#ff0', 'yellow', '#ffff0055', 'rgba(255,255,0,0.35)', 'hsla(58,100%,50%,0.6)', chroma('yellow').alpha(0.5). For more formats, see: https://gka.github.io/chroma.js/. For an interactive color palette helper, see: https://gka.github.io/palettes/.
-- `noDataColor <string>`: fill color to use for features with null/nodata attribute values. In polygon, point-color and line-color modes. (default: '#606060')
+- `noDataColor <string>`: fill/line color to use for features with null/nodata attribute values. (default: '#606060')
 - `noDataIgnore <boolean>`: if true, features with null attribute values are not shown on the map. This also means the legend will not have a nodata class (default: false)
 - `reverseColorRamp <boolean>`: if true, reverses the chosen color ramp, both in symbology on map and legend colors. Useful when you found a great looking colorramp (green to red), but would prefer reversed colors to match visual implications about colors: green implies positive, red implies negative phenomena. (default: false)
 - `middlePointValue <number>`: adjust boundary value of middle classes (only when classifying into even classes). Useful for symmetric classification of diverging data around 0. Only use a value within the range of the two middle classes.    

diff --git a/leaflet-dataclassification.js b/leaflet-dataclassification.js
@@ -157,12 +157,12 @@ L.DataClassification = L.GeoJSON.extend({
      */
     _stylePoint_size(value, options){
         return {
-            fillColor: options.style.fillColor,
+            fillColor: (value != null ? options.style.fillColor : options.noDataColor),
             fillOpacity: 1,
             color: "black",
             weight: 1,
             shape: "circle",
-            radius: getRadius(value)
+            radius: (value != null ? getRadius(value) : Math.min.apply(Math, radiuses))
         };
     },
 
@@ -184,7 +184,8 @@ L.DataClassification = L.GeoJSON.extend({
      */
     _styleLine_width(value){
         return {
-            weight: getWeight(value)
+            weight: (value != null ? getWeight(value) : Math.min.apply(Math, widths)),
+            color: (value != null ? options.style.color : options.noDataColor)
         };
     },
 
@@ -500,6 +501,13 @@ L.DataClassification = L.GeoJSON.extend({
                                             '<div>'+ legendRowFormatter(low, high, i, asc) +'</div>'+
                                         '</div>';
                                 }
+                                if (nodata && !nodataignore) {
+                                    container +=
+                                    '<div class="legendDataRow">'+
+                                        svgCreator({shape: ps, size: Math.min.apply(Math, radiuses), color: nodatacolor})+
+                                        '<div>'+lt_formattedNoData+'</div>'+
+                                    '</div>'
+                                }
                                 break;
                         }
                         break;
@@ -540,6 +548,13 @@ L.DataClassification = L.GeoJSON.extend({
                                             '<div>'+ legendRowFormatter(low, high, i, asc) +'</div>'+
                                         '</div>';
                                 }
+                                if (nodata && !nodataignore) {
+                                    container +=
+                                    '<div class="legendDataRow">'+
+                                        svgCreator({shape: ps, size: Math.min.apply(Math, radiuses), color: nodatacolor})+
+                                        '<div>'+lt_formattedNoData+'</div>'+
+                                    '</div>'
+                                }
                                 break;
                         }
                         break;
@@ -588,6 +603,15 @@ L.DataClassification = L.GeoJSON.extend({
                                             '<div>'+ legendRowFormatter(low, high, i, asc) +'</div>'+
                                         '</div>';
                                 }
+                                if (nodata && !nodataignore) {
+                                    container +=
+                                    '<div class="legendDataRow">'+
+                                        '<svg width="25" height="25" viewBox="0 0 25 25" style="margin-left: 4px; margin-right: 10px">'+
+                                            '<line x1="0" y1="12.5" x2="25" y2="12.5" style="stroke-width: '+lw+'; stroke: '+nodatacolor+';"/>'+
+                                        '</svg>' +
+                                        '<div>'+lt_formattedNoData+'</div>'+
+                                    '</div>'
+                                }
                                 break;
                         }
                         break;
@@ -632,6 +656,15 @@ L.DataClassification = L.GeoJSON.extend({
                                             '<div>'+ legendRowFormatter(low, high, i, asc) +'</div>'+
                                         '</div>'
                                 }
+                                if (nodata && !nodataignore) {
+                                    container +=
+                                    '<div class="legendDataRow">'+
+                                        '<svg width="25" height="25" viewBox="0 0 25 25" style="margin-left: 4px; margin-right: 10px">'+
+                                            '<line x1="0" y1="12.5" x2="25" y2="12.5" style="stroke-width: '+lw+'; stroke: '+nodatacolor+';"/>'+
+                                        '</svg>' +
+                                        '<div>'+lt_formattedNoData+'</div>'+
+                                    '</div>'
+                                }
                                 break;
                         }
                         break;