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.
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.
npm install leaflet-hotlinehttps://iosphere.github.io/Leaflet.hotline/demo/
// 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);
<!-- 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>
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);
dataThe 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.
optionsYou can use the following options to style the hotline:
5 per default.0. 1 per default.'black' per default.{ <stop>: '<color>' }. { 0.0: 'green', 0.5: 'yellow', 1.0: 'red' } per default. Stop values should be between 0 and 1.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.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.npm install && npm run build
getRGBForValue method to the hotline layer