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: