// Load Landsat 8 collection
var landsat_therm = ee.ImageCollection('LANDSAT/LC08/C01/T1_32DAY_TOA')
 .filterDate('2014-01-01', '2021-12-31')
 .select('B11');

// Import cities for temperature calculation
var cities = ee.FeatureCollection("users/fkroeber/cities_germany");

// Configure the initial map/zoom
Map.setCenter(10.5, 51.2, 5);
Map.style().set('cursor', 'crosshair');

// Select & show reference cities
var ref_cities = ee.FeatureCollection([ee.Feature(cities.filter(ee.Filter.eq('GEN', 'Rostock')).first()),
                                       ee.Feature(cities.filter(ee.Filter.eq('GEN', 'Offenbach am Main')).first())]);
Map.addLayer(ref_cities, {}, 'reference cities');

// Display temp series for reference cities
var temp_chart = ui.Chart.image.seriesByRegion(
 landsat_therm, ref_cities, ee.Reducer.mean(), 'B11', 200, 'system:time_start', 'GEN')
 .setChartType('ScatterChart')
 .setOptions({
 title: 'Temperature over time in different german cities',
 vAxis: {title: 'Temperature (Kelvin)'},
 lineWidth: 1,
 pointSize: 3,
 series: {
 0: {color: '0000FF'}, // blue
 1: {color: 'FF0000'}, // red
}});

var chart_panel = ui.Panel({style: {width: '500px', border: '1px solid black'}})
    .add(temp_chart);

// aux_function to recentre map
var centre_map = function(selected_feat){
   var feat = cities.filterMetadata('GEN', 'equals', selected_feat).first();
   Map.clear();
   Map.addLayer(ref_cities, {}, 'reference cities');
   Map.addLayer(ee.Feature(feat), {}, 'selected city');
   Map.centerObject(feat, 10);
}

// aux_function to update temp chart
var update_temp_chart = function(selected_feat){
  var feat = ee.FeatureCollection(ee.Feature(cities.filterMetadata('GEN', 'equals', selected_feat).first()));
  var exted_cities = ref_cities.merge(feat)
  
  var updated_timeseries = ui.Chart.image.seriesByRegion(
   landsat_therm, exted_cities, ee.Reducer.mean(), 'B11', 200, 'system:time_start', 'GEN')
   .setChartType('ScatterChart')
   .setOptions({
   title: 'Temperature over time in different german cities',
   vAxis: {title: 'Temperature (Kelvin)'},
   lineWidth: 1,
   pointSize: 3,
   series: {
   0: {color: '0000FF'}, // blue
   1: {color: 'FF0000'}, // red
   2: {color: '808080'}, // grey
  }});

  var chart_panel_new = ui.Panel({style: {width: '500px', border: '1px solid black'}})
    .add(updated_timeseries);
  
  ui.root.remove(chart_panel)
  ui.root.insert(2, chart_panel_new)
}


// Create an empty panel in which to arrange widgets
var panel = ui.Panel({style: {width: '200px', border: '1px solid black'}})
    .add(ui.Label('Choose a city from the selection below. \
                   A timeseries of surface temperatures will be calculated \
                   and compared to Offenbach am Main (as one of the warmest cities) \
                   and Rostock (as one of the coldest cities).'));
    
// Empty Dropdowns
var city_select = ui.Select([], 'Loading..')

// Load states
cities.aggregate_array('GEN').evaluate(function(x){
  city_select.items().reset(x)
  city_select.setPlaceholder('Choose city...')
  city_select.style().set({width: '100px'})
  city_select.onChange(function(x){centre_map(x), update_temp_chart(x)})
});
panel.widgets().set(1, city_select);   

// Add the panel to the ui.root
ui.root.insert(1, chart_panel);
ui.root.insert(0, panel);


/// potential future improvements ///
// 1. Load script for more sophisticated LST computation
//    var LandsatLST = require('users/sofiaermida/landsat_smw_lst:modules/Landsat_LST.js')
// 2. Display mean LST in split-window map
// 3. Plotting adjustments (e.g. conversion to Celsius)