Widget for Sentinel-2 date filtering

[MichaelBell]

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

[JeffreyThompson2]

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.

[MeganEngel]

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!