How to Add LIDAR Hillshade to Your LeafletJS Map
How to Add LIDAR Hillshade to Your LeafletJS Maps
Using the 3DEP Hillshade and some CSS3, it’s quite easy to add beautiful, LIDAR-generated hillshade to LeafletJS Maps.
A few things to note …
- This is not mobile friendly, as it uses a lot of CPU for the mix-blend-mode, so you may want to disable for mobile browsers
- Areas without hillshade (e.g. the ocean) are shown as black, so you won’t want to use this for large scale maps
Here is a simple example of how to do this with NY Aerial Orthophotography:
<html>
<head>
<title>Example</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px;
}
.lidarBase {
filter: brightness(140%) contrast(100%) !important;
// this filter raises brightness and contrast for better appearance
}
.baseLayer {
mix-blend-mode: multiply !important;
// usually a nice way to blend the hillshade with the overlay
}
.nyAerial {
filter: saturate(150%) contrast(110%) brightness(130%);
// enhance colors a bit
}
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
</head>
<body>
<div id="map-canvas"></div>
<script>
var nyAerial = L.tileLayer.wms(
'https://orthos.its.ny.gov/ArcGIS/services/wms/Latest/MapServer/WMSServer?',
{ layers: '0,1,2,3,4,5',
attribution: 'NYS High-Resolution Color Aerial (Winter 2015-2020) - <a href="https://gis.ny.gov/">NYS Geographic Information Services</a>',
className: 'nyAerial',
maxZoom: 21 });
var lidarBase = L.tileLayer.wms(
'https://elevation.nationalmap.gov/arcgis/services/3DEPElevation/ImageServer/WMSServer?',
{
layers: '3DEPElevation:Hillshade Gray',
className: 'lidarBase',
}
);
var map = L.map('map-canvas', {
center: [42.37348470, -76.88088670],
zoom: 17,
layers: [lidarBase,nyAerial]
});
</script>
</body>
</html>
Here is the produced map with this code: