Leaflet.hotline

by iosphere

A Leaflet plugin for drawing colored gradients along polylines.

138 Stars 35 Forks Last release: Not found Other 25 Commits 4 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Leaflet.hotline

A Leaflet plugin for drawing colored gradients along polylines. This is useful for visualising values along a course, for example: elevation, velocity, or heart rate. Inspired by Leaflet.heat.

Requirements

Leaflet.hotline works with Leaflet 1.0.3, which is available through NPM, Bower, and GitHub download. Leaflet.hotline needs a browser with canvas support because it creates its own renderer that draws on a canvas element.

Installation

  • Run
    npm install leaflet-hotline
  • or download the latest package

Demo

https://iosphere.github.io/Leaflet.hotline/demo/

Basic usage

Node.js / Browserify

// Include Leaflet
var L = require('leaflet')

// Pass Leaflet to the plugin. // Only required to overload once, subsequent overloads will return the same instance. require('leaflet-hotline')(L);

// Create a hotline layer var hotlineLayer = L.hotline(data, options).addTo(map);

Browser



Documentation

L.Hotline
extends
L.Polyline
. You can use all its methods and most of its options, except the ones for styling.
// Create a hotline layer via the factory...
var hotlineLayer = L.hotline(data, options).addTo(map);

// ... or via the constructor var hotlineLayer = new L.Hotline(data, options).addTo(map);

data

The

data
parameter needs to be an array of
LatLng
points (a polyline) with an additional third element (z value) in each point; this determines which color from the
palette
to use. Multiple polylines are supported.

options

You can use the following options to style the hotline:

  • weight - Same as usual.
    5
    per default.
  • outlineWidth - The width of the outline along the stroke in pixels. Can be
    0
    .
    1
    per default.
  • outlineColor - The color of the outline.
    'black'
    per default.
  • palette - The config for the palette gradient in the form of
    { : '' }
    .
    { 0.0: 'green', 0.5: 'yellow', 1.0: 'red' }
    per default. Stop values should be between
    0
    and
    1
    .
  • min - The smallest z value expected in the
    data
    array. This maps to the
    0
    stop value. Any z values smaller than this will be considered as
    min
    when choosing the color to use.
  • max - The largest z value expected in the
    data
    array. This maps to the
    1
    stop value. Any z values greater than this will be considered as
    max
    when choosing the color to use.

Building

npm install && npm run build

Changelog

  • 0.4.0 - Adds compatibility for Leaflet >1.0.2
  • 0.3.0 - Adds compatibility for Leaflet 1.0.0-rc.1
  • 0.2.0 - Adds
    getRGBForValue
    method to the hotline layer
  • 0.1.1 - Uses Leaflet 1.0 beta in demo and README
  • 0.1.0 - Initial public release

Credits

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.