├── .gitignore
├── demo
├── img
│ └── hotline.png
├── index.html
└── js
│ └── coords.js
├── .eslintrc
├── package.json
├── LICENSE
├── README.md
├── dist
├── leaflet.hotline.min.js
└── leaflet.hotline.js
└── src
└── leaflet.hotline.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 |
--------------------------------------------------------------------------------
/demo/img/hotline.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iosphere/Leaflet.hotline/HEAD/demo/img/hotline.png
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "rules": {
3 | "camelcase": 2,
4 | "quotes": [2, "single", "avoid-escape"],
5 | "no-mixed-spaces-and-tabs": [2, "smart-tabs"],
6 | "space-after-function-name": 2,
7 | "space-in-parens": 2,
8 | "space-in-brackets": 2,
9 | "space-before-blocks": 2,
10 | "space-after-keywords": 2,
11 | "no-lonely-if": 2,
12 | "comma-style": 2,
13 | "no-underscore-dangle": 0,
14 | "no-constant-condition": 0,
15 | "no-multi-spaces": 0,
16 | "strict": 0,
17 | "key-spacing": 0,
18 | "no-shadow": 0
19 | },
20 | "globals": {
21 | "L": false,
22 | "require": false,
23 | "module": false,
24 | "define": false
25 | },
26 | "env": {
27 | "browser": true
28 | }
29 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "leaflet-hotline",
3 | "version": "0.4.0",
4 | "description": "A Leaflet plugin for drawing colored gradients along a polyline",
5 | "main": "src/leaflet.hotline.js",
6 | "scripts": {
7 | "test": "npm run lint",
8 | "lint": "eslint src/leaflet.hotline.js",
9 | "clean": "rm -rf dist",
10 | "beautify": "uglifyjs src/leaflet.hotline.js -b --comments /iosphere/ > dist/leaflet.hotline.js",
11 | "minify": "uglifyjs src/leaflet.hotline.js -c -m --comments /iosphere/ > dist/leaflet.hotline.min.js",
12 | "prebuild": "npm run clean && mkdir -p dist",
13 | "build": "npm run test && npm run beautify && npm run minify"
14 | },
15 | "repository": {
16 | "type": "git",
17 | "url": "git://github.com/iosphere/Leaflet.hotline.git"
18 | },
19 | "keywords": [
20 | "Leaflet",
21 | "plugin",
22 | "canvas",
23 | "visualization",
24 | "path",
25 | "gradient",
26 | "heatmap",
27 | "color",
28 | "colour"
29 | ],
30 | "author": "Jonas Coch",
31 | "license": "BSD-2-Clause",
32 | "bugs": {
33 | "url": "https://github.com/iosphere/Leaflet.hotline/issues"
34 | },
35 | "homepage": "https://iosphere.github.io/Leaflet.hotline/demo/",
36 | "devDependencies": {
37 | "eslint": "^0.23.0",
38 | "uglify-js": "^2.4.23"
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2015, iosphere GmbH, Jonas Coch
2 | All rights reserved.
3 |
4 | Redistribution and use in source and binary forms, with or without
5 | modification, are permitted provided that the following conditions are met:
6 | * Redistributions of source code must retain the above copyright
7 | notice, this list of conditions and the following disclaimer.
8 | * Redistributions in binary form must reproduce the above copyright
9 | notice, this list of conditions and the following disclaimer in the
10 | documentation and/or other materials provided with the distribution.
11 | * The name of IOSPHERE GMBH may not be used to endorse
12 | or promote products derived from this software without specific
13 | prior written permission.
14 |
15 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
16 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
17 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
18 | DISCLAIMED. IN NO EVENT SHALL IOSPHERE GMBH BE LIABLE FOR ANY
19 | DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
20 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
21 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
22 | ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
23 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
24 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Leaflet.hotline
2 |
3 | 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.
4 | Inspired by [Leaflet.heat](https://github.com/Leaflet/Leaflet.heat/).
5 |
6 |
7 | ## Requirements
8 |
9 | Leaflet.hotline works with **Leaflet 1.0.3**, which is available through NPM, Bower, and [GitHub download](http://cdn.leafletjs.com/leaflet/v1.0.3/leaflet.zip).
10 | Leaflet.hotline needs a browser with canvas support because it creates its own renderer that draws on a canvas element.
11 |
12 |
13 | ## Installation
14 |
15 | * Run `npm install leaflet-hotline`
16 | * or download the latest package
17 |
18 |
19 | ## Demo
20 |
21 |
22 |
23 |
24 | ## Basic usage
25 |
26 | ### Node.js / Browserify
27 |
28 | ```js
29 | // Include Leaflet
30 | var L = require('leaflet')
31 |
32 | // Pass Leaflet to the plugin.
33 | // Only required to overload once, subsequent overloads will return the same instance.
34 | require('leaflet-hotline')(L);
35 |
36 | // Create a hotline layer
37 | var hotlineLayer = L.hotline(data, options).addTo(map);
38 | ```
39 |
40 | ### Browser
41 |
42 | ```html
43 |
44 |
45 |
46 |
47 |
51 | ```
52 |
53 |
54 | ## Documentation
55 |
56 | `L.Hotline` extends [`L.Polyline`](http://leafletjs.com/reference.html#polyline). You can use all its methods and most of its options, except the ones for styling.
57 |
58 | ```js
59 | // Create a hotline layer via the factory...
60 | var hotlineLayer = L.hotline(data, options).addTo(map);
61 |
62 | // ... or via the constructor
63 | var hotlineLayer = new L.Hotline(data, options).addTo(map);
64 | ```
65 |
66 | ### `data`
67 |
68 | 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.
69 |
70 | ### `options`
71 |
72 | You can use the following options to style the hotline:
73 |
74 | - **weight** - Same as usual. `5` per default.
75 | - **outlineWidth** - The width of the outline along the stroke in pixels. Can be `0`. `1` per default.
76 | - **outlineColor** - The color of the outline. `'black'` per default.
77 | - **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`.
78 | - **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.
79 | - **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.
80 |
81 |
82 | ## Building
83 |
84 | `npm install && npm run build`
85 |
86 |
87 | ## Changelog
88 |
89 | - **0.4.0** - Adds compatibility for Leaflet >1.0.2
90 | - **0.3.0** - Adds compatibility for Leaflet 1.0.0-rc.1
91 | - **0.2.0** - Adds `getRGBForValue` method to the hotline layer
92 | - **0.1.1** - Uses Leaflet 1.0 beta in demo and README
93 | - **0.1.0** - Initial public release
94 |
95 |
96 | ## Credits
97 |
98 | * [@mourner](https://github.com/mourner) for [Leaflet](https://github.com/Leaflet/Leaflet/) and [Leaflet.heat](https://github.com/Leaflet/Leaflet.heat/)
99 | * [@orrc](https://github.com/orrc) for the name
--------------------------------------------------------------------------------
/dist/leaflet.hotline.min.js:
--------------------------------------------------------------------------------
1 | /*
2 | (c) 2017, iosphere GmbH
3 | Leaflet.hotline, a Leaflet plugin for drawing gradients along polylines.
4 | https://github.com/iosphere/Leaflet.hotline/
5 | */
6 | !function(t,i){"function"==typeof define&&define.amd?define(["leaflet"],i):"object"==typeof exports?module.exports=i:i(t.L)}(this,function(t){if(t.Hotline)return t;var i=function(t){if(!(this instanceof i))return new i(t);var e={0:"green",.5:"yellow",1:"red"};this._canvas=t="string"==typeof t?document.getElementById(t):t,this._ctx=t.getContext("2d"),this._width=t.width,this._height=t.height,this._weight=5,this._outlineWidth=1,this._outlineColor="black",this._min=0,this._max=1,this._data=[],this.palette(e)};i.prototype={width:function(t){return this._width=t,this},height:function(t){return this._height=t,this},weight:function(t){return this._weight=t,this},outlineWidth:function(t){return this._outlineWidth=t,this},outlineColor:function(t){return this._outlineColor=t,this},palette:function(t){var i=document.createElement("canvas"),e=i.getContext("2d"),n=e.createLinearGradient(0,0,0,256);i.width=1,i.height=256;for(var o in t)n.addColorStop(o,t[o]);return e.fillStyle=n,e.fillRect(0,0,1,256),this._palette=e.getImageData(0,0,1,256).data,this},min:function(t){return this._min=t,this},max:function(t){return this._max=t,this},data:function(t){return this._data=t,this},add:function(t){return this._data.push(t),this},draw:function(){var t=this._ctx;return t.globalCompositeOperation="source-over",t.lineCap="round",this._drawOutline(t),this._drawHotline(t),this},getRGBForValue:function(t){var i=Math.min(Math.max((t-this._min)/(this._max-this._min),0),.999),e=4*Math.floor(256*i);return[this._palette[e],this._palette[e+1],this._palette[e+2]]},_drawOutline:function(t){var i,e,n,o,h,r,s;if(this._outlineWidth)for(i=0,n=this._data.length;i
2 |
3 |
4 |
5 |
6 |
7 |
8 |
42 |
43 |
44 |
45 |