:tada: You should be all set there.
---
# Use it: Landsat-viewer
#### lambda-tiler + Mapbox GL + Satellite API
The `viewer/` directory contains a UI example to use with your new Lambda Landsat tiler endpoint. It combine the power of mapbox-gl and the nice developmentseed [sat-api](https://github.com/sat-utils/sat-api) to create a simple and fast **Landsat-viewer**.
To be able to run it, edit those [two lines](https://github.com/mapbox/landsat-tiler/blob/master/viewer/js/app.js#L3-L4) in `viewer/js/app.js`
```js
// viewer/js/app.js
3 mapboxgl.accessToken = '{YOUR-MAPBOX-TOKEN}';
4 const landsat_tiler_url = "{YOUR-API-GATEWAY-URL}";
```
## Workflow
1. One AWS λ call to get min/max percent cut value for all the bands and bounds
*Path:* **/landsat/metdata/{landsat scene id}**
*Inputs:*
- sceneid: Landsat product id (or scene id for scene < 1st May 2017)
*Options:*
- pmin: Histogram cut minimum value in percent (default: 2)
- pmax: Histogram cut maximum value in percent (default: 98)
*Output:* (dict)
- bounds: (minX, minY, maxX, maxY) (list)
- sceneid: scene id (string)
- rgbMinMax: Min/Max DN values for the linear rescaling (dict)
*Example:* `
Loading
' +
'
');
}
} else {
$('.errorMessage').removeClass('none');
}
})
.always(() => {
$('.spin').addClass('none');
})
.fail(() => {
$('.errorMessage').removeClass('none');
});
}
const initScene = (sceneID, sceneDate) => {
$('.metaloader').removeClass('none');
$('.errorMessage').addClass('none');
let min = $("#minCount").val();
let max = $("#maxCount").val();
const query = `${landsat_tiler_url}/landsat/metadata/${sceneID}?'pmim=${min}&pmax=${max}`;
$.getJSON(query, (data) => {
scope.imgMetadata = data;
updateRasterTile();
$('.landsat-info').removeClass('none');
$('.landsat-info .l8id').text(sceneID);
$('.landsat-info .l8date').text(sceneDate);
})
.fail(() => {
if (map.getSource('landsat-tiles')) map.removeSource('landsat-tiles');
if (map.getLayer('landsat-tiles')) map.removeLayer('landsat-tiles');
$('.landsat-info span').text('');
$('.landsat-info').addClass('none');
$('.errorMessage').removeClass('none');
})
.always(() => {
$('.metaloader').addClass('none');
});
};
const updateRasterTile = () => {
if (map.getSource('landsat-tiles')) map.removeSource('landsat-tiles');
if (map.getLayer('landsat-tiles')) map.removeLayer('landsat-tiles');
let meta = scope.imgMetadata;
let rgb = $(".img-display-options .toggle-group input:checked").attr("data");
const bands = rgb.split(',');
// NOTE: Calling 512x512px tiles is a bit longer but gives a
// better quality image and reduce the number of tiles requested
// HACK: Trade-off between quality and speed. Setting source.tileSize to 512 and telling landsat-tiler
// to get 256x256px reduces the number of lambda calls (but they are faster)
// and reduce the quality because MapboxGl will oversample the tile.
const tileURL = `${landsat_tiler_url}/landsat/tiles/${meta.sceneid}/{z}/{x}/{y}.png?` +
`rgb=${rgb}` +
'&tile=256' +
`&histo=${meta.rgbMinMax[bands[0]]}-${meta.rgbMinMax[bands[1]]}-${meta.rgbMinMax[bands[2]]}`;
const attrib = ' © USGS/NASA Landsat';
$('.landsat-info .l8rgb').text(rgb);
map.addSource('landsat-tiles', {
type: 'raster',
tiles: [tileURL],
attribution : attrib,
bounds: scope.imgMetadata.bounds,
minzoom: 7,
maxzoom: 14,
tileSize: 256
});
map.addLayer({
'id': 'landsat-tiles',
'type': 'raster',
'source': 'landsat-tiles'
});
};
const updateMetadata = () => {
if (!map.getSource('landsat-tiles')) return;
initScene(scope.imgMetadata.sceneid, scope.imgMetadata.date);
}
$(".img-display-options .toggle-group").change(() => {
if (map.getSource('landsat-tiles')) updateRasterTile();
});
document.getElementById("btn-clear").onclick = () => {
if (map.getLayer('landsat-tiles')) map.removeLayer('landsat-tiles');
if (map.getSource('landsat-tiles')) map.removeSource('landsat-tiles');
map.setFilter("L8_Highlighted", ["in", "PATH", ""]);
map.setFilter("L8_Selected", ["in", "PATH", ""]);
$('.list-img').scrollLeft(0);
$('.list-img').empty();
$(".metaloader").addClass('off');
$('.errorMessage').addClass('none');
$(".landsat-info span").text('');
$(".landsat-info").addClass('none');
scope = {};
$("#minCount").val(5);
$("#maxCount").val(95);
$(".img-display-options .toggle-group input").prop('checked', false);
$(".img-display-options .toggle-group input[data='4,3,2']").prop('checked', true);
$('.map').removeClass('in');
$('.right-panel').removeClass('in');
map.resize();
};
////////////////////////////////////////////////////////////////////////////////
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/vincentsarago/ciy1m6t8y005a2rr09jhfplg3',
center: [-70.50, 40],
zoom: 3,
attributionControl: true,
minZoom: 3,
maxZoom: 14
});
map.addControl(new mapboxgl.NavigationControl(), 'top-right');
map.on('mousemove', (e) => {
const features = map.queryRenderedFeatures(e.point, {layers: ['landsat8-pathrow']});
let pr = ['in', 'PATH', ''];
if (features.length !== 0) {
pr = [].concat.apply([], ['any', features.map(e => {
return ['all', ['==', 'PATH', e.properties.PATH], ['==', 'ROW', e.properties.ROW]];
})]);
}
map.setFilter('L8_Highlighted', pr);
});
map.on('click', (e) => {
$('.right-panel').addClass('in');
$('.spin').removeClass('none');
const features = map.queryRenderedFeatures(e.point, {layers: ['landsat8-pathrow']});
if (features.length !== 0) {
$('.map').addClass('in');
$('.list-img').removeClass('none');
map.resize();
const pr = [].concat.apply([], ['any', features.map(e => {
return ['all', ['==', 'PATH', e.properties.PATH], ['==', 'ROW', e.properties.ROW]];
})]);
map.setFilter('L8_Selected', pr);
buildQueryAndRequestL8(features);
const geojson = {
'type': 'FeatureCollection',
'features': features
};
const extent = turf.bbox(geojson);
const llb = mapboxgl.LngLatBounds.convert([[extent[0], extent[1]], [extent[2], extent[3]]]);
map.fitBounds(llb, {padding: 50});
} else {
$('.spin').addClass('none');
map.setFilter('L8_Selected', ['in', 'PATH', '']);
}
});
map.on('load', () => {
map.addSource('landsat', {
'type': 'vector',
'url': 'mapbox://vincentsarago.8ib6ynrs'
});
map.addLayer({
'id': 'L8_Highlighted',
'type': 'fill',
'source': 'landsat',
'source-layer': 'Landsat8_Desc_filtr2',
'paint': {
'fill-outline-color': '#1386af',
'fill-color': '#0f6d8e',
'fill-opacity': 0.3
},
'filter': ['in', 'PATH', '']
});
map.addLayer({
'id': 'L8_Selected',
'type': 'line',
'source': 'landsat',
'source-layer': 'Landsat8_Desc_filtr2',
'paint': {
'line-color': '#000',
'line-width': 1
},
'filter': ['in', 'PATH', '']
});
$('.loading-map').addClass('off');
});
' +
'
' +
'
' +
'' +
'' + results[i].sceneID + '' +
' ' + results[i].date + '' +
'
' +
'