Custom Widget - Update datasource of map widget with jimuMapView

BrittaneyHarkness — Tue, 26 Jul 2022 15:50:39 GMT

Hi,

I'm trying to modify the web-map-swap custom widget created by @GavinR : GitHub - gavinr/web-map-swap-experience-builder: Sample widget experimenting how to swap the webmap dynamically in a single Experience Builder map widget to accept a web map datasource rather than an item portal id.

I've updated the settings for the widget to accept mutiple web maps and datasources and I would like the user to be able to choose those datasources from a drop down to update the map widget.

/** @jsx jsx */ import { AllWidgetProps, React, jsx } from 'jimu-core' import { IMConfig } from '../config' import defaultMessages from './translations/default' import { MapViewManager, JimuMapViewComponent, JimuMapView } from 'jimu-arcgis' import WebMap from 'esri/WebMap' import MapView from "esri/views/MapView"; import { WidgetPlaceholder } from 'jimu-ui' import { _SettingRow } from 'jimu-ui/advanced/lib/setting-components/components/layout/row' const starIcon = require('jimu-ui/lib/icons/star.svg') const { useState } = React export default function Widget (props: AllWidgetProps<IMConfig>) { const [jimuMapView, setJimuMapView] = useState<JimuMapView>() const mvManager: MapViewManager = MapViewManager.getInstance(); const selectChangeHandler = (evt) => { if (jimuMapView) { if (evt.target.value !== '') { console.log("This is the starting jimMapView") console.log(jimuMapView) console.log("This is the starting jimMapView") // const options: __esri.MapViewProperties = { // map: new WebMap(), // }; // jimuMapView.view.map = mvManager.createJimuMapView({ // mapWidgetId: props.useMapWidgetIds?.[0], // view: new MapView(options), // dataSourceId: evt.target.value, // isActive: true // }).then(jv => { // //setJimuMapView(jv) // return jv.view.map // }) console.log(jimuMapView) //try set map view jimuMapView.view.map = new WebMap({ // portalItem: { // // autocasts as new PortalItem() // id: evt.target.value // } }) } else { // set to default (todo) } } } let content if (props.useDataSources && props.useDataSources.length > 0) { content = <p className="shadow-lg m-3 p-3 bg-white rounded"> <label style={{ maxWidth: '100%' }}> {defaultMessages.webMap}:<br /> <select onChange={(evt) => { selectChangeHandler(evt) }} style={{ maxWidth: '100%' }} > {/* <option value=""></option> {props.config.webMapIds.map((webMapId) => { return <option value={webMapId}>{webMapId}</option> */} <option selected disabled> Choose one </option> {props.useDataSources.map((datasource, index) => { return <option value={datasource.dataSourceId}>{datasource.dataSourceId}</option> })} </select> </label> <JimuMapViewComponent useMapWidgetId={props.useMapWidgetIds?.[0]} onActiveViewChange={(jmv: JimuMapView) => { setJimuMapView(jmv) }} /> </p> } else { content = <WidgetPlaceholder icon={starIcon} widgetId={props.id} message={defaultMessages.placeholderMessage} /> } return ( <div className="widget-view-layers-toggle jimu-widget" style={{ overflow: 'auto' }} > {content} </div> ) }

topic Custom Widget - Update datasource of map widget with jimuMapView in ArcGIS Experience Builder Questions

Custom Widget - Update datasource of map widget with jimuMapView