leaflet-geotiff/demo.html

A LeafletJS plugin for displaying geoTIFF raster data.

<link rel="stylesheet" href="leaflet.css"/>
   
<script src="leaflet.js"></script>
<script src="https://stuartmatthews.github.io/leaflet-geotiff/vendor/geotiff.js"></script>
<script src="https://stuartmatthews.github.io/leaflet-geotiff/vendor/plotty.js"></script>

<script src="leaflet-geotiff.js"></script>
<script src="leaflet-geotiff-plotty.js"></script>
<script src="leaflet-geotiff-vector-arrows.js"></script>

<div >
    <div style="width:30%;float:left;">
        <h1>Leaflet geoTIFF demo</h1>
        
    </div>
    <div id="mapid" style="width:70%; height:100%;float:left;"></div>   
</div>

<script>
	
    var mymap = L.map('mapid').setView([-33, 147], 6);

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
			'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="http://mapbox.com">Mapbox</a>',
		id: 'mapbox.streets'
	}).addTo(mymap);

    var windSpeed = L.leafletGeotiff(
            'https://stuartmatthews.github.io/leaflet-geotiff/tif/wind_speed.tif',
            {
				band: 0,
                name: 'Wind speed',
                renderer: L.LeafletGeotiff.plotty({
					displayMin: 0,
					displayMax: 30,
					colorScale: 'rainbow',
					clampLow: false,
					clampHigh: true,
				})
            }
        ).addTo(mymap);
        
    var windDirection = L.leafletGeotiff(
            'https://stuartmatthews.github.io/leaflet-geotiff/tif/wind_direction.tif',
            {
				band: 0,
                name: 'Wind direction',
				opacity: 0.5,
                renderer: L.LeafletGeotiff.vectorArrows({
					arrowSize: 20
				})
            }
        ).addTo(mymap);
   
</script>