Skip to content

Releases: balladaniel/leaflet-dataclassification

v1.6.1

06 Feb 18:05
a4e8d0d
Compare
Choose a tag to compare

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 (before: see example points_s.html up to commit 6269669, hover over points to open tooltip, observe symbol/tooltip center misalignment)
  • fix: option pointShape had no effect when styling MultiPoint features
  • per-layer processing time is now measured, optionally
    • set showTimeBreakdown: true in leaflet-dataclassification.js to see results in console
    • specific steps are detailed for the 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

v1.6

30 Dec 13:34
Compare
Choose a tag to compare

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 9b5bd93)
  • 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

v1.5

22 Dec 21:08
8efdb27
Compare
Choose a tag to compare

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

v1.4

10 Dec 22:30
Compare
Choose a tag to compare

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

v1.3.2

30 Nov 15:42
Compare
Choose a tag to compare

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"

v1.3.1

23 Nov 19:46
Compare
Choose a tag to compare

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

v1.3

17 Nov 13:38
Compare
Choose a tag to compare

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 Leaflet/Leaflet#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 _stylePolygon_color(), to accomodate the existence of _stylePolygon_hatch()
  • 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.

v1.2.7

03 Nov 20:11
Compare
Choose a tag to compare

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

v1.2.6

01 Nov 11:51
Compare
Choose a tag to compare

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

v1.2.5

15 Oct 13:26
Compare
Choose a tag to compare

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