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 Cancel replyYour email address will not be published. Required fields are marked *Comment * Name * Email * Website Save my name, email, and website in this browser for the next time I comment. Δ