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

<!-- Include Leaflet -->
<script src="path/to/leaflet.js"></script>
<!-- Include Leaflet.hotline -->
<script src="path/to/leaflet.hotline.js"></script>
<script>
    // Create a hotline layer
    var hotlineLayer = L.hotline(data, options).addTo(map);
</script> 

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 { <stop>: '<color>' }. { 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

• @mourner for Leaflet and Leaflet.heat
• @orrc for the name