Need help with Leaflet.hotline?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

iosphere
146 Stars 37 Forks Other 25 Commits 12 Opened issues

Description

A Leaflet plugin for drawing colored gradients along polylines.

Services available

!
?

Need anything else?

Contributors list

# 288,694
HTML
CSS
1 commit

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.