A Leaflet plugin for drawing colored gradients along a polyline
npm install leaflet-hotlineA 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.
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.
* Run npm install leaflet-hotline
* or download the latest package
``js
// 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);
`
`html`
L.Hotline extends L.Polyline. You can use all its methods and most of its options, except the ones for styling.
`js
// 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);
`
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.
You can use the following options to style the hotline:
- weight - Same as usual. 5 per default.0
- outlineWidth - The width of the outline along the stroke in pixels. Can be . 1 per default.'black'
- outlineColor - The color of the outline. 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.data
- min - The smallest z value expected in the 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.data
- max - The largest z value expected in the 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.
npm install && npm run build
- 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
* @mourner for Leaflet and Leaflet.heat
* @orrc for the name