Home

Awesome

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

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:

Building

npm install && npm run build

Changelog

Credits