leaflet-canvaslayer-field
Version:
A set of layers using canvas to draw ASCIIGrid or GeoTIFF files. This includes a basic raster layer (*ScalaField*) and an animated layer for vector fields, such as wind or currents (*VectorFieldAnim*)
85 lines (73 loc) • 3.25 kB
HTML
<html>
<head>
<title>ScalarField / inFilter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="//unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
<link rel="stylesheet" href="examples.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400" rel="stylesheet">
</head>
<body>
<h1 class="title mapTitle">ScalarField Filter</h1>
<div id="map"></div>
<div id="floating-panel">
<ul>
<li>
<label>Height</label>
<input id="height" type="range" min="1" max="20" step="1" value="20" class="verticalRange">
<span id="meters" style="display:block;">slide me!</span>
</li>
</ul>
</div>
<!-- CDN -->
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="//npmcdn.com/leaflet@1.2.0/dist/leaflet.js"></script>
<script src="//npmcdn.com/geotiff@0.3.6/dist/geotiff.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.0/chroma.min.js"></script>
<!-- Plugin -->
<script src="dist/leaflet.canvaslayer.field.js"></script>
<script>
let map = L.map('map');
/* PNOA Orthophoto */
var Spain_PNOA_Ortoimagen = L.tileLayer.wms('https://www.ign.es/wms-inspire/pnoa-ma', {
layers: 'OI.OrthoimageCoverage',
format: 'image/png',
transparent: false,
continuousWorld: true,
attribution: 'PNOA cedido por © <a href="https://www.ign.es/ign/main/index.do" target="_blank">Instituto Geográfico Nacional de España</a>'
});
Spain_PNOA_Ortoimagen.addTo(map).setOpacity(0.6);
/* DEM data from LIDAR - PNOA */
d3.request("data/castro_dem.tiff").responseType('arraybuffer').get(
function (error, tiffData) {
let dem = L.ScalarField.fromGeoTIFF(tiffData.response);
let layerDem = L.canvasLayer.scalarField(dem, {
color: chroma.scale('Spectral').domain([80, 0])
}).addTo(map);
map.fitBounds(layerDem.getBounds());
/* dynamic filtering */
let height = document.getElementById('height');
height.addEventListener('change', function () {
layerDem.setColor('blue');
let h = height.value;
let f = function (v) {
return v >= 0 && v <= h;
};
layerDem.setFilter(f);
document.getElementById('meters').innerHTML = '< ' + h + ' m'
});
/* popup */
layerDem.on('click', function (e) {
if (e.value !== null) {
let v = e.value.toFixed(1);
let html = (`<span class="popupText">${v} meters</span>`);
let popup = L.popup()
.setLatLng(e.latlng)
.setContent(html)
.openOn(map);
}
});
});
</script>
</body>
</html>