Skip to content

Instantly share code, notes, and snippets.

@vincentsarago

vincentsarago/index.html

Created October 4, 2018 14:32
Show Gist options
  • Save vincentsarago/d38596da8fa1a07a4ef749e5b360a787 to your computer and use it in GitHub Desktop.
Save vincentsarago/d38596da8fa1a07a4ef749e5b360a787 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href="https://api.mapbox.com/mapbox-assembly/v0.23.1/assembly.min.css" rel="stylesheet">
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
body {
overflow: hidden;
}
body * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.legend {
position: absolute;
top: 0;
left: 0;
z-index: 10;
color: #fff;
}
.blue {
font-size: 14px;
font-weight: bold;
color: #3b4efb
}
.orange {
font-size: 14px;
font-weight: bold;
color: #fbb03b
}
</style>
</head>
<body>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.js'></script>
<script async defer src="https://api.mapbox.com/mapbox-assembly/v0.23.1/assembly.js"></script>
<script src='https://npmcdn.com/@turf/[email protected]/turf.min.js'></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id='map' class='map'>
<div class='w240 round px12 py12 txt-s legend'>
<strong class='block mb6'>Legend</strong>
<div><div class="orange inline">---- </div>20181001</div>
<div><div class="blue inline">---- </div>20181002</div>
</div>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoidmluY2VudHNhcmFnbyIsImEiOiJjamxwa3JkaWkwZ3BjM3dudmZmazQwYjI2In0.eUzks_hqH-QVIlnXUKmKsA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/satellite-streets-v9',
center: [119.855,-0.886],
attributionControl : true,
zoom: 9
});
map.on('load', () => {
$.ajax({
type: 'GET',
url: 'https://gist.githubusercontent.com/vincentsarago/184bc7c97b512b354a7172c3046384a2/raw/'
}).done((data) => {
map.addSource('gist', {
'type': 'geojson',
'data': JSON.parse(data)
});
map.addLayer({
'id': 'gist-polygon',
'type': 'line',
'source': 'gist',
'layout': {
'line-cap': 'round',
'line-join': 'round'
},
'paint': {
'line-width': 2,
'line-color': [
'match',
['get', 'date'],
'20181001', '#fbb03b',
'20181002', '#3b4efb',
'#ccc'
]
}
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment