Leaflet-raw-DEM

A first attempt at reading and visualizing raw elevation data with Leaflet using Canvas.

Supports reading zipped DEM (Digital Elevation Model) files in the ESRI BIL (Band interleaved by line) raster format (single band only), e.g. as provided by USGS EarthExplorer for SRTM 1 Arc-Second Global.

Renders the data as raster grid, similar (yet very basic) to what desktop GIS like QGIS and uDig do, but in the Browser. With elevation labels on high zooms.

File viewer:

• index.html
  • Open local zipped BIL files (*_bil.zip) using the file dialog or drag&drop
  • append ?url= parameter to zipped BIL file, e.g.
    http://nrenner.github.io/leaflet-raw-dem/?url=http://norbertrenner.de/dem/cgiar-csi-4.1/srtm_40_04_bil.zip#zoom=17&lat=44.447457&lon=15.18232

Examples:

• example/mallorca.html - detail (building)
  Two SRTM 1-arc v3 files (1.9 MB and 2.5 MB) as example, loading may takes a few seconds
• example/clip.html
  Minimal example using a 6*3 grid sample file, no extra dependencies, for development

Status

A work in progress on hold, known issues, needs validation and testing. Provided as is, not sure if continued or maintained (low priority).

See also for alternatives.

Limitations

• only single band BIL files supported
• assuming 16-bit signed integers and Little-endian (Intel) byte-order
• Spherical Mercator (EPSG 3857) only (?)
• only linear color scale supported right now
• ...

Known issues

• border artefacts
• viewport not always fully covered at last row/column
• ...

Usage

Convert other formats to BIL using gdal_translate with the GDAL EHdr format, e.g.:

mkdir tmp
gdal_translate -of EHdr srtm_37_05/srtm_37_05.tif tmp/srtm_37_05.bil
zip -j srtm_37_05_bil.zip tmp/*
rm -r tmp

Build

Requires Node and npm (or io.js), Bower and Gulp:

npm install -g bower
npm install -g gulp

Install:

npm install
bower install

Build:

gulp

Develop:

gulp watch

To-do

• hgt format (basically the same with the header derived from the file name)
• Web Worker
• autoScale/stats across multiple layers
• ...

See also

• Leaflet.TileLayer.GL - Iván Sánchez Ortega: Apply WebGL shaders to your LeafletJS tile layers
• stuartmatthews/leaflet-geotiff: Leaflet plugin for displaying geoTIFF raster data
• IHCantabria/Leaflet.CanvasLayer.Field: Load and style Raster files in Leaflet (geotiff & asciigrid)
• tangrams/heightmapper: interactive heightmaps from terrain data
  • What a Relief: Global Test Pilots Wanted · Mapzen
• Weather-gridGL: Examples of how to convert gridded data into LeafletJS WebGL overlays
• GeoTIFF/georaster-layer-for-leaflet: Display GeoTIFFs and soon other types of raster on your Leaflet Map
• geotiffjs/geotiff.js: a small library to parse TIFF files for visualization or analysis
• xlhomme/GeotiffParser.js

OpenLayers

• OpenLayers Shaded Relief example
• maptilerlabs/terrain-demos: Demonstration of terrain RGB tiles (OL & Mapbox GL JS)
• Visualizing GeoTIFF Tiles with OpenLayers – EOX
• buddebej/ol3-dem - WebGL, eu-dem, png data tiles
  elasticterrain - SRTM 1-arc + additional, png data tiles

More

• Realistic terrain with custom styling: Mapbox GL JS hillshade layer from Terrain-RGB tiles
  • enable hypsometric tinting from raster-dem sources · Issue #6245 · mapbox/mapbox-gl-js
  • Dynamic hill shading in the browser (old demo)
• Terrain building with three.js
• WCS i threejs - WCS, tiff-js, three.js (FOSS4G 2014 talk)
• Turfjs/turf-isobands
• Animated heatmaps and grids with Turf

License

Copyright (c) 2015 Norbert Renner, licensed under the MIT License (MIT)