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:

Leave a Reply

Your email address will not be published. Required fields are marked *