Created
February 26, 2019 02:59
-
-
Save gabrielsimplicio/2ea491bcc9148c0b9e292901b2a41d14 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var stateMT = ee.FeatureCollection('ft:15Y2IjO7bMc-COe8xOm3x1tfZdgb7GO4hK1TDWxGg'); | |
var state = stateMT.geometry() | |
Map.centerObject(state) | |
// This script allows you to interactively explore the effects | |
// of mosaicking different Landsat 8 TOA images using ee.Reducer.median(). | |
/* | |
* Style defaults | |
*/ | |
var colors = {'cyan': '#24C1E0', 'transparent': '#11ffee00', 'gray': '#F8F9FA'}; | |
var TITLE_STYLE = { | |
fontWeight: '100', | |
fontSize: '32px', | |
padding: '10px', | |
color: '#616161', | |
backgroundColor: colors.transparent, | |
}; | |
var PARAGRAPH_STYLE = { | |
fontSize: '14px', | |
fontWeight: '50', | |
color: '#9E9E9E', | |
padding: '8px', | |
backgroundColor: colors.transparent, | |
}; | |
var LABEL_STYLE = { | |
fontWeight: '50', | |
textAlign: 'center', | |
fontSize: '11px', | |
backgroundColor: colors.transparent, | |
}; | |
var THUMBNAIL_WIDTH = 64; | |
var BORDER_STYLE = '4px solid rgba(97, 97, 97, 0.05)'; | |
/* | |
* Collection display defaults | |
*/ | |
// Landsat 8 TOA | |
var COLLECTION_ID = 'LANDSAT/LT05/C01/T1_TOA'; | |
var START_DATE = '1984-01-01'; | |
var END_DATE = '1984-12-30'; | |
var VIZ_PARAMS = {bands: ['B5', 'B4', 'B3'], min: 0, max: 0.4, gamma: 1.5}; | |
var BASE_COLLECTION = ee.ImageCollection(COLLECTION_ID) | |
.filter(ee.Filter.lte('CLOUD_COVER', 35)) | |
.filterDate(START_DATE, END_DATE) | |
.sort('CLOUD_COVER', true) | |
.filterBounds(state) | |
// Max number of images to use when generating a mosaic. | |
var MAX_MOSAIC_SIZE = 10; | |
/* | |
* Side panel setup | |
*/ | |
/** | |
* Return the main side panel, populated with title and app description. | |
*/ | |
function makeSidePanel() { | |
// Create the base side panel, into which other widgets will be added | |
var mainPanel = ui.Panel({ | |
layout: ui.Panel.Layout.flow('vertical', true), | |
style: { | |
stretch: 'horizontal', | |
height: '100%', | |
width: '550px', | |
backgroundColor: colors.gray, | |
border: BORDER_STYLE, | |
} | |
}); | |
// Add the app title to the side panel | |
var titleLabel = ui.Label('Collection Mosaic Editor', TITLE_STYLE); | |
mainPanel.add(titleLabel); | |
// Add the app description to the main panel | |
var descriptionText = | |
"Gerador de Moisaicos" ; | |
var descriptionLabel = ui.Label(descriptionText, PARAGRAPH_STYLE); | |
mainPanel.add(descriptionLabel); | |
return mainPanel; | |
} | |
/* | |
* Thumbnail setup | |
*/ | |
/** | |
* Return the grid panel where thumbnails will be added. | |
*/ | |
function makeThumbnailGrid() { | |
return ui.Panel({ | |
layout: ui.Panel.Layout.flow('horizontal', true), | |
style: { | |
stretch: 'vertical', | |
backgroundColor: colors.transparent, | |
} | |
}); | |
} | |
/** | |
* Return a panel containing the thumbnail and label for an image with | |
* the given ID and geometry. | |
* @param {string} id The id of the image from which to make the thumbnail. | |
* @param {Function} onChangeFunc The function to call when thumbnail is checked/unchecked. | |
*/ | |
function makeThumbnail(id, onChangeFunc) { | |
var thumbnailContainer = ui.Panel({ | |
layout: ui.Panel.Layout.flow('vertical'), | |
style: { | |
backgroundColor: colors.transparent, | |
border: BORDER_STYLE, | |
padding: '4px', | |
margin: '5px', | |
}, | |
}); | |
// Add an image label to the thumbnail container. | |
var idPieces = id.split('/'); | |
var shortImageId = idPieces[idPieces.length - 1]; | |
var imageLabel = ui.Label(shortImageId, LABEL_STYLE); | |
thumbnailContainer.add(imageLabel); | |
// Add the thumbnail itself to the container | |
var thumbnail = ui.Thumbnail({ | |
image: ee.Image(id).visualize(VIZ_PARAMS), | |
params: {dimensions: THUMBNAIL_WIDTH, crs: 'EPSG:3857', format: 'jpg'}, | |
style: { | |
width: THUMBNAIL_WIDTH + 'px', | |
maxHeight: THUMBNAIL_WIDTH + 25 + 'px', | |
backgroundColor: colors.transparent, | |
} | |
}); | |
thumbnailContainer.add(thumbnail); | |
// Add the checkbox to specify which thumbnails to include in the mosaic. | |
var checkbox = ui.Checkbox('Include', false, onChangeFunc, false, LABEL_STYLE); | |
thumbnailContainer.add(checkbox); | |
return thumbnailContainer; | |
} | |
/* | |
* Map panel setup | |
*/ | |
var button = ui.Button("GERAR VIZUALIZAÇÃO") | |
var button2 = ui.Button("GERAR EXPORT") | |
button.onClick(function(coords) { | |
var point = state; | |
var dot = ui.Map.Layer(point, {color: colors.cyan}); | |
point.evaluate(function(geometryBbox) { | |
updateUI(geometryBbox, mapPanel, thumbnailGrid); | |
}); | |
// Set the dot to 1 so it's visible on top of the mosaic. | |
mapPanel.layers().set(1, dot); | |
}); | |
/** Returns a ui.Map with some UI configuration in place */ | |
function makeMapPanel() { | |
var map = ui.Map(); | |
// Add an informational label | |
map.add(ui.Label('Click the map to compute a mosaic at that location')); | |
map.style().set('cursor', 'crosshair'); | |
map.add(button) | |
map.add(button2) | |
// Don't show the layer list for this app. | |
map.setControlVisibility({layerList: false}); | |
return map; | |
} | |
/* | |
* Helper methods | |
*/ | |
/** | |
* Recomputes a mosaic with the supplied IDs and adds it to the mapPanel. | |
*/ | |
function updateMosaic(ids, mapPanel) { | |
if (ids.length === 0) { | |
mapPanel.layers().set(0, ee.Image()); | |
return; | |
} | |
var mosaickedImage = ee.ImageCollection(ids).median(); | |
print(ee.ImageCollection(ids)) | |
mapPanel.layers().set(1, mosaickedImage.visualize(VIZ_PARAMS)); | |
} | |
/** | |
* Given a thumbnailGrid widget, determines which thumbnails have been selected | |
* by the user to include in a new mosaic. | |
*/ | |
function findSelectedThumbnails(thumbnailGrid) { | |
var thumbs = thumbnailGrid.widgets(); | |
var ids = []; | |
thumbs.forEach(function f(e) { | |
var id = e.widgets().get(0).getValue(); | |
var checked = e.widgets().get(2).getValue(); | |
if (checked) { | |
ids.push(COLLECTION_ID + '/' + id); | |
} | |
}); | |
return ids | |
} | |
button2.onClick( | |
Export.image.toDrive({ | |
image: ee.ImageCollection(ids).median().select('B3', 'B4', 'B5'), | |
description:'', | |
region: ee.ImageCollection(ids).geometry().bounds(), | |
folder: '', | |
fileNamePrefix: '', | |
maxPixels: 1e13})) | |
/** | |
* Updates the mapPanel and thumbnailGrid widgets when a new bounding box has | |
* been chosen on the map. | |
*/ | |
function updateUI(geometry, mapPanel, thumbnailGrid) { | |
var images = BASE_COLLECTION; | |
images = images.filterBounds(images.geometry()); | |
// var first = ee.Image(images); | |
// Repopulate the thumbnail grid with new thumbnails | |
thumbnailGrid.clear(); | |
images.limit(MAX_MOSAIC_SIZE) | |
.aggregate_array('system:id') | |
.evaluate(function(ids) { | |
// Sometimes there are no images where the user has clicked. | |
if (ids === undefined) { | |
return; | |
} | |
// Define the function to be called when thumbnails are clicked or | |
// unclicked. | |
var remosaicFunc = function() { | |
var ids = findSelectedThumbnails(thumbnailGrid); | |
updateMosaic(ids, mapPanel); | |
}; | |
ids.forEach(function(id) { | |
var thumb = makeThumbnail(id, remosaicFunc); | |
thumbnailGrid.add(thumb); | |
}); | |
// Recompute the mosaic from the new image IDs and add to the mapPanel. | |
updateMosaic(ids, mapPanel); | |
// Center the map to the new mosaic | |
mapPanel.centerObject(stateMT); | |
}); | |
} | |
/* | |
* Main app initialization | |
*/ | |
// Clear the default UI since we're adding our own side and map panels. | |
ui.root.clear(); | |
// Create the app's two panels and add them to the ui.root | |
var sidePanel = makeSidePanel(); | |
var mapPanel = makeMapPanel(); | |
// Use a SplitPanel so it's possible to resize the two panels. | |
ui.root.add(ui.SplitPanel(sidePanel, mapPanel)); | |
// Add the thumbnail grid to the side panel | |
var thumbnailGrid = makeThumbnailGrid(); | |
sidePanel.add(thumbnailGrid); | |
// Launch the app with an initial point pre-selected | |
//var initGeometry = ee.Geometry.Polygon(state); | |
//mapPanel.centerObject(initGeometry); | |
//updateUI(initGeometry, mapPanel, thumbnailGrid); | |
//------------------------------------------------------------------- |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment