Home

JacksonThe Leaflet DVF is an extension to the Leaflet JavaScript mapping library. The primary goal of the framework is to simplify data visualization and thematic mapping. When building geospatial data visualizations, you're often faced with messy data or data that need to be further processed in order to turn them into something mappable and meaningful - it's not always rainbows and GeoJSON. This library is an attempt to take away some of the common frustrations and redundant code you find yourself writing, all the while standardizing the way you interact with data and increasing the number of tools and techniques at your disposal, so you can focus on making a whiz-bang visualization instead of just getting your data on a map.

It includes:

New marker types (see the markers example):

• MapMarker - create an SVG-based map marker similar to Leaflet's image-based marker, but fully customizable via L.Path style properties
• RegularPolygonMarker - create N-sided shapes like triangles, squares, hexagons, etc.
• StarMarker - create stars with N points
• ChartMarkers - useful for displaying multiple data properties at each location:
  • BarChartMarker
  • PieChartMarker
  • RadialBarChartMarker
  • CoxcombChartMarker
  • RadialMeterMarker
  • StackedRegularPolygonMarker - a variation on the bar chart
  • SparklineMarker - graph-based markers for illustrating time series and other x, y data in a geospatial context (Coming soon)

Functions for easily mapping data properties to Leaflet style values:

• LinearFunction
• Color functions:
  • HSLHueFunction - vary the output hue based on a data property
  • HSLSaturationFunction - vary the output saturation based on a data property
  • HSLLuminosityFunction - vary the output lightness/luminosity based on a data property
  • Various RGB functions
  • Built-in support for Colorbrewer color scales
• PiecewiseFunction - use multiple LinearFunction classes in sequence (e.g. vary a color from white to yellow, yellow to red)
• CustomColorFunction - specify the specific color scale to use. Use L.ColorBrewer to specify Colorbrewer scales.

New layer types that simplify reading and visualizing any JSON-based data structure:

• DataLayer
• ChartDataLayer and corresponding DataLayer instances for various chart types
• ChoroplethDataLayer
• Others

GeoJSON polygons for countries and US states to support Choropleth mapping. Countries are generated from: https://github.com/johan/world.geo.json. Just include these JavaScript files if you plan to build a country or US state choropleth. Polygons are indexed via a state or country code and lookups are created to map various state/country code formats to the default index format.

Automatic legend generation and a simple legend control. To generate a legend, just call getLegend on any DataLayer, or use the provided legend control and the legend will be displayed automatically.

Support for gradient fills and drop shadows, text on Path-based items (e.g. markers, polylines, polygons, etc.), animation and more.

Callouts for annotating map data. Use the L.Callout class to add individual callouts to your map. See the Markers example for an illustration of callouts.

Usage

Download the latest dev version here or include files available on CDN JS here

NOTE: The dist folder includes a minified version of the full framework as well as a minified version of the code required to use the new markers

Use leaflet-dvf.markers.min.js if you want to use the new markers without the rest of the framework