Recent Releases of leaflet-dataclassification
leaflet-dataclassification - v1.6.1
Improvements, fixes
- rework of SVG point symbols:
- creates a proper SVG element and sets its attributes
- canvas size of point symbols (
width/heightof<svg>elements) now matches the actual symbol size (symbol width + strokewidth*2). It was a consistent 30x30px before, both on map (incorrectly) and in legend. In the legend, point symbols are now always converted (shifted) to be in the centre of a 30x30px canvas. - fixed positioning of symbols being spatially off-centre, incorrectly (in example
points_s.html, hover over points to open tooltip, up to commit https://github.com/balladaniel/leaflet-dataclassification/commit/6269669ad1ce66f5747e8d679ce6da9f08d1d81f)
- fix: option
pointShapehad no effect when styling MultiPoint features - processing time is now measured, optionally
- set
showTimeBreakdown:truein leaflet-dataclassification.js to see results in console - specific steps are detailed for a specific layer (in ms): Loading values, Data normalization, Generating classes, Generating colors, Generating symbol size ranges, Applying symbology based on classes, Generating legend, Total processing time
- set
- updated readme to indicate feature count for example/demo pages
- examples:
- new example:
polygons_c2.htmlwith 3220 polygons (us_pres_elections_2020_turnout_bycounty.geojson) - added direct links to other demos/examples in info panel
- new example:
- JavaScript
Published by balladaniel about 2 years ago
leaflet-dataclassification - v1.6

New features
- Classification mode: logarithmic scale (
mode:logarithmic)- calculates a multiplication factor based on the logarithmic difference of minimum and maximum values in dataset, which factor is then used to iteratively multiply the previous (smaller) class boundary value, starting with the minimum value
- as a result, class intervals will be logarithmically widening towards maximum values
- does not work with negative values yet
- applies a
classRoundingof 2 by default, which can be overridden if needed
- Legend footer (new option
legendFooter)- for any additional information to pair with the data
- is centered below the class list in the Legend
- uses a smaller italic font by default (customizble in CSS -
.legendFooterclass) - HTML-markdown and CSS styling allowed
- hidden by default
Improvements, fixes
- improved class rounding logic for the lowest two classes (no longer uses a hardcoded rounding up for the lowest class, introduced in #2 , commit https://github.com/balladaniel/leaflet-dataclassification/commit/9b5bd93262f1fba88e280df3eaae085c1eaac1d9)
- legend: empty legend title div no longer gets added to legend div when
legendTitleintended to be hidden, avoiding styling issues. This applies to the just-introducedlegendFooteras well. - legend: adjusted order of creating parts of legend
- added some debug status messages
- updated documentation
- updated main screenshot
- examples:
points_c.html: added legend footer to showcase featurepoints_s.html: classRounding from -2 to -3
- JavaScript
Published by balladaniel about 2 years ago
leaflet-dataclassification - v1.5

New features
- Data normalization (option
normalizeByField)- data normalization by another attribute field in GeoJSON, to normalize values of chosen
fieldby - useful for any dataset that is usually shown in a normalized form, e.g. a population density map
normalizeByFieldexpects a string of an attribute field that exists in GeoJSON, in a similar fashion tofield
- data normalization by another attribute field in GeoJSON, to normalize values of chosen
Improvements, fixes
- values are now processed and loaded into an object (
features), with all their attributes for later use features.finalvaluenow contains a processed value to base classification on (finalvalue is either untouched or normalized already)- added some checks for null, set more defaults in-code (missing fill color in point/size symbols, stroke color in line/width mode)
- debug message updates, code cleanup
- updated readme
- updated screenshot
- examples:
- all: added banner image to examples' info panels, adjusted their text formatting
polygons_c.html: now uses fieldspopulation2022as base andareakm2as normalization attributecombined.html: line features show river discharge for Yukon and its tributaries now, their tooltips display m³/s and cuft/s values, added feature section highlightingrivers_yukon.geojsondataset: now contains river discharge for Yukon and its tributaries
- JavaScript
Published by balladaniel about 2 years ago
leaflet-dataclassification - v1.4

New features
- Classification mode: standard deviation (
mode:stddeviation)- class intervals are defined using standard deviation from the mean of the dataset
- results in equal class widths and varying amount of features per class
- as always, it is intended for use with normally distributed data
- creates classes with an interval size of 1 standard deviation (support for 1/2, 1/3 std. dev. coming soon)
- with this mode, option
classesis ignored - legend customization recommended (by making the unit of values clear, e.g. including unit "std. dev." in legend title, or by defining custom templates for legend rows to show unit)
Improvements, fixes
- fixed and cleaned up point/color mode symbol radius defaults
- updated documentation
- examples:
lines_w.html: uses new data of river discharge, improved mouse hover tooltips and added feature highlighting- updated dataset
rivers.geojson: contains river discharge (flow) data and river names now
- JavaScript
Published by balladaniel about 2 years ago
leaflet-dataclassification - v1.3.2
Improvements, fixes
- legend generation and placeholder parsing code: simplified and cleaned up both, with legend now making use of
flex-directionCSS property to reverse legend row order (no things are expected to have changed visually) - when given attribute field has not been found, the error message now lists all available attribute fields in GeoJSON
- removed unused example dataset "points.geojson"
- JavaScript
Published by balladaniel about 2 years ago
leaflet-dataclassification - v1.3.1
Improvements, fixes
- support for MultiPoint features (MultiLineString and MultiPolygon features were and are working as expected - report any issues you might encounter)
- reworked feature styling process as switch, added an error message if feature type is unknown
- JavaScript
Published by balladaniel about 2 years ago
leaflet-dataclassification - v1.3
New features
- Polygon hatch fill patterns are now available
- thanks to leaflet-hatchclass by @samanbey.
- has three modes: 'width', 'angle' and 'both'. 'Width' mode only alters the alternating stroke widths per class symbol, 'angle' mode only the alternating stroke angle per class symbol, and 'both' alters both properties to make class symbols distinct. Is engaged by
polygonMode= 'hatch', and is further customized bypolygonHatchobject properties:strokeColors: two colors of the alternating lines, as an array (example: ['darkred', 'none'])strokeWidth: object, with min and max properties, both with a number value, when distinctionMode: 'width' or both'. Defines hatch min/max widths to alternate between, for individual classes (example: {min: 2, max: 10}). Tip: set to -1 to have solid fills on two ends of the symbols' spectrum, only in distinctionMode: 'width' and 'both'distinctionMode: symbol distinction type between classes: 'angle'/'width'/'both'angle: initial angle of lines in patternalternateAngle: value to increment angle with between hatch fill symbols. Warns if chosen alternating angle may result in very similar of duplicate symbols.
- Note: a workaround was needed to apply hatch fill pattern to polygons due to Leaflet ignoring
classNamein layer.setStyle(). See https://github.com/leaflet/leaflet/issues/2662. Currently, the workaround is fine and is working as expected.
- legend symbols for hatch fill patterns are widened by default, and are now easily customizable in the CSS file ('.hatchPatch' class).
- new option
polygonMode: polygon mode now supports two modes: 'color' and 'hatch' (default: 'color') - new option
legendRowGap: legend symbology row gap in pixels. You can also alter this in the attached CSS file. (default: 3) - new styling option
style/radius: defines marker shape radius (size), use only in point/color mode (default: 8, max: 10-12)
Improvements, fixes
- due to a smaller redesign of the legend symbology, rows are now contained in a flexbox and now have a row-gap of 3px by default. This results in symbols in polygon modes getting separated from each other a bit. Can be overridden with option
legendRowGap, or by editing the main CSS file directly (class ".hatchPatch") - function _svgCreator(): removed hardcoded styling "margin-right: 10px", that's included in CSS now
- function stylePolygon() renamed to _stylePolygoncolor(), to accomodate the existence of stylePolygonhatch()
- legend reflects custom point symbol size (
style/radius) now - legend now supports
polygonMode - legend now constructs its contents individually and appends content with div.appendChild() to the main legend div
- added dependency: https://github.com/samanbey/leaflet-hatchclass, a copy is also included in ./lib/
- updated documentation and inline JSDoc
- updated main screenshots, added a new section and screenshot in documentation, showcasing hatch symbol distinction modes
- Examples:
- renamed example
polygons.htmltopolygons_c.html - new example
polygons_h.html: showcases the use of hatch fill patterns - new dataset
polygons_hatch_eu_lifeexp_2018.geojson: for use inpolygons_h.html - all: fixed inline comments
- combined: swapped default layer OSM with CARTO Voyager
- lines_c: swapped default layer OSM with CARTO Voyager, modified legend title
- lines_w: swapped default layer OSM with CARTO Positron, modified some options
- points_c: swapped default layer OSM with CARTO Voyager, modified legend title, added style/radius to showcase symbol size altering in point/color mode
- renamed example

- JavaScript
Published by balladaniel over 2 years ago
leaflet-dataclassification - v1.2.7
New option
style:fillOpacitynow works for polygons mode, like expected based on standard L.Path optionsfillOpacity(L.Path option, between 0 and 1) of polygons is now synced both to map features and legend to keep symbols true-to-map. Default is 0.7 in contrast to L.Path default of 0.2 (since we are creating a thematic map here and with polygons we currently only have fill color to operate with and distinguish, the color should be clearly distinguishable)- css:
ielements of classlegendno longer have opacity defined (to allow usage and to reflectfillOpacity, see previous point)
Improvements, fixes
- fixed sorting of manually defined class boundaries in manual classification mode
- updated documentation
- updates to examples:
- all: swapped the now-defunct URL of public Stamen Toner tiles with CARTO Dark, CARTO Voyager and CARTO Positron - great background maps for overlaid thematic data
- all: made layerControl uncollapsed by default
- lines_c dataset: compressed geojson even more to save space/bandwidth and make loading faster
- JavaScript
Published by balladaniel over 2 years ago
leaflet-dataclassification - v1.2.6
Improvements, fixes
- 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 class 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
- JavaScript
Published by balladaniel over 2 years ago
leaflet-dataclassification - v1.2.5
New features
- Manually defined class boundaries
mode: new "manual" mode. When using manual (which partially defeats the purpose of this plugin), option classes must be an array of class boundary values!classes: now accepts an array, if mode is manual, this must be an array of numbers (for example [50, 150, 200] would yield the following three classes: below 150, 150-200, above 200). Note: manual class boundary values are automatically sorted (low to high) in the process to avoid the mixing of symbols/class intervals
Improvements, fixes
- improved error messages
- further JSDoc
- updated documentation
- JavaScript
Published by balladaniel over 2 years ago
leaflet-dataclassification - v1.2.3
Improvements, fixes
- fixed a rounding issue regarding the upper interval boundary value of the lowest class, which came up when classRounding after classifying into a low number of target classes
- replaced all debug-related log messages with console.debug(), instead of the more intrusive overwriting of the global console.log function
From now on, if you encounter bugs, please include the verbose console output in your issue report (enable Verbose level/logging in your browser console to show debug messages)
- JavaScript
Published by balladaniel over 2 years ago
leaflet-dataclassification - v1.2.2
New features
- Legend: class feature counts
legendTemplate: new placeholder option{count}for including feature count in row of a given class interval. For example:
Legend row template example with {count} placeholder |
|
|---|---|
Highest: {low}+ [{count}] |
730000+ [2] |
Middle: {low} – {high} [{count}] |
350000 - 730000 [9] |
Middle: {low} – {high} [{count}] |
120000 - 350000 [16] |
Lowest: < {high} [{count}] |
< 120000 [23] |
Nodata: No data [{count}] |
No data [3] |
Improvements, fixes
- reworked the main
classesarray as an array of objects (boundary value is accessible throughclasses[n].value) - to aid feature counting, value evaluators now add up the number of found features for a given class, stored in the
classesarray (classes[n].featureCountproperty). Nodata/null features also get counted, stored in theclasses.nodataFeatureCountproperty - modified
classRounding,unitModifier,middlePointValue, classification and color-generation logic to support classes as objects, instead of a plain array of numbers - fixed the ignoring of nodata legend row template in some cases
- fixed some legend rows still not having css class
legendDataRow - css class
legendDataRow: added a right margin of 4px - updated examples (
combined.htmlandpoints_s.html: feature counts are included in legend template to showcase feature;polygons.html: minor tweak for legend title) - updated documentation
- updated main screenshot
- JavaScript
Published by balladaniel over 2 years ago
leaflet-dataclassification - v1.2
New features
Null/nodata feature handling logic
- new option
noDataColor: fill color to use for features with null/nodata attribute values. In polygon, point-color and line-color modes. (default: '#606060'). Also appears in legend as a separate class/category. Currently, null/nodata features are not assigned a distinctive symbol when in point-size and line-width modes. - new option
noDataIgnore: if true, features with null attribute values are not shown on the map. This also means the legend will not have a nodata classs (default: false) - new option
nodatainlegendTemplate: you can now customize the nodata text in Legend
- new option
Improvements
- modified classification code to filter out null attribute values when generating classes
- more thorough check for non-existing attribute field vs. null as attribute value (with more concise error messages)
- legend data rows (symbol + key) now have a css class (
legendDataRow), set in leaflet-dataclassification.css, resulting in a cleaner legend-generation code - updated documentation
- JavaScript
Published by balladaniel over 2 years ago