30:T2192,{ //-------------------------------------------------------------------------- // // Setup Map and View // //-------------------------------------------------------------------------- const minScale = 5*72223.819286; const featuresLayer = new FeatureLayer({ portalItem: { id: "dfe2d606134546f5a712e689d76540ac" }, definitionExpression: "CNSTRCT_YR > 0", title: "Building Footprints", minScale: minScale, effect: "bloom(2.5 0 0.5)" }); const satelliteLayer = new WebTileLayer({ urlTemplate: imageSentinel.getMap().urlFormat .replace('{z}', '{level}') .replace('{x}', '{col}') .replace('{y}', '{row}') }); const map = new Map_({ basemap: { portalItem: { id: "4f2e99ba65e34bb8af49733d9778fb8e" } }, layers: [satelliteLayer, featuresLayer] }); const view = new MapView({ map: map, container: "viewDiv", center: [-73.967569, 40.727724], zoom: 12, constraints: { snapToZoom: false, minScale: minScale }, // This ensures that when going fullscreen // The top left corner of the view extent // stays aligned with the top left corner // of the view's container resizeAlign: "top-left" }); //-------------------------------------------------------------------------- // // Setup UI // //-------------------------------------------------------------------------- const applicationDiv = document.getElementById("applicationDiv"); const sliderValue = document.getElementById("sliderValue"); const playButton = document.getElementById("playButton"); const titleDiv = document.getElementById("titleDiv"); let animation = null; const slider = new Slider({ container: "slider", min: 1880, max: 2017, values: [ 1984 ], step: 1, visibleElements: { rangeLabels: true } }); // When user drags the slider: // - stops the animation // - set the visualized year to the slider one. function inputHandler(event) { stopAnimation(); setYear(event.value); } slider.on("thumb-drag", inputHandler); // Toggle animation on/off when user // clicks on the play button playButton.addEventListener("click", () => { if (playButton.classList.contains("toggled")) { stopAnimation(); } else { startAnimation(); } }); view.ui.empty("top-left"); view.ui.add(titleDiv, "top-left"); view.ui.add( new Home({ view: view }), "top-left" ); view.ui.add( new Legend({ view: view }), "bottom-left" ) // When the layerview is available, setup hovering interactivity view.whenLayerView(featuresLayer).then(setupHoverTooltip); // Starts the application by visualizing year 1984 setYear(1984); //-------------------------------------------------------------------------- // // Methods // //-------------------------------------------------------------------------- /** * Sets the current visualized construction year. */ function setYear(value) { sliderValue.innerHTML = Math.floor(value); slider.viewModel.setValue(0, value); featuresLayer.renderer = createRenderer(value); } /** * Returns a renderer with a color visual variable driven by the input * year. The selected year will always render buildings built in that year * with a light blue color. Buildings built 20+ years before the indicated * year are visualized with a pink color. Buildings built within that * 20-year time frame are assigned a color interpolated between blue and pink. */ function createRenderer(year) { const opacityStops = [ { opacity: 1, value: year }, { opacity: 0, value: year + 1 } ]; return { type: "simple", symbol: { type: "simple-fill", color: "rgb(0, 0, 0)", outline: null }, visualVariables: [ { type: "opacity", field: "CNSTRCT_YR", stops: opacityStops, legendOptions: { showLegend: false } }, { type: "color", field: "CNSTRCT_YR", legendOptions: { title: "Built:" }, stops: [ { value: year, color: "#0ff", label: "in " + Math.floor(year) }, { value: year - 10, color: "#f0f", label: "in " + (Math.floor(year) - 20) }, { value: year - 50, color: "#404", label: "before " + (Math.floor(year) - 50) } ] } ] }; } /** * Sets up a moving tooltip that displays * the construction year of the hovered building. */ function setupHoverTooltip(layerview) { // fix legend width let elements = document.getElementsByClassName('esri-legend') elements[0].style['width'] = '150px' // setup tooltip let highlight; const tooltip = createTooltip(); const hitTest = promiseUtils.debounce((event) => { return view.hitTest(event) .then((hit) => { const results = hit.results.filter((result) => { return result.graphic.layer === featuresLayer; }); if (!results.length) { return null; } return { graphic: results[0].graphic, screenPoint: hit.screenPoint }; }); }); view.on("pointer-move", (event) => { return hitTest(event) .then((hit) => { // remove current highlighted feature if (highlight) { highlight.remove(); highlight = null; } // highlight the hovered feature // or hide the tooltip if (hit) { const graphic = hit.graphic; const screenPoint = hit.screenPoint; highlight = layerview.highlight(graphic); tooltip.show(screenPoint, "Built in " + graphic.getAttribute("CNSTRCT_YR")); } else { tooltip.hide(); } }, () => {}); }); } /** * Starts the animation that cycle * through the construction years. */ function startAnimation() { stopAnimation(); animation = animate(slider.values[0]); playButton.classList.add("toggled"); } /** * Stops the animations */ function stopAnimation() { if (!animation) { return; } animation.remove(); animation = null; playButton.classList.remove("toggled"); } /** * Animates the color visual variable continously */ function animate(startValue) { let animating = true; let value = startValue; const frame = (timestamp) => { if (!animating) { return; } value += 0.5; if (value > 2017) { value = 1880; } setYear(value); // Update at 30fps setTimeout(() => { requestAnimationFrame(frame); }, 1000 / 30); }; frame(); return { remove: () => { animating = false; } }; } /** * Creates a tooltip to display a the construction year of a building. */ function createTooltip() { const tooltip = document.createElement("div"); const style = tooltip.style; tooltip.setAttribute("role", "tooltip"); tooltip.classList.add("tooltip"); const textElement = document.createElement("div"); textElement.classList.add("esri-widget"); tooltip.appendChild(textElement); view.container.appendChild(tooltip); let x = 0; let y = 0; let targetX = 0; let targetY = 0; let visible = false; // move the tooltip progressively function move() { x += (targetX - x) * 0.1; y += (targetY - y) * 0.1; if (Math.abs(targetX - x) < 1 && Math.abs(targetY - y) < 1) { x = targetX; y = targetY; } else { requestAnimationFrame(move); } style.transform = "translate3d(" + Math.round(x) + "px," + Math.round(y) + "px, 0)"; } return { show: (point, text) => { if (!visible) { x = point.x; y = point.y; } targetX = point.x; targetY = point.y; style.opacity = 1; visible = true; textElement.innerHTML = text; move(); }, hide: () => { style.opacity = 0; visible = false; } }; } }31:T684, 32:[] 2e:{"title":"","cells":[{"id":0,"value":"#### Buildings by year and Sentinel-2 2024 composite image","pinned":false,"hidden":false,"mode":"md"},{"id":156,"value":"Combining ESRI JavaScript controls with Google Earth Engine image layers.\n\nOriginal code: https://developers.arcgis.com/javascript/latest/sample-code/visualization-vv-color-animate/","pinned":false,"hidden":false,"mode":"md"},{"id":64,"value":"viewof container = {\n let container = html`

\n \n

`;\n\n yield container;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":183,"value":"Composite image: https://code.earthengine.google.com/230bea9ab799c5a4c575bade81c95b86","pinned":false,"hidden":false,"mode":"md"},{"id":118,"value":"imageSentinel = {\n let bands = ['B4', 'B3', 'B2', 'B12', 'B8']\n \n let image = ee.ImageCollection(\"COPERNICUS/S2_SR_HARMONIZED\")\n .select(bands)\n .filterDate('2024-05-01', '2024-10-01')\n .map(function(i) { return i.resample('bilinear') })\n .reduce(ee.Reducer.percentile([25]))\n .rename(bands)\n \n return image.visualize({ min: 100, max: 3000, bands: ['B4', 'B3', 'B2'] })\n .blend(image.visualize({ min: 100, max: 3000, bands: ['B12', 'B8', 'B4'], opacity: 0.3 }))\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"$31","pinned":false,"hidden":false,"mode":"html"},{"id":120,"value":"import {ee} from '@gena/ee'","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"MapView = (await import(\"https://js.arcgis.com/4.31/@arcgis/core/views/MapView.js\")).default","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"Map_ = (await import(\"https://js.arcgis.com/4.31/@arcgis/core/Map.js\")).default","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"FeatureLayer = (await import(\"https://js.arcgis.com/4.31/@arcgis/core/layers/FeatureLayer.js\")).default","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"WebTileLayer = (await import(\"https://js.arcgis.com/4.31/@arcgis/core/layers/WebTileLayer.js\")).default","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"promiseUtils = (await import(\"https://js.arcgis.com/4.31/@arcgis/core/core/promiseUtils.js\")).default","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"Legend = (await import(\"https://js.arcgis.com/4.31/@arcgis/core/widgets/Legend.js\")).default","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"Home = (await import(\"https://js.arcgis.com/4.31/@arcgis/core/widgets/Home.js\")).default","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"Slider = (await import(\"https://js.arcgis.com/4.31/@arcgis/core/widgets/Slider.js\")).default","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"Fullscreen = (await import(\"https://js.arcgis.com/4.31/@arcgis/core/widgets/Fullscreen.js\")).default","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"document.head.appendChild(html``);","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}