Skip to content

Instantly share code, notes, and snippets.

@vincentsarago

vincentsarago/index.html

Created December 3, 2019 23:39
Show Gist options
  • Save vincentsarago/e3354d17f0fda93937f15aa6481ff01a to your computer and use it in GitHub Desktop.
Save vincentsarago/e3354d17f0fda93937f15aa6481ff01a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
"""<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>ABoVE: Landsat-derived Annual Dominant Land Cover Across ABoVE Core Domain, 1984-2014</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.2/mapbox-gl.js'></script>
<link rel='stylesheet' href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.2/mapbox-gl.css' type='text/css' />
<link href='https://api.mapbox.com/mapbox-assembly/v0.23.2/assembly.min.css' rel='stylesheet'>
<script src='https://api.mapbox.com/mapbox-assembly/v0.23.2/assembly.js'></script>
<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
<style>
body { margin:0; padding:0; width:100%; height:100%; }
#map { position:absolute; top:0; bottom:0; width:100%; }
.zoom-info {
z-index: 10;
position: absolute;
bottom: 17px;
right: 0;
padding: 5px;
width: auto;
height: auto;
font-size: 12px;
color: #000;
}
.loading-map {
position: absolute;
width: 100%;
height: 100%;
color: #FFF;
background-color: #000;
text-align: center;
opacity: 0.5;
font-size: 45px;
}
.loading-map.off{
opacity: 0;
-o-transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all ease .5s;
visibility:hidden;
}
.middle-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.middle-center * {
display: block;
padding: 5px;
}
</style>
</head>
<body>
<div id='map'>
<div id='loader' class="loading-map z3">
<div class="middle-center">
<div class="round animation-spin animation--infinite animation--speed-1">
<svg class='icon icon--l inline-block'><use xlink:href='#icon-satellite'/></svg>
</div>
</div>
</div>
<div class="zoom-info"><span id="zoom"></span></div>
<div id='menu' class='absolute top left px12 py12 bg-white z1 w240-mm w180'>
<section id='info' class="px6 py6">
<div class='txt-h6 mb6 color-black'>Standard Deviation</div>
<div class='txt-h5 mb6 color-black'>Info</div>
<div class="txt-xs">
Landsat-derived Annual Dominant Land Cover Across ABoVE Core Domain, 1984-2014.
</div>
<a href="https://daac.ornl.gov/ABOVE/guides/Annual_Landcover_ABoVE.html">Link</a>
<ul class="py6">
<li>- Zoom > 7 to see the data</li>
<li>- Click on the map to see point value</li>
</ul>
</section>
<section class="px6 py6">
<div class='txt-h5 mb6 color-black'>Legend</div>
<img src="https://user-images.githubusercontent.com/10407788/70099050-c6880900-15fb-11ea-924a-5707c0d45588.png">
</section>
</div>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoidmluY2VudHNhcmFnbyIsImEiOiJjamxwa3JkaWkwZ3BjM3dudmZmazQwYjI2In0.eUzks_hqH-QVIlnXUKmKsA'
const endpoint = 'https://hm6ngralof.execute-api.us-east-1.amazonaws.com/production'
const mosaicid = '35d6f3c010787307729747e22819a2c8caf10908d63ec22568c5e35b'
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/basic-v9',
center: [0, 0],
zoom: 1
})
map.on('zoom', function (e) {
const z = (map.getZoom()).toString().slice(0, 6)
document.getElementById('zoom').textContent = z
})
const addAOI = (bounds) => {
const geojson = {
"type": "FeatureCollection",
"features": [turf.bboxPolygon(bounds)]
}
map.addSource('aoi', {
'type': 'geojson',
'data': geojson
})
map.addLayer({
id: 'aoi-polygon',
type: 'line',
source: 'aoi',
layout: {
'line-cap': 'round',
'line-join': 'round'
},
paint: {
'line-color': '#3bb2d0',
'line-width': 2
}
})
return
}
map.on('load', () => {
return fetch(`${endpoint}/tiles/${mosaicid}/tilejson.json`)
.then(res => {
if (res.ok) return res.json()
throw new Error('Network response was not ok.')
})
.then(data => {
map.addSource('raster', {
type: 'raster',
url: `${endpoint}/tiles/${mosaicid}/tilejson.json?color_map=viridis&pixel_selection=bdix_stdev&rescale=0,5`
})
map.addLayer({
id: 'raster',
type: 'raster',
source: 'raster'
})
document.getElementById('loader').classList.toggle('off')
const bounds = data.bounds
addAOI(bounds)
map.fitBounds([[bounds[0], bounds[1]], [bounds[2], bounds[3]]])
})
.catch(err => {
console.warn(err)
})
})
const layers = [
"1984", "1985", "1986", "1987", "1988", "1989", "1990", "1991", "1992",
"1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001",
"2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010",
"2011", "2012", "2013", "2014"
]
const values = {
1: "Evergreen Forest (1)",
2: "Deciduous Forest (2)",
3: "Shrubland (3)",
4: "Herbaceous (4)",
5: "Sparely Vegetated (5)",
6: "Barren (6)",
7: "Fen (7)",
8: "Bog (8)",
9: "Shallows/Littoral (9)",
10: "Water (10)",
}
// we cannot click on raster layer (mapbox-gl bug)
map.on('click', (e) => {
const bounds = map.getSource('raster').bounds
if (
(e.lngLat.lng >= bounds[0] && e.lngLat.lng <= bounds[2]) &&
(e.lngLat.lat >= bounds[1] && e.lngLat.lat <= bounds[3])
) {
fetch(`${endpoint}/tiles/${mosaicid}/point?lng=${e.lngLat.lng}&lat=${e.lngLat.lat}`)
.then(res => {
if (res.ok) return res.json()
throw new Error('Network response was not ok.');
})
.then(data => {
console.log(data)
let html = '<table><tr><th class="align-l">property</th><th class="px3 align-r">value</th></tr>'
for (var ii = 0; ii < layers.length; ii++) {
let v = data.values[0].values[ii]
html += `<tr><td class="align-l">${layers[ii]}</td><td class="px3 align-r">${values[v]}</td></tr>`
}
html += `<tr><td class="align-l">lon</td><td class="px3 align-r">${e.lngLat.lng.toString().slice(0, 7)}</td></tr>`
html += `<tr><td class="align-l">lat</td><td class="px3 align-r">${e.lngLat.lat.toString().slice(0, 7)}</td></tr>`
html += '</table>'
new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML(html)
.addTo(map)
})
.catch(err => {
console.warn(err)
})
}
})
</script>
</body>
</html>"""
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment