Skip to content

Instantly share code, notes, and snippets.

@darrenwiens

darrenwiens/index.html

Created April 29, 2024 23:55
Show Gist options
  • Save darrenwiens/017da2422c40c164aa8725edaeb65a7d to your computer and use it in GitHub Desktop.
Save darrenwiens/017da2422c40c164aa8725edaeb65a7d to your computer and use it in GitHub Desktop.
Download ZIP
High Res Canopy Height COG viewer
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>High Resolution Canopy Height</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'YOUR_MAPBOX_API_KEY';
const map = new mapboxgl.Map({
container: 'map',
zoom: 10,
center: [-124.1676228, 41.9611282],
style: 'mapbox://styles/mapbox/satellite-streets-v12',
projection: 'globe',
});
let titilerRoot = 'YOUR_TITILER_ROOT_URL'
let url = `${titilerRoot}/cog/tiles/WebMercatorQuad/{z}/{x}/{y}@1x?url=https%3A%2F%2Fdataforgood-fb-data.s3.amazonaws.com%2Fforests%2Fv1%2FCalifornia%2Falsgedi_ca_v6_float%2Fchm%2F02122333101.tif&expression=%2832768%2BB1%29%2F256%2C%2832768%2BB1%29%25256%2CB1%2A0&resampling_method=nearest&rescale=0%2C255&return_mask=true`
map.on('style.load', () => {
map.addSource("augmented-dem", {
type: "raster-dem",
tiles: [
url,
],
tileSize: 256,
minzoom: 5,
maxzoom: 22,
encoding: "terrarium",
scheme: "xyz",
});
map.setTerrain({ source: "augmented-dem", exaggeration: 0.001 });
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment