Skip to content

Instantly share code, notes, and snippets.

@KMarkert

KMarkert/mapbox_example.html

Last active March 10, 2020 16:52
Show Gist options
  • Save KMarkert/cc8000b6ba3a414b3df4de19b28fec85 to your computer and use it in GitHub Desktop.
Save KMarkert/cc8000b6ba3a414b3df4de19b28fec85 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
mapbox_example.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AQ-ML Data Extractor</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.6.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.0/mapbox-gl.css" rel="stylesheet" />
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.css' type='text/css' />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/[email protected]/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#control-container {
position: absolute;
top: 15px;
left: 15px;
width: 415px;
height:750px;
padding: 10px;
background-color: #fff;
box-shadow: 5px 10px 20px #404040;
}
#spatial-select {
margin: 15px;
width: 375px;
}
.header {
text-shadow: 1px 1px 6px #d8d8d8;
}
.form-compact {
width: 375px;
margin: 15px;
}
.btn-custom {
width: 180px;
}
.marker {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b0/Simpleicons_Places_map-marker-1.svg');
/* filter: invert() sepia() saturate(10000%) hue-rotate(30deg); */
background-size: cover;
width: 25px;
height: 25px;
border-radius: 50%;
cursor: pointer;
}
.mapboxgl-popup {
max-width: 200px;
}
.mapboxgl-popup-content {
text-align: center;
font-family: 'Open Sans', sans-serif;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="control-container">
<form>
<p class="h4 mb-4 header">AQ-ML Data Extractor</p>
<div class="row">
<div class="col">
<label for="start-picker" class="col-sm-12 col-form-label">Start Date</label>
<input id="start-datepicker" width="150" />
</div>
<div class="col">
<label for="end-picker" class="col-sm-12 col-form-label">End Date</label>
<input id="end-datepicker" width="150" />
</div>
</div>
<br />
<div class="row">
<label for="spatial-select" class="col-sm-12 col-form-label">Select Spatial Extent</label>
<div class="btn-group-vertical btn-group-toggle" data-toggle="buttons" id="spatial-select">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" checked>
<span class="fas fa-globe"></span> Use current map extent
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option1">
<span class="fas fa-map"></span> Countries
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2">
<span class="fas fa-map-marker-alt"></span> Surface Observation Sites
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option1">
<span class="fas fa-draw-polygon"></span> Draw Geometry
</label>
</div>
</div>
<!-- </div> -->
<hr />
<div class="row">
<label for="satellite-selection" class="col-sm-12 col-form-label">Satellite Product Selection (Features)</label>
<select class="form-control form-compact" id="satellite-selection">
<option>MODIS Terra True color</option>
<option>MODIS Terra AOD 3km</option>
</select>
</div>
<div class="row">
<label for="insitu-selection" class="col-sm-12 col-form-label"><emp>In situ</emp> Product Selection (Labels)</label>
<select class="form-control form-compact" id="insitu-selection">
<option>Aeronet</option>
<option>MODIS Terra AOD 3km</option>
</select>
</div>
<hr />
<div class="row">
<div class="col">
<button type="button" class="btn btn-success btn-custom">
<span class="fas fa-cloud-download-alt" aria-hidden="true"></span> Fetch Data
</button>
</div>
<div class="col">
<button type="button" class="btn btn-primary btn-custom">
<span class="fas fa-external-link-alt" aria-hidden="true"></span> Open in Playground
</button>
</div>
</div>
</form>
</div>
<script>
var truecolorTilePath = 'https://gibs.earthdata.nasa.gov/wmts/epsg3857/best/' +
'MODIS_Terra_CorrectedReflectance_TrueColor/default/' +
'2019-03-21/GoogleMapsCompatible_Level9/{z}/{y}/{x}.jpg';
// var truecolorTilePath = 'https://gibs.earthdata.nasa.gov/wmts/epsg3857/best/' +
// 'MODIS_Aqua_Aerosol_Optical_Depth_3km/default/' +
// '2019-02-22/GoogleMapsCompatible_Level6/{z}/{y}/{x}.png';
var aodTilePath = 'https://gibs.earthdata.nasa.gov/wmts/epsg3857/best/' +
'MODIS_Terra_Aerosol/default/' +
'2019-03-21/GoogleMapsCompatible_Level6/{z}/{y}/{x}.png';
var geojson = {
type: 'FeatureCollection',
features: [{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-56.104453,-9.871339]
},
properties: {
title: 'Alta_Floresta',
}
},
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-110.953003,32.233002]
},
properties: {
title: 'Tucson',
}
},
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-76.839833,38.992500]
},
properties: {
title: 'GSFC',
}
},
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-75.471950,37.932850]
},
properties: {
title: 'Wallops',
}
}]
};
mapboxgl.accessToken = '<mapbox-key>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
zoom: 3,
center: [0,20]
});
var Draw = new MapboxDraw();
// Map#addControl takes an optional second argument to set the position of the control.
// If no position is specified the control defaults to `top-right`. See the docs
// for more details: https://www.mapbox.com/mapbox-gl-js/api/map#addcontrol
map.addControl(Draw, 'top-right');
map.on('load', function() {
map.addLayer(
{
'id': 'terra-truecolor',
'type': 'raster',
'source': {
'type': 'raster',
'tiles': [
truecolorTilePath,
],
'tileSize': 256,
'attribution':
'<a href="https://wiki.earthdata.nasa.gov/display/GIBS" target="_">' +
'NASA EOSDIS GIBS</a>;'
},
'paint': {}
},
'aeroway-line'
);
map.addLayer(
{
'id': 'terra-aod',
'type': 'raster',
'source': {
'type': 'raster',
'tiles': [
aodTilePath,
],
'tileSize': 256
},
'paint': {}
},
'aeroway-line'
);
map.setPaintProperty(
'terra-truecolor',
'raster-opacity',
0.6
);
});
$.ajax({
type: "GET",
dataType: "json",
url: 'http://localhost:31338/aeronet_2019.geojson',
success: function(data) {
var el;
// add markers to map
data.features.forEach(function(marker) {
// create a HTML element for each feature
el = document.createElement('div');
el.className = 'marker';
// make a marker for each feature and add to the map
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.addTo(map);
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
.setHTML('<h4>' + marker.properties.Site_Name + '</h4>')
)
.addTo(map);
});
},
error:function() {
alert("file not loaded")
}
});
$('#start-datepicker').datepicker({
uiLibrary: 'bootstrap4'
});
$('#end-datepicker').datepicker({
uiLibrary: 'bootstrap4'
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment