Color each polyline segment separately
This module only works with leaflet in canvas rendering mode. Be sure to add preferCanvas: true
to your map options.
$ npm install --save leaflet-polycolor
- Download or clone this github project
- Include
dist/polycolor.min.js
in your project
- Download or clone this github project
- Run
npm i
in the project folder - Run
npm run build
import L from 'leaflet';
import leafletPolycolor from 'leaflet-polycolor';
leafletPolycolor(L);
const map = L.map('map', {
center: [45.1834782, 5.7831946],
zoom: 13
});
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar'}).addTo(map);
const latLngs = [[45.187273, 5.758124], [45.182772, 5.758516], [45.185767, 5.747106], [45.176569, 5.752082], [45.171863, 5.757120], [45.168354, 5.755178]];
const colors = ['rgb(20, 200, 100)', 'rgb(200, 100, 20)', null, null, 'rgb(20, 200, 100)', 'rgb(0, 0, 0)'];
const polyline = L.polycolor(latLngs, {
colors: colors,
useGradient: true,
weight: 5
}).addTo(map);
<script src="leaflet-polycolor.min.js"></script>
var leafletPolycolor = require('leaflet-polycolor');
leafletPolycolor.default(L);
var map = L.map('map', {
center: [45.1834782, 5.7831946],
zoom: 13,
preferCanvas: true,
});
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar'}).addTo(map);
var latLngs = [[45.187273, 5.758124], [45.182772, 5.758516], [45.185767, 5.747106], [45.176569, 5.752082], [45.171863, 5.757120], [45.168354, 5.755178]];
var colors = ['rgb(20, 200, 100)', 'rgb(200, 100, 20)', null, null, 'rgb(20, 200, 100)', 'rgb(0, 0, 0)'];
var polyline = L.polycolor(latLngs, {
colors: colors,
useGradient: true,
weight: 5
}).addTo(map);
- colors
<Array>
: An array of rgb colors stringsrgb(x,y,z)
- useGradient
<Boolean>
: Use or not gradient to smooth colors. Defaults totrue
If colors
are undefined
, the default color
parameter is used.
To leave default color, use null
in colors. ['rgb(0, 0, 0)', null, 'rgb(0, 45, 120)']
- Add
:use-global-leaflet="false"
to yourl-map
tag - Import separately leaflet with
import * as L from 'leaflet/dist/leaflet-src.esm';
MIT © Olivier Gasc