Merge pull request #3 from initze/dev03_swipe

Dev03 swipe

README.md

@@ -4,5 +4,5 @@ Google Earthengine HotSpot Regions of Permafrost Change Production and Visualiza
 
 ### Visualization
 https://ingmarnitze.users.earthengine.app/view/hotspottcvisapp
-![grafik](https://user-images.githubusercontent.com/4864803/113686112-33675380-96c7-11eb-8b79-5a8f76b87b05.png)
+![grafik](https://user-images.githubusercontent.com/4864803/121183468-62837800-c864-11eb-8512-43567a18600b.png)
 

apps/000_HotSpot_App.js

@@ -11,16 +11,16 @@ var TCVIS_SR = ee.ImageCollection('users/ingmarnitze/TCTrend_SR_2000-2019_TCVIS'
 // #############################################################################
 // ### GET URL PARAMS ###
 // #############################################################################
-var initLon = -121.68804;
+var initLon = -153.8;
 var lonUrl = ui.url.get('lon', initLon);
 ui.url.set('lon', lonUrl);
 
-var initLat = 36.46517;
+var initLat = 70.88;
 var latUrl = ui.url.get('lat', initLat);
 ui.url.set('lat', latUrl);
 
 // add zoom level
-var initZoom = 8;
+var initZoom = 11;
 var zoomUrl = ui.url.get('zoom', initZoom);
 ui.url.set('zoom', zoomUrl);
 
@@ -37,11 +37,20 @@ function handleMapZoom(zoomlevel) {
   ui.url.set('zoom', zoomlevel);
 }
 
-Map.onChangeCenter(handleMapChange)
-Map.onChangeZoom(handleMapZoom)
+//################
+var mapData = ui.Map()
 
+// Add left map object
+var leftMap = ui.Map();
+leftMap.setOptions('SATELLITE')
 
-Map.setOptions('SATELLITE')
+var rightMap = ui.Map()
+
+rightMap.onChangeCenter(handleMapChange)
+rightMap.onChangeZoom(handleMapZoom)
+
+
+rightMap.setOptions('SATELLITE')
 var point = ee.Geometry.Point([0, 0])
 
 
@@ -101,23 +110,23 @@ var panel_exampleButtons = ui.Panel({
 // Buttons: Permafrost Examples
 var button_DP = ui.Button({label: 'Drew Point Coastal Erosion',
                            style: style_exampleButton})
-button_DP.onClick(function(){Map.centerObject(ee.Geometry.Point([-153.8, 70.88]), 11)})
+button_DP.onClick(function(){rightMap.centerObject(ee.Geometry.Point([-153.8, 70.88]), 11)})
 
 var button_HI = ui.Button({label: 'Herschel Island Slumps',
                            style: style_exampleButton})
-button_HI.onClick(function(){Map.centerObject(ee.Geometry.Point([-139, 69.56]), 12)})
+button_HI.onClick(function(){rightMap.centerObject(ee.Geometry.Point([-139, 69.56]), 12)})
 
 var button_SP = ui.Button({label: 'Lake Drainage Seward Peninsula',
                            style: style_exampleButton})
-button_SP.onClick(function(){Map.centerObject(ee.Geometry.Point([-164, 66.5]), 11)})
+button_SP.onClick(function(){rightMap.centerObject(ee.Geometry.Point([-164, 66.5]), 11)})
 
 var button_BOV = ui.Button({label: 'Bovanenkovo Oil Fields', 
                            style: style_exampleButton})
-button_BOV.onClick(function(){Map.centerObject(ee.Geometry.Point([68.45, 70.36]), 10)})
+button_BOV.onClick(function(){rightMap.centerObject(ee.Geometry.Point([68.45, 70.36]), 10)})
 
 var button_BAT = ui.Button({label: 'Batagaika Crater', 
                            style: style_exampleButton})
-button_BAT.onClick(function(){Map.centerObject(ee.Geometry.Point([134.77, 67.58]), 13)})
+button_BAT.onClick(function(){rightMap.centerObject(ee.Geometry.Point([134.77, 67.58]), 13)})
 
 panel_exampleButtons.add(ui.Label('Examples', style_label))
 panel_exampleButtons.add(button_DP)
@@ -145,7 +154,7 @@ var button_plotTSon = ui.Button(
   {label: 'On', style: style_TSbutton, disabled: false})
 button_plotTSon.onClick(function(){
   panel_timeSeries.style().set('shown', true)
-  Map.style().set('cursor', 'crosshair')
+  rightMap.style().set('cursor', 'crosshair')
   button_plotTSon.setDisabled(true)
   button_plotTSoff.setDisabled(false)
 })                              
@@ -154,7 +163,7 @@ var button_plotTSoff = ui.Button(
   {label: 'Off', style: style_TSbutton, disabled: true})
 button_plotTSoff.onClick(function(){
   panel_timeSeries.style().set('shown', false)
-  Map.style().set('cursor', 'hand')
+  rightMap.style().set('cursor', 'hand')
   button_plotTSon.setDisabled(false)
   button_plotTSoff.setDisabled(true)
 })
@@ -187,11 +196,11 @@ panel_main.add(panel_TStoggle)
 
 ui.root.add(panel_main);
 
-Map.add(panel_timeSeries)
-Map.onClick(function(coords) {
+rightMap.add(panel_timeSeries)
+rightMap.onClick(function(coords) {
   panel_timeSeries.clear()
   point = ee.Geometry.Point(coords.lon, coords.lat);
-  Map.addLayer(point, {}, 'Selected Location')
+  rightMap.addLayer(point, {}, 'Selected Location')
   var plots = make_plots(point)
   panel_timeSeries.add(plots.plot_NDXI)
   panel_timeSeries.add(plots.plot_TCX)
@@ -215,8 +224,38 @@ var VisHs = {
 var dem = ee.Image("UMN/PGC/ArcticDEM/V3/2m_mosaic").select('elevation');
 var hillshade = ee.Terrain.hillshade(dem, 270, 45).select('hillshade');
 
-Map.addLayer(dem, elevationVis2, 'Arctic DEM Elevation', false)
-Map.addLayer(hillshade, VisHs, 'Arctic DEM Hillshade', false, 0.4)
+rightMap.addLayer(dem, elevationVis2, 'Arctic DEM Elevation', false)
+rightMap.addLayer(hillshade, VisHs, 'Arctic DEM Hillshade', false, 0.4)
 // Add TCVIS data
-Map.addLayer(TCVIS_SR, {}, 'HotSpot TCVIS Landsat Trends (SR) 2000-2019', true)
-Map.setCenter(initLon, initLat, initZoom)
+rightMap.addLayer(TCVIS_SR, {}, 'HotSpot TCVIS Landsat Trends (SR) 2000-2019', true)
+rightMap.setCenter(initLon, initLat, initZoom)
+
+
+// ########################################################################################### 
+// Add swipe widget
+
+// Add left map object
+var leftMap = ui.Map();
+leftMap.setOptions('SATELLITE')
+
+leftMap.addLayer(dem, elevationVis2, 'Arctic DEM Elevation', true)
+leftMap.addLayer(hillshade, VisHs, 'Arctic DEM Hillshade', true, 0.4)
+// Add TCVIS data
+leftMap.addLayer(TCVIS_SR, {}, 'HotSpot TCVIS Landsat Trends (SR) 2000-2019', false)
+leftMap.setCenter(initLon, initLat, initZoom)
+
+
+// Create linker, necessary to link both windows
+var linker = ui.Map.Linker([leftMap, rightMap]);
+
+
+var splitPanel = ui.SplitPanel({
+  firstPanel: linker.get(0),
+  secondPanel: linker.get(1),
+  orientation: 'horizontal',
+  wipe: true,
+  style: {stretch: 'both'}
+});
+
+// add new swipe map
+ui.root.widgets().reset([splitPanel, panel_main]);