31:T41f,{ function easing(t) { return t * (20 - t); } let angle = map.getBearing(); let i = 0 for (const step of animate()) { yield step.then(step => { if(map.isMouseDown || map.getZoom() < 5) { return } else if(angle != map.getBearing()) { angle = map.getBearing(); } // pixels the map pans when the up or down arrow is clicked const deltaDistance = 10; if(keys.up) { map.panBy([0, -deltaDistance], { easing: easing }); } if(keys.down) { map.panBy([0, deltaDistance], { easing: easing }); } if(keys.left) { map.panBy([deltaDistance, 0], { easing: easing }); } if(keys.space) { map.setZoom(map.getZoom() - 0.1) } if(keys.shift) { map.setZoom(map.getZoom() + 0.1) } if(keys.right) { map.panBy([-deltaDistance, 0], { easing: easing }); } if(rotationSpeed) { angle += step; map.setBearing(angle); } return angle; }); } }32:T448,map = { let map = this; if (!map) { mapboxgl.accessToken = 'pk.eyJ1IjoiZ2xvYmFsLXdhdGVyLXdhdGNoIiwiYSI6ImNsMTY3c2txZzE0MTIzYm10anQyYmZqdHIifQ.7bByfnwpQCr-QyUP3Lx1dQ'; map = new mapboxgl.Map({ container: container, center: [ 110.3662820120091, -7.3061680426556705 ], bearing: -103, pitch: 77, zoom: 10, style: 'mapbox://styles/global-water-watch/cl2rke90v003q15lf9d7fthdp' }); // Theewaterskloofdam map.setCenter([19.22257086847631, -34.03027581738501]) map.setBearing(-31) map.setPitch(74) map.setZoom(11) // add controls map.addControl(new mapboxgl.NavigationControl(), 'top-right'); map.addControl(new mapboxgl.GeolocateControl()); map.addControl(new mapboxgl.FullscreenControl()); // // map.addControl(new mapboxgl.AttributionControl({compact: true})) map.addControl(new mapboxgl.ScaleControl()); } // Wait until the map loads, then yield the container again. yield new Promise(resolve => { if (map.loaded()) resolve(map); else map.on('load', () => resolve(map)); }); }33:Tcaf,utils = { return { getIsolines: function(image, opt_levels) { var addIso = function(image, level) { var crossing = image.subtract(level).focal_median(2).zeroCrossing(); var exact = image.eq(level); return ee.Image(level).float().mask(crossing.or(exact)).set({level: level}) }; var levels = opt_levels || ee.List.sequence(0, 1, 0.1); levels = ee.List(levels) var isoImages = ee.ImageCollection(levels.map(function(l) { return addIso(image, ee.Number(l)) })) return isoImages }, hillshadeRGB: function(image, elevation, weight, height_multiplier, azimuth, zenith, contrast, brightness, saturation, castShadows, customTerrain) { function radians(img) { return img.toFloat().multiply(3.1415927).divide(180); } function hillshade(az, ze, slope, aspect) { var azimuth = radians(ee.Image.constant(az)); var zenith = radians(ee.Image.constant(90).subtract(ee.Image.constant(ze))); return azimuth.subtract(aspect).cos().multiply(slope.sin()).multiply(zenith.sin()) .add(zenith.cos().multiply(slope.cos())); } weight = typeof(weight) === 'undefined' ? 1 : weight brightness = typeof(brightness) === 'undefined' ? 0 : brightness contrast = typeof(contrast) === 'undefined' ? 1 : contrast height_multiplier = height_multiplier || 5 azimuth = azimuth || 0 zenith = zenith || 45 saturation = typeof(saturation) === 'undefined' ? 1 : saturation var hsv = image.unitScale(0, 255).rgbToHsv()//.reproject(ee.Projection('EPSG:3857').atScale(Map.getScale())) var z = elevation.multiply(ee.Image.constant(height_multiplier)) var terrain = ee.Algorithms.Terrain(z) var slope = radians(terrain.select(['slope'])).resample('bicubic') var aspect = radians(terrain.select(['aspect'])).resample('bicubic') var hs = hillshade(azimuth, zenith, slope, aspect).resample('bicubic') if(castShadows) { var hysteresis = true var neighborhoodSize = 512 var hillShadow = ee.Algorithms.HillShadow(elevation, azimuth, ee.Number(90).subtract(zenith), neighborhoodSize, hysteresis).float() hillShadow = ee.Image(1).float().subtract(hillShadow) // opening // hillShadow = hillShadow.multiply(hillShadow.focal_min(3).focal_max(6)) // cleaning hillShadow = hillShadow.focal_mode(3) // smoothing hillShadow = hillShadow.convolve(ee.Kernel.gaussian(5, 3)) // transparent hillShadow = hillShadow.multiply(0.7) hs = hs.subtract(hillShadow).rename('shadow') } var intensity = hs.multiply(ee.Image.constant(weight)) .add(hsv.select('value').multiply(ee.Image.constant(1).subtract(weight))) var sat = hsv.select('saturation').multiply(saturation) var hue = hsv.select('hue') var result = ee.Image.cat(hue, sat, intensity).hsvToRgb().multiply(ee.Image.constant(1).float().add(contrast)).add(ee.Image.constant(brightness).float()) return result } } }34:T873,imageWater = { var waterOccurrence = ee.Image("JRC/GSW1_3/GlobalSurfaceWater").select('occurrence') .divide(100).unmask(0).resample('bilinear') .convolve(ee.Kernel.gaussian(45, 30, 'meters')) .reduceNeighborhood(ee.Reducer.mean(), ee.Kernel.circle(45, 'meters')) .rename('occurrence') waterOccurrence = waterOccurrence.updateMask(waterOccurrence.unitScale(0, 0.02)) var waterOccurrenceMin = 0.02 var palette = ["2171b5", "4292c6", "6baed6", "9ecae1", "c6dbef", "deebf7", "f7fbff"] var rgb = ee.Image(1).subtract(waterOccurrence) .mask(waterOccurrence.unitScale(waterOccurrenceMin, waterOccurrenceMin + 0.2)) .visualize({ palette: palette, min: 0, max: 1 }) if(useWaterIsolines.indexOf('Isolines') != -1) { // add thin isolines var paletteIsolines = ['black']; var isolinesOpacity = 0.5; var min = 0 var max = 0.9 var levels = ee.List.sequence(min, max, 0.1).add(0.99); var isolines = utils.getIsolines(waterOccurrence, levels); rgb = rgb.blend(isolines.mosaic().visualize({min: min, max: max, palette: paletteIsolines, opacity: isolinesOpacity })) } var weight = 0.8 // wegith of Hillshade vs RGB intensity (0 - flat, 1 - HS) var exaggeration = 300 // vertical exaggeration var azimuth = 315 // Sun azimuth var zenith = 25 // Sun elevation var brightness = 0.2 // 0 - default var contrast = 0.1 // 0 - default var saturation = 0.5 // 1 - default var castShadows = false var rgb1 = utils.hillshadeRGB(rgb, waterOccurrence, weight, exaggeration, azimuth, zenith, contrast, brightness, saturation, castShadows) var rgb2 = utils.hillshadeRGB(rgb, waterOccurrence, weight, exaggeration, azimuth - 90, zenith + 30, contrast, brightness, saturation, castShadows) var rgb3 = utils.hillshadeRGB(rgb, waterOccurrence, weight, exaggeration, azimuth - 120, zenith + 25, contrast, brightness, saturation, castShadows) if(useWaterIsolines.indexOf('Hillshade') != -1) { var rgb = rgb1.multiply(0.6).add(rgb2.multiply(0.2)).add(rgb3.multiply(0.2)) } let land = ee.Image("users/gena/land_polygons_image").mask() return rgb.updateMask(rgb.mask().multiply(land)) }35:[] 2f:{"title":"Global Water Watch","cells":[{"id":0,"value":"# Global Water Watch\nReservoirs, rivers, and water raster streamed from Google Earth Engine as XYZ tiles\n\nUse Right mouse click and drag to rotate and tilt the map","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"container = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"Satellite layer visibility:","pinned":false,"hidden":false,"mode":"md"},{"id":407,"value":"viewof satelliteVisibility = Inputs.checkbox([\"Satellite\"], { value: [\"Satellite\"] })","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"Terrain exaggeration:","pinned":false,"hidden":false,"mode":"md"},{"id":519,"value":"viewof terrainExaggeration = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"Rotation speed:","pinned":false,"hidden":false,"mode":"md"},{"id":173,"value":"viewof rotationSpeed = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"Water occurrence opacity:","pinned":false,"hidden":false,"mode":"md"},{"id":68,"value":"viewof layerOpacity = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"Show elevation isolines and labels:","pinned":false,"hidden":false,"mode":"md"},{"id":582,"value":"viewof useElevationIsolines = Inputs.checkbox([\"Isolines\"], { value: ['Isolines'] })","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"Show water occurrence isolines (bathymetry):","pinned":false,"hidden":false,"mode":"md"},{"id":465,"value":"viewof useWaterIsolines = Inputs.checkbox([\"Isolines\", \"Hillshade\"], { value: ['Isolines'] })","pinned":false,"hidden":false,"mode":"ojs"},{"id":497,"value":"Debug:","pinned":false,"hidden":false,"mode":"md"},{"id":490,"value":"viewof debug = Inputs.checkbox([\"Wireframe\", \"Tile Boundaries\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"#### Debug","pinned":false,"hidden":false,"mode":"md"},{"id":505,"value":"{\n map.showTerrainWireframe = debug.indexOf('Wireframe') != -1;\n map.showTileBoundaries = debug.indexOf('Tile Boundaries') != -1;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"#### Rotation","pinned":false,"hidden":false,"mode":"md"},{"id":158,"value":"function* animate() {\n while (true) {\n yield Promises.tick(30, 0.005 * rotationSpeed);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":345,"value":"map.on('mousedown', () => {\n map.isMouseDown = true;\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":350,"value":"map.on('mouseup', () => {\n map.isMouseDown = false;\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":816,"value":"keys = {\n return {\n up: false,\n down: false,\n left: false,\n right: false,\n shift: false,\n space: false\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":807,"value":"{\n map.getCanvas().focus();\n\n map.getCanvas().addEventListener('keydown', (e) => {\n e.preventDefault();\n console.log(e.which)\n if (e.which === 87) { \n keys.up = true\n } else if (e.which === 83) {\n keys.down = true\n } else if (e.which === 68) {\n keys.left = true\n } else if (e.which === 65) {\n keys.right = true\n } else if (e.which === 16) {\n keys.shift = true\n } else if (e.which === 32) {\n keys.space = true\n }\n }, true);\n\n map.getCanvas().addEventListener('keyup', (e) => {\n e.preventDefault();\n if (e.which === 87) { \n keys.up = false\n } else if (e.which === 83) {\n keys.down = false\n } else if (e.which === 68) {\n keys.left = false\n } else if (e.which === 65) {\n keys.right = false\n } else if (e.which === 16) {\n keys.shift = false\n } else if (e.which === 32) {\n keys.space = false\n }\n }, true); \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":522,"value":"#### Terrain exaggeration","pinned":false,"hidden":false,"mode":"md"},{"id":517,"value":"{\n map.setTerrain({ \n 'source': 'mapbox://mapbox.mapbox-terrain-dem-v1', \n 'exaggeration': terrainExaggeration\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":418,"value":"#### Satellite layer visibility","pinned":false,"hidden":false,"mode":"md"},{"id":422,"value":"{\n if(satelliteVisibility.length > 0) {\n map.setLayoutProperty('satellite2', 'visibility', 'visible');\n } else {\n map.setLayoutProperty('satellite2', 'visibility', 'none');\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":576,"value":"{\n if(useElevationIsolines.indexOf('Isolines') != -1) {\n map.setLayoutProperty('contour-line', 'visibility', 'visible');\n map.setLayoutProperty('contour-label', 'visibility', 'visible');\n } else {\n map.setLayoutProperty('contour-line', 'visibility', 'none');\n map.setLayoutProperty('contour-label', 'visibility', 'none');\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":261,"value":"#### Water layer opacity","pinned":false,"hidden":false,"mode":"md"},{"id":77,"value":"opacity = {\n let l = map.getLayer('ee-water-layer')\n \n if (l) {\n map.setPaintProperty('ee-water-layer', 'raster-opacity', layerOpacity / 100 );\n } \n\n map.on('zoom', () => {\n if (map.getZoom() < 7) {\n map.setPaintProperty('ee-water-layer', 'raster-opacity', 0);\n map.setPaintProperty('ee-rivers-ne-layer', 'raster-opacity', 0.5);\n map.setPaintProperty('ee-rivers-layer', 'raster-opacity', 0);\n\n map.setProjection('naturalEarth');\n } else {\n map.setPaintProperty('ee-water-layer', 'raster-opacity', layerOpacity / 100 );\n map.setPaintProperty('ee-rivers-ne-layer', 'raster-opacity', 0);\n map.setPaintProperty('ee-rivers-layer', 'raster-opacity', 1);\n\n map.setProjection('mercator');\n }\n }); \n \n return layerOpacity\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"#### Setup Mapbox map using predefined style (waterlines and reservoirs)","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"#### Google Earth Engine code to render water occurrence","pinned":false,"hidden":false,"mode":"md"},{"id":595,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":448,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"#### Add Google Earth Engine raster tile layer as a mapbox layer","pinned":false,"hidden":false,"mode":"md"},{"id":702,"value":"// imageTerrain = {\n// let dem = ee.Image(\"USGS/SRTMGL1_003\").resample('bilinear') \n// let rgb = dem.visualize({ palette: ['black'] })\n \n// var weight = 0.6 // wegith of Hillshade vs RGB intensity (0 - flat, 1 - HS)\n// var exaggeration = 2 // vertical exaggeration\n// var azimuth = 315 // Sun azimuth\n// var zenith = 15 // Sun elevation\n// var brightness = 0.2 // 0 - default\n// var contrast = 0 // 0 - default\n// var saturation = 0.7 // 1 - default\n// var castShadows = true\n\n// return utils.hillshadeRGB(rgb, dem, weight, exaggeration, azimuth, zenith, contrast, brightness, saturation, castShadows).updateMask(0.6)\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":604,"value":"// mapboxLayerTerrain = {\n// let l = map.getLayer('ee-terrain-layer')\n \n// if (l) {\n// // make sure it works on code change, a workaround suggested by @siggyf\n// map.removeLayer('ee-terrain-layer')\n// map.removeSource('ee-terrain-layer')\n// }\n \n// l = map.addLayer({\n// id: 'ee-terrain-layer',\n// type: 'raster',\n// source: {\n// type: 'raster',\n// tiles: [ imageTerrain.getMap().urlFormat ],\n// tileSize: 256\n// },\n// paint: {}\n// })\n\n// map.moveLayer('ee-terrain-layer', 'satellite2');\n\n// return l\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":715,"value":"mapboxLayerRiversLarge = {\n let l = map.getLayer('ee-rivers-ne-layer')\n \n if (l) {\n map.removeLayer('ee-rivers-ne-layer')\n map.removeSource('ee-rivers-ne-layer')\n }\n\n let path = 'https://storage.googleapis.com/reservoir-monitor/map-tiles/rivers-ne/{z}/{x}/{y}' \n \n l = map.addLayer({\n id: 'ee-rivers-ne-layer',\n type: 'raster',\n source: {\n type: 'raster',\n tiles: [ path ],\n tileSize: 256\n },\n paint: {}\n })\n\n return l\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":705,"value":"mapboxLayerRivers = {\n let l = map.getLayer('ee-rivers-layer')\n \n if (l) {\n map.removeLayer('ee-rivers-layer')\n map.removeSource('ee-rivers-layer')\n }\n\n let path = 'https://storage.googleapis.com/reservoir-monitor/map-tiles-z12/rivers-large-gte1/{z}/{x}/{y}' \n \n l = map.addLayer({\n id: 'ee-rivers-layer',\n type: 'raster',\n source: {\n type: 'raster',\n tiles: [ path ],\n tileSize: 256\n },\n paint: {}\n })\n\n return l\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"mapboxLayerWater = {\n let l = map.getLayer('ee-water-layer')\n \n if (l) {\n map.removeLayer('ee-water-layer')\n map.removeSource('ee-water-layer')\n }\n \n l = map.addLayer({\n id: 'ee-water-layer',\n type: 'raster',\n source: {\n type: 'raster',\n tiles: [ imageWater.getMap().urlFormat ],\n tileSize: 256\n },\n paint: {}\n })\n\n return l\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"options = {\n return {\n center: [map.getCenter().lng, map.getCenter().lat],\n bearing: map.getBearing(),\n pitch: map.getPitch(),\n zoom: map.getZoom()\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"import {ee} from '@gena/ee'","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"mapboxgl = require('mapbox-gl');","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"If you want to help Ukraine, see options following this link:\n\n

","pinned":false,"hidden":false,"mode":"md"}],"files":"$W35","stdlib":"1","titling":"auto"}