Recent Releases of leaflet-dataclassification

leaflet-dataclassification - v1.6.1

New example: polygons_c2.html

Improvements, fixes

  • rework of SVG point symbols:
    • creates a proper SVG element and sets its attributes
    • canvas size of point symbols (width/height of <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 pointShape had no effect when styling MultiPoint features
  • processing time is now measured, optionally
    • set showTimeBreakdown: true in 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
  • updated readme to indicate feature count for example/demo pages
  • examples:
    • new example: polygons_c2.html with 3220 polygons (us_pres_elections_2020_turnout_bycounty.geojson)
    • added direct links to other demos/examples in info panel

- JavaScript
Published by balladaniel about 2 years ago

leaflet-dataclassification - v1.6

Logarithmic scale example Legend footer example

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 classRounding of 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 - .legendFooter class)
    • 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 legendTitle intended to be hidden, avoiding styling issues. This applies to the just-introduced legendFooter as 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 feature
    • points_s.html: classRounding from -2 to -3

- JavaScript
Published by balladaniel about 2 years ago

leaflet-dataclassification - v1.5

Normalization on the polygons_c example

New features

  • Data normalization (option normalizeByField)
    • data normalization by another attribute field in GeoJSON, to normalize values of chosen field by
    • useful for any dataset that is usually shown in a normalized form, e.g. a population density map
    • normalizeByField expects a string of an attribute field that exists in GeoJSON, in a similar fashion to field

Improvements, fixes

  • values are now processed and loaded into an object (features), with all their attributes for later use
  • features.finalvalue now 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 fields population2022 as base and areakm2 as normalization attribute
    • combined.html: line features show river discharge for Yukon and its tributaries now, their tooltips display m³/s and cuft/s values, added feature section highlighting
    • rivers_yukon.geojson dataset: now contains river discharge for Yukon and its tributaries

- JavaScript
Published by balladaniel about 2 years ago

leaflet-dataclassification - v1.4

Standard deviation example

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 classes is 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-direction CSS 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 by polygonHatch object 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 pattern
      • alternateAngle: 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 className in 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.html to polygons_c.html
    • new example polygons_h.html: showcases the use of hatch fill patterns
    • new dataset polygons_hatch_eu_lifeexp_2018.geojson: for use in polygons_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

Screenshot of different hatch fill pattern modes (distinctionMode option). Samples.

- JavaScript
Published by balladaniel over 2 years ago

leaflet-dataclassification - v1.2.7

New option

  • style: fillOpacity now works for polygons mode, like expected based on standard L.Path options
    • fillOpacity (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: i elements of class legend no longer have opacity defined (to allow usage and to reflect fillOpacity, 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 classes array as an array of objects (boundary value is accessible through classes[n].value)
  • to aid feature counting, value evaluators now add up the number of found features for a given class, stored in the classes array (classes[n].featureCount property). Nodata/null features also get counted, stored in the classes.nodataFeatureCount property
  • 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.html and points_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 nodata in legendTemplate: you can now customize the nodata text in Legend

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