A customisable Leaflet contour plugin. Uses d3-contour under the hood.
npm install leaflet-contour
A customisable Leaflet contour plugin. Uses d3-contour under the hood.
Grid of simulated water temperature values on Lake Geneva from the Meteolakes project, plotted as filled contours.
Check out the examples:
``
import L from "leaflet";
import 'leaflet-contour';
or
`
href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""
/>
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""
>
then
`
var map = L.map("map");
L.contour(data, {
thresholds: 50
}).addTo(map);
Data must be an object {x: [[]], y:[[]], z:[[]]} where x, y, z are 2D arrays of equivalent shape.
x: Longitude
y: Latitude
z: Parameter to display
Number of contours to draw
Contours are produced as geojson, so the same techniques to control geojson plotting can be used to style the contours [[link]](https://leafletjs.com/examples/geojson/).
For example filled contours, coloured based on contour value. Here "getColor" is a function that accepts a value, min, max and a color range and returns a color on that range. An example of the function is available in the examples.
`
L.contour(data, {
thresholds: 50,
style: (feature) => {
return {
color: getColor(feature.geometry.value, 10.5, 13.6, colors),
opacity: 0,
fillOpacity: 1,
};
},
}).addTo(map);
This shows how to add an onclick popup that gives the value of the contour.
`
L.contour(data, {
thresholds: 50,
onEachFeature: onEachContour(),
}).addTo(map);
function onEachContour() {
return function onEachFeature(feature, layer) {
layer.bindPopup(
| ${feature.value}°C |
);
};
}