Widget for Sentinel-2 date filtering

MichaelBell — Mon, 24 Jul 2023 05:56:33 GMT

I'm creating a new project in ArcGIS Experience Builder and one of the main things it needs is Sentinel-2 integration. We need not only the "latest" imagery (or whatever is loaded by default), but also the ability to manually select the date that is shown.

Currently, I've written a widget that I'm just using for debugging purposes. The webmap that is shown has a Sentinel-2 image service (from ESRI, using my ArcGIS Online credentials). The Sentinel-2 view itself can be found at https://www.arcgis.com/home/item.html?id=fd61b9e0c69c4e14bebd50a9a968348c

However, ESRI has yet to implement support for image services in Experience Builder. Normally a layer like that would be registered as "time-enabled" and be able to have a timeline widget associated with it, sorting everything out without any code whatsoever. Unfortunately, we don't have that luxury, and I'm trying to do it in code.

This is my widget's runtime code so far, trying to pick up the data. It should be noted that field 9 is the "acquisitionDate" field, which is the one I would want to alter:

import { React, AllWidgetProps } from 'jimu-core' import { JimuMapViewComponent, JimuMapView } from 'jimu-arcgis' const { useState } = React const Widget = (props: AllWidgetProps<any>) => { const [jimuMapView, setJimuMapView] = useState<JimuMapView>() const activeViewChangeHandler = (jmv: JimuMapView) => { if (jmv) { setJimuMapView(jmv) } } const formSubmit = (evt) => { evt.preventDefault() console.log('Some stuff here') console.log(jimuMapView.jimuLayerViews) console.log(jimuMapView.view.map.findLayerById("Sentinel2_2968").visible) console.log(jimuMapView.view.map.findLayerById("Sentinel2_2968")) console.log(jimuMapView.view.map.findLayerById("Sentinel2_2968").fields[9]) jimuMapView.view.map.findLayerById("Sentinel2_2968").visible = true } return ( <div className="widget-starter jimu-widget"> { props.useMapWidgetIds && props.useMapWidgetIds.length === 1 && ( <JimuMapViewComponent useMapWidgetId={props.useMapWidgetIds?.[0]} onActiveViewChange={activeViewChangeHandler} /> ) } <form onSubmit={formSubmit}> <div> <button>Debug</button> </div> </form> </div> ) } export default Widget

Re: Widget for Sentinel-2 date filtering

JeffreyThompson2 — Mon, 24 Jul 2023 12:27:40 GMT

It looks like you aren't getting jimuMapView from the MapViewManager. The syntax I usually use is:

const viewManager = MapViewManager.getInstance() const mapView = viewManager.getJimuMapViewById(viewManager.getAllJimuMapViewIds()[0]) const [jimuMapView, setJimuMapView] = useState<JimuMapView>(mapView)

You will also need to add MapViewManager to your imports on line 2.

Re: Widget for Sentinel-2 date filtering

MeganEngel — Tue, 19 Sep 2023 13:21:13 GMT

I have added this to the idea board here.

Having a built in widget in EB for time enabled imagery services would be so helpful!

topic Widget for Sentinel-2 date filtering in ArcGIS Experience Builder Questions

Widget for Sentinel-2 date filtering

Re: Widget for Sentinel-2 date filtering

Re: Widget for Sentinel-2 date filtering