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
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""
/>
<script
src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""
></script>
<script type="text/javascript" src="https://unpkg.com/leaflet-contour"></script>
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].
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(
`<table><tbody><tr><td>${feature.value}°C</td></tr></tbody></table>`
);
};
}