Package Exports

leaflet-hotline

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (leaflet-hotline) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 only works with Leaflet 1.0.0-rc.1, 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.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