JSPM

leaflet-hotline

0.4.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1018
  • Score
    100M100P100Q107649F
  • License BSD-2-Clause

A Leaflet plugin for drawing colored gradients along a polyline

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 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