Skip to content

Instantly share code, notes, and snippets.

@vincentsarago

vincentsarago/index.html

Created January 17, 2020 17:15
Show Gist options
  • Save vincentsarago/e0608d470d9c5ba9d26359eebcc12ba2 to your computer and use it in GitHub Desktop.
Save vincentsarago/e0608d470d9c5ba9d26359eebcc12ba2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Australia Wildfires DG images</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.0.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />
<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; }
body * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.map {
height: 100%;
width: 100%;
}
.loading-map {
position: absolute;
width: 100px;
height: 100px;
text-align: center;
opacity: 1;
font-size: 60px;
left: 0;
bottom: 0;
}
.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;
}
#list-images {
text-align: left;
color: #393939;
}
#list-images .list-element{
cursor: pointer;
color: #393939;
border-top: 1px solid #bfbfbf;
margin-left: 10px;
}
#list-images .list-element:hover {
background-color: rgb(88, 84, 84);
background-color: rgba(88, 84, 84, 0.2);
}
.image-descr {
display: inline-block;
font-weight: 100;
padding: 10px;
vertical-align: middle;
}
.tag-icon {
display: inline-block;
height: 23px;
width: 23px;
line-height: 23px;
-moz-border-radius: 50%;
border-radius: 50%;
color: black;
text-align: center;
vertical-align: middle;
font-size: 10px;
}
.tag-icon.before {
background-color: #0f6d8e
}
.tag-icon.after {
background-color: #fbb03b
}
</style>
</head>
<body>
<div class='flex-parent viewport-full relative scroll-hidden'>
<div class='flex-child w-full w240-ml absolute static-ml left bottom'>
<div class='flex-parent flex-parent--column viewport-third h-full hmax-full bg-white'>
<div class='flex-child flex-child--grow scroll-auto'>
<div id="list-images">
</div>
</div>
</div>
</div>
<div class='flex-child flex-child--grow bg-darken10 viewport-twothirds viewport-full-ml'></div>
<div id='map' class='map'>
<div id='loader' class="loading-map z3 color-dark">
<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>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoidmluY2VudHNhcmFnbyIsImEiOiJjamxwa3JkaWkwZ3BjM3dudmZmazQwYjI2In0.eUzks_hqH-QVIlnXUKmKsA'
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/basic-v9',
center: [ 150.184, -34.537 ],
attributionControl: true,
zoom: 8,
hash: true
})
map.addControl(new mapboxgl.NavigationControl())
const highlight = (e) => {
map.setFilter('highlighted', ['==', 'sceneid', e.getAttribute('data-id')])
}
const addRaster = (e) => {
const raster_path = e.getAttribute('data-url')
document.getElementById('loader').classList.toggle('off')
if (map.getLayer('raster')) map.removeLayer('raster')
if (map.getSource('raster')) map.removeSource('raster')
return fetch(`https://cogeo.remotepixel.ca/tilejson.json?url=${raster_path}`)
.then(res => {
if (res.ok) return res.json()
throw new Error('Network response was not ok.')
})
.then(data => {
console.log(data)
url = `https://cogeo.remotepixel.ca/tiles/{z}/{x}/{y}.png?url=${raster_path}`
map.addSource('raster', {
type: 'raster',
tiles: [
url
],
attribution: '<a href="https://www.digitalglobe.com/ecosystem/open-data/australia-wildfires?utm_source=blog&utm_medium=organic"> &copy; Digitalglobe OpenData program</a>',
bounds: data.bounds,
minzoom: data.minzoom,
maxzoom: data.maxzoom,
tileSize: 256
});
map.addLayer({
id: 'raster',
type: 'raster',
source: 'raster'
});
map.fitBounds([[data.bounds[0], data.bounds[1]], [data.bounds[2], data.bounds[3]]])
})
.catch(err => {
console.warn(err)
})
.then(() => {
document.getElementById('loader').classList.toggle('off')
return
})
}
map.on('load', () => {
const url = "https://gist.githubusercontent.com/vincentsarago/2fd1b8bac77d0fb0183bd43989efe157/raw/0a0c895d29b2a71f923ba7974bd529027f434d4a/AustraliaFires_2019-2020.geojson"
fetch(url)
.then(res => {
if (res.ok) return res.json()
throw new Error('Network response was not ok.')
})
.then(data => {
features = data.features
features = features.map(e => {
e.properties.tags = e.properties.tags[0]
return e
})
features.sort(function(a,b){
return new Date(a.properties.date) - new Date(b.properties.date);
});
const geojson = { 'type': 'FeatureCollection', 'features': features }
map.addSource('borders', {
'type': 'geojson',
'data': geojson
})
map.addLayer({
id: 'highlighted',
type: 'fill',
source: 'borders',
paint: {
'fill-outline-color': '#1386af',
'fill-color': '#0f6d8e',
'fill-opacity': 0.3
},
'filter': ['==', 'sceneid', '']
})
map.addLayer({
id: 'borders',
type: 'line',
source: 'borders',
layout: {
'line-cap': 'round',
'line-join': 'round'
},
paint: {
'line-color': [
'match',
['get', 'tags'],
'post-event',
'#fbb03b',
'pre-event',
'#0f6d8e',
'#ccc'
],
'line-width': 2
}
})
const listImages = document.getElementById('list-images')
for (var i = 0; i < geojson.features.length; i++) {
let props = geojson.features[i].properties
let t, tClass
if (props.tags === "pre-event") {
tClass = "tag-icon before"
t = "B"
} else {
tClass = "tag-icon after"
t = "A"
}
var el = document.createElement('div');
el.innerHTML = `<div class="list-element" data-id=${props.sceneid} data-url=${props.path} target="_blank" onclick="addRaster(this)" onmouseover="highlight(this)">` +
`<div class="${tClass}">${t}</div>` +
`<div class="image-descr">${props.date}</div>` +
'</div>'
listImages.appendChild(el)
}
var bbox = turf.bbox(geojson);
map.fitBounds([[bbox[0], bbox[1]], [bbox[2], bbox[3]]])
})
.catch(err => {
console.warn(err)
})
.then(() => {
document.getElementById('loader').classList.toggle('off')
return
})
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment