topic Re: Access layer features and data in Experience Builder Widget Development in ArcGIS Experience Builder Questions

Access layer features and data in Experience Builder Widget Development

diplonics — Thu, 02 Nov 2023 17:01:28 GMT

Long background in Openlayers but taking on the Experience Builder Widget development challenge and so far okay. However can't fathom how to access a layers data after its added to the map. Could someone point me to a tutorial or resource on what I thought I could easily where I want to generate a UI element containing some of the layer attribute data after it loads. So I need to get the data and loop through it. I can get the data fine and display it on the map but can't seem to access it through the layer, view or layerView objects.

Code currently using to get the data is as follows:

Re: Access layer features and data in Experience Builder Widget Development

JeffreyThompson2 — Thu, 02 Nov 2023 18:05:23 GMT

There are two issues with your query.

You need to define your query so it knows what you are looking for.
You need to create a .then() statement, so that Javascript will wait for the query to run before moving on to the next lines of code.

Something like this example block.

view.on("pointer-move", function(event){ let query = featureLayer.createQuery(); query.geometry = view.toMap(event); // the point location of the pointer query.distance = 2; query.units = "miles"; query.spatialRelationship = "intersects"; // this is the default query.returnGeometry = true; query.outFields = [ "POPULATION" ]; featureLayerView.queryFeatures(query) .then(function(response){ // returns a feature set with features containing the // POPULATION attribute and each feature's geometry }); });

https://developers.arcgis.com/javascript/latest/api-reference/esri-views-layers-GeoJSONLayerView.html#queryFeatures

Re: Access layer features and data in Experience Builder Widget Development

diplonics — Tue, 07 Nov 2023 17:34:45 GMT

Thanks for the feedback, appreciate it, however I'm still struggling to grasp scope and get your example plugged into my code.
Below is my widget.tsx which may not be written pretty but works for my testing.
In my custom widget when the button is pressed the selected map view extent is sent to an api server which returns GeoJSON that gets added to the map and the featuretable.
2 days now and I still can't fathom how to capture in the widget when the new layer is selected in the map that I can get the selected features data and show it in the lineDetailsTab.
I've tried plugging in your code but scope is proving confusing to me as I don't know where to get the featurelayerview from and the view.toMap scope is wrong as it always return undefined!!

I have also being trying to get this approach integrated:
Solved: Get Selected Features in Custom Widget - Esri Community

but I don't understand how to capture the datasource dynamically, as my geojson data source doesn't exist until the widget is run.
So 2 different directions being worked on but maybe I'm just grasping things wrong, when I add new geojson data to the mapview I want my widget to pick up when a feature is selected from that layer so could really do with another pointer on which approach is best to take?

import { React, FormattedMessage, defaultMessages as jimuCoreDefaultMessage, type AllWidgetProps, css, jsx, styled } from 'jimu-core'; import { type IMConfig } from '../config'; import { Tabs, Tab, Button } from 'jimu-ui'; import { loadArcGISJSAPIModules, type JimuMapView, JimuMapViewComponent } from 'jimu-arcgis'; import * as projection from "@arcgis/core/geometry/projection.js"; import SpatialReference from "@arcgis/core/geometry/SpatialReference.js"; import esriRequest from "@arcgis/core/request.js"; import FeatureTable from "@arcgis/core/widgets/FeatureTable.js"; import LayerView from "@arcgis/core/views/layers/LayerView.js"; import defaultMessages from './translations/default'; interface IState { bbox: string latitude: string longitude: string scale: number zoom: number mapViewReady: boolean featureServiceUrlInput: string jimuMapView: JimuMapView linesLayer: geojson } projection.load(); export default class Widget extends React.PureComponent<AllWidgetProps<IMConfig>, IState> { GeoJSONLayer: typeof __esri.GeoJSONLayer SpatialReference: typeof __esri.SpatialReference state = { bbox: '', latitude: '', longitude: '', zoom: 0, scale: 0, mapViewReady: false, featureServiceUrlInput: '', jimuMapView: null, linesLayer: null } activeViewChangeHandler = (jmv: JimuMapView) => { if (jmv){ this.setState({ jimuMapView: jmv }) /* When the extent moves, update the state with all the updated values.*/ jmv.view.watch('extent', evt => { const cs1 = new SpatialReference({ wkid: 4326 //WGS_84 }); /* EXTENT/BBOX conversion to Geometry Polygon: BBOX(xMin,yMin,xMax,yMax) POLYGON((xMin yMin,xMin yMax,xMax yMax,xMax yMin,xMin yMin)) */ const extentClone = jmv.view.extent.clone(); const newExtent = projection.project(extentClone, cs1); //console.log(JSON.stringify(newExtent.toJSON())); const mapBBOX = "POLYGON((" + newExtent.xmin.toFixed(4) + " " + newExtent.ymin.toFixed(4) + "," + newExtent.xmin.toFixed(4) + " " + newExtent.ymax.toFixed(4) + "," + newExtent.xmax.toFixed(4) + " " + newExtent.ymax.toFixed(4) + "," + newExtent.xmax.toFixed(4) + " " + newExtent.ymin.toFixed(4) + "," + newExtent.xmin.toFixed(4) + " " + newExtent.ymin.toFixed(4) + "))"; this.setState({ bbox: mapBBOX, latitude: jmv.view.center.latitude.toFixed(3), longitude: jmv.view.center.longitude.toFixed(3), scale: Math.round(jmv.view.scale * 1) / 1, zoom: jmv.view.zoom, mapViewReady: true }) }) } } onLineListClick = (jmv: JimuMapView) => { const linePopupTemplate = { title: "Line details", content:[{ type: "fields", fieldInfos:[ {fieldName: "date_time", label: "Date:"}, {fieldName: "title", label: "Title:"}, {fieldName: "length", label: "Distance:"}, {fieldName: "user_name", label: "Owner:"}, {fieldName: "description", label: "Details:"}, ] }] } const requestURL = "https://api.example.com/route/api/" // Lazy-loading (only load if/when needed) the ArcGIS API for JavaScript modules // that we need - only once the "Get Lines" button is pressed. loadArcGISJSAPIModules([ 'esri/layers/GeoJSONLayer', 'esri/geometry/SpatialReference' ]).then((modules) => { [this.GeoJSONLayer, this.SpatialReference] = modules; if(this.state.linesLayer === null){ const layer = new this.GeoJSONLayer({ url: requestURL, customParameters: { auth: this.props.config.apiToken, request: this.state.bbox, type: 'geometry' }, title: "API Lines", renderer: { type: "simple", symbol: { type: "simple-line", width: 2, color: "blue" } }, popupTemplate: linePopupTemplate }); this.state.jimuMapView.view.map.add(layer); this.setState({tracksLayer: layer}, () => { //console.log("In Set state."); //console.log(this.state); }); // After the layer is created, create the feature table in the UI layer.on('layerview-create', (event) => { // Create the feature table const featureTable = new FeatureTable({ view: this.state.jimuMapView.view, // Required for feature highlight to work layer: layer, visibleElements: { // Autocast to VisibleElements menuItems: { clearSelection: true, refreshData: false, toggleColumns: true, selectedRecordsShowAllToggle: true, selectedRecordsShowSelectedToggle: true, zoomToSelection: true } }, tableTemplate: { // Autocast to TableTemplate columnTemplates: [ // Takes an array of FieldColumnTemplate and GroupColumnTemplate { // Autocast to FieldColumnTemplate. type: "field", fieldName: "title", label: "Title", direction: "asc" }, { type: "field", fieldName: "date_time", label: "Date" }, { type: "field", fieldName: "description", label: "Description" } ] }, container: document.getElementById("lineList") }); }) }else{ this.state.tracksLayer.customParameters.request = this.state.bbox; this.state.tracksLayer.refresh(); } }) } render () { const StyledButton = styled.button` color: white; background-color: #1074B2; transition: 0.15s ease-in all; &:hover { background-color: #579EC8; } ` return <div className="widget-demo jimu-widget" style={{ overflow: 'auto' }}> <Tabs> <Tab id="listTab" title="tab1"> <StyledButton onClick={this.onLineListClick}>Get Linework</StyledButton> {this.props.hasOwnProperty('useMapWidgetIds') && this.props.useMapWidgetIds && this.props.useMapWidgetIds.length === 1 && (<JimuMapViewComponent useMapWidgetId={this.props.useMapWidgetIds?.[0]} onActiveViewChange={this.activeViewChangeHandler}/>) } <div id="lineList" style={{ width: '100%', height: '600px', overflow: 'hidden' }}> {this.props.intl.formatMessage({ id: '_widgetLabel', defaultMessage: defaultMessages._widgetLabel })} </div> </Tab> <Tab id="lineDetailsTab" title="tab2"> <div id="lineDetailsContainer" style={{ width: '100%', height: '600px', overflow: 'hidden' }}> {lineDetails} </div> </Tab> </Tabs> </div> } }

Re: Access layer features and data in Experience Builder Widget Development

JeffreyThompson2 — Tue, 07 Nov 2023 18:47:47 GMT

I don't think this current code is salvageable. It is time to start over. I could follow your code much better and this whole process should be easier if you could rewrite it in function based React.

So if I understand your goal, you want the user to click a button. Then the current map extents would be captured and sent to an API which would send back a GeoJSON of data that you would then add to your map.

I don't know how to do all of that, but I am willing to try to help you through it.

Could you instead load the GeoJSON layer first maybe even include it in your webmap and then query the data in your extent area? This will likely be a much simpler task.

I think you are making this more complicated than it needs to be. Here is what a add/remove layer widget looks like in function based React. Maybe you can use it as a base for your widget.

import { React, AllWidgetProps } from 'jimu-core' import { JimuMapViewComponent, JimuMapView } from 'jimu-arcgis' import FeatureLayer from 'esri/layers/FeatureLayer' const { useState } = React const Widget = (props: AllWidgetProps<any>) => { const [jimuMapView, setJimuMapView] = useState<JimuMapView>() const item = new FeatureLayer({ url: 'URL1' }) const [layer const activeViewChangeHandler = (jmv: JimuMapView) => { if (jmv) { setJimuMapView(jmv) } } const formSubmit = (evt) => { evt.preventDefault() jimuMapView.view.map.add(layer) } const formSubmit3 = (evt) => { evt.preventDefault() jimuMapView.view.map.remove(layer) } 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>Add Layer</button> </div> </form> <form onSubmit={formSubmit3}> <div> <button>Delete</button> </div> </form> </div> ) } export default Widget

Re: Access layer features and data in Experience Builder Widget Development

diplonics — Wed, 08 Nov 2023 12:48:41 GMT

Thanks again here for your input, helpful pointers and offer. Agree the current code is a mess but generally learning my way into stuff is messy but once I grasp the structures it all gets cleaned up. So yep, your example of functional react is much nicer and helpful as a first step, so I'll revisit my code and build to this style today.

"So if I understand your goal, you want the user to click a button. Then the current map extents would be captured and sent to an API which would send back a GeoJSON of data that you would then add to your map." Yes, currently the above code does this fine, I just can't get an on-map click event to report back to the widget what line feature was clicked on.

However,I think your point on the bigger picture of my data flow is very relevant too, so maybe a solution on pre-defining the data source in the widget settings would work better. Maybe the API data source gets added, in the background, as the widget loads and doesn't have to wait on the button click. The button click just views the data and filters it based on extent as in requirements below.

At the minute I only require the user to set a 'Select Map Widget' onto which my widget should draw/interact.

General requirements though are:

The layer shouldn't load/view unless the user turns it on.
It should only load data (lines) relevant to the map extents.
It is GeoJson data coming from an external API.
If the layer is loaded and a feature selected it should load into my widget the details of the feature selected but only for my geojson data not for any other layer a user might have setup or added.
If a user has built an EB dashboard with a standard set of widgets, that link and filter other data sources, then, that should all work as EB currently does. If my widget is included it does not need to interact in this way. Its use-case is to load a specific data source for a specific extent and hold that view regardless of what the rest of the dashboard interaction does. So if a user pans the map my widget will not reload or change its data dynamics, unless the user clicks the button to reload to the new extent.

Hopefully this helpful but as I say I'll rewrite functionally, post and see what you think.

Thanks again.

Re: Access layer features and data in Experience Builder Widget Development

JeffreyThompson2 — Wed, 08 Nov 2023 13:17:33 GMT

If the only piece you are missing is finding what the user clicked on, the mapView.hitTest() method will return a list of all the graphics at a single point.

https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#hitTest

Something like this example should do what you are looking for.

// get screenpoint from view's click event view.on("click", function(event){ // Search for all features only on included layers at the clicked location view.hitTest(event, {include: featureLayer}).then(function(response){ // if features are returned from the featureLayer, do something with results if (response.results.length){ // do something console.log(response.results.length, "features returned"); } }) });

Re: Access layer features and data in Experience Builder Widget Development

diplonics — Thu, 09 Nov 2023 13:50:36 GMT

Okay, still working on rewriting code to the functional pattern and get working what had been, quite close but not quite there...
The functional pattern is much clearer for me to grasp so thanks for the template.
Anyway couple of specific issues around scope again, below changes/additions to your template are working for my purposes currently but I'm having to set the bbox state to var instead of const to use the updated bbox outside the extent watch event.
var is not recommended I read but can't seem to find the correct pattern to update it and follow recommended forms...

const [ jimuMapView, setJimuMapView ] = useState<JimuMapView>(); var [ bbox, setBBOX ] = useState(''); const activeViewChangeHandler = (jmv: JimuMapView) => { if (jmv) { setJimuMapView(jmv) /* When the extent moves, update the state with all the updated values.*/ jmv.view.watch('extent', evt => { const cs1 = new SpatialReference({ wkid: 4326 //WGS_84 }); /* EXTENT/BBOX conversion to Geometry Polygon: BBOX(xMin,yMin,xMax,yMax) POLYGON((xMin yMin,xMin yMax,xMax yMax,xMax yMin,xMin yMin)) */ const extentClone = jmv.view.extent.clone(); const newExtent = projection.project(extentClone, cs1); const mapBBOX = "POLYGON((" + newExtent.xmin.toFixed(4) + " " + newExtent.ymin.toFixed(4) + "," + newExtent.xmin.toFixed(4) + " " + newExtent.ymax.toFixed(4) + "," + newExtent.xmax.toFixed(4) + " " + newExtent.ymax.toFixed(4) + "," + newExtent.xmax.toFixed(4) + " " + newExtent.ymin.toFixed(4) + "," + newExtent.xmin.toFixed(4) + " " + newExtent.ymin.toFixed(4) + "))"; setBBOX(mapBBOX); }) } }

Other bit is as follows where the add layer functions work fine but I get a new layer for every button click where the extent has been change, scope again maybe but when I apply a layer refresh it doesn't refresh.
You should see below I'm trying to remove and re-add the layer but not quite working either and figure that's just a hack anyway..

var [ lineLayerAdded, setLineLayerAdded ] = useState(false); const formSubmit = (evt) => { evt.preventDefault(); //If layer has already been added to map then just refresh it. if(lineLayerAdded){ console.log("In layer refresh"); //Now update layer parames and get new data layer.customParameters.request = bbox; //This is not refreshing layer.refresh(); //Other approach here was to try and remove //then re-add layer. //So trying to add layer again after new bbox request. //New layer works but now have 2+ layers now!! jimuMapView.view.map.remove(layer); jimuMapView.view.map.add(layer); }else{ console.log("In layer add"); jimuMapView.view.map.add(layer); setLineLayerAdded(true); } }

Re: Access layer features and data in Experience Builder Widget Development

JeffreyThompson2 — Thu, 09 Nov 2023 14:11:55 GMT

So, that add/remove layer widget is code from a introduction to React I was writing. I was making a point in that section that if the reference to layer is not stored in state it will become lost on re-render. I think that is exactly why your layer will not delete.

https://community.esri.com/t5/experience-builder-tips-and-tricks/react-for-experience-builder-developer-edition/ba-p/1346222

Re: Access layer features and data in Experience Builder Widget Development

diplonics — Thu, 09 Nov 2023 15:12:13 GMT

Ahh, lots in that article to pour over and once probably won't do it for me either🙄
Anyway, got it working as I want but some changes as I originally thought

const [layer

was a typo, but trying to add it in is giving me an error on using the Widget in EB.
Seems something is trying to close off the brace and not sure where you are adding in the 'item' featureLayer to that structure.

***********************

Load module error. Error: Module parse failed: Identifier 'layer' has already been declared (60:11)
File was processed with these loaders:
* ./node_modules/ts-loader/index.js
* ./node_modules/thread-loader/dist/cjs.js
* ./webpack/update-webpack-public-path-loader.js
You may need an additional loader to handle the result of these loaders.
| popupTemplate: videoPopupTemplate
| });
> const [layer];
| const activeViewChangeHandler = (jmv) => {
| if (jmv) {
**************************

So I adapted to the other approach I was using and the following is working fine now to add layer on first click, then only update/refresh layer with new data on an extent change and subsequent new click.

const [layer, setLayer ] = useState<GeoJSONLayer>(); const lineLayer = new GeoJSONLayer({ url: requestURL, customParameters: { request: bbox }, title: "API Lines", renderer: { type: "simple", symbol: { type: "simple-line", width: 2, color: "blue" } }, popupTemplate: linePopupTemplate }); const formSubmit = (evt) => { evt.preventDefault(); //If layer has already been added to map then just refresh it. if(lineLayerAdded){ //Now get new data layer.customParameters.request = bbox; layer.refresh(); }else{ jimuMapView.view.map.add(lineLayer); setLineLayerAdded(true); setLayer(lineLayer); } }

Re: Access layer features and data in Experience Builder Widget Development

diplonics — Thu, 09 Nov 2023 15:44:00 GMT

Just added in your get feature clicked example and it works perfect, so lots of struggling to grasp react sorted so thank you @JeffreyThompson2. Onto the next bit, sort through clicked features returned and build some UI elements from it...

jmv.view.on("click", function(event){ // Search for all features only on included layers at the clicked location jmv.view.hitTest(event, {include: layer}).then(function(response){ // if features are returned from the featureLayer, do something with results if (response.results.length){ // do something console.log(response.results.length, "features returned"); } }) });

Re: Access layer features and data in Experience Builder Widget Development

JeffreyThompson2 — Thu, 09 Nov 2023 15:23:17 GMT

Yes, that const [layer line was an error. It has been corrected in the React guide. The correct line there was.

const [layer, setLayer] = useState(item)

Re: Access layer features and data in Experience Builder Widget Development

diplonics — Thu, 16 Nov 2023 16:35:03 GMT

Coming back to this after a week with loads of progress, got a great Widget built that does what we want...except...I can't preview it because of a load error which probably means I'll not be able to publish it as well.

So I took the code back to basics and am using your base example from here and same error shows up:
https://community.esri.com/t5/experience-builder-tips-and-tricks/react-for-experience-builder-developer-edition/ba-p/1346222
In the Developer/Draft UI your code works fine (as does my widget) but once I try and preview it, which opens in a new tab, both widgets 'fail to load'.

Could you check if you are getting the same issue?

The featurelayer URL I'm using with your example code is:
'http://sampleserver6.arcgisonline.com/arcgis/rest/services/NapervilleShelters/FeatureServer/0'
The dev-console error stack is this.

Re: Access layer features and data in Experience Builder Widget Development

JeffreyThompson2 — Thu, 16 Nov 2023 16:49:54 GMT

https://developers.arcgis.com/experience-builder/guide/add-layers-to-a-map/#change-the-widget-name

Based on the error, I am guessing that you did not include jimu-arcgis in your dependencies in manifest.json as shown in the link.

Re: Access layer features and data in Experience Builder Widget Development

diplonics — Fri, 17 Nov 2023 15:00:53 GMT

Yep, that fixed it, thanks again for your input and help on all bits, its appreciated.

Re: Access layer features and data in Experience Builder Widget Development

diplonics — Mon, 12 Feb 2024 16:32:34 GMT

Just back working on this project and stuck on how to highlight a map feature in the GeoJson layer that has been added to the map as detailed in earlier post.
So, in code I have access to both the 'JimuMapView.view.map' and the 'layer' but what I need to do is when a feature is clicked in a table in my widget i need to highlight it in the map.
Each feature has a feature_id attribute that's unique and I can access from the table in my custom widget so I should be able to loop through the layers feature in the mapView and highlight it but what I've tried so far isn't working.
I'm currently trying this approach:
https://community.esri.com/t5/kotlin-maps-sdk-questions/selecting-a-feature-from-featurecollectionlayer/m-p/1311211#M145
but can't figure it out?

Re: Access layer features and data in Experience Builder Widget Development

JeffreyThompson2 — Mon, 12 Feb 2024 17:35:53 GMT

That link is from a separate API, so the methods are going to be different. You should query the layer and then use the .highlight() method.

https://developers.arcgis.com/javascript/latest/api-reference/esri-views-layers-GeoJSONLayerView.html#highlight

Re: Access layer features and data in Experience Builder Widget Development

diplonics — Mon, 19 Feb 2024 16:19:25 GMT

Hopefully another easy fix can be applied to help me again learn and raise my inexperienced React codebase skills!!!
I'm getting following error:

Load module error. Error: Module parse failed: The keyword 'yield' is reserved (86:28)
File was processed with these loaders:

Issue is I'm trying to recode various bits to fully understand scope etc., basically do things properly.

So I managed to use your suggestion of the .highlight() method which was a big help, thank you as per usual. However, I put it together as a hack that seemed to work but I'm certainly not sensibly implementing it as the layerView scope doesn't exist in numerous contexts.

Sample code below shows the that the error kicks in because of the await request line 17.

If I comment it out and use line 16 instead then things run fine for the table click situation to highlighting the map feature, however layerView is still null in lots of other contexts so I obviously have something scope wise badly wrong!!!

Re: Access layer features and data in Experience Builder Widget Development

JeffreyThompson2 — Tue, 20 Feb 2024 14:05:54 GMT

I'm not sure what you are trying to accomplish, so here is some general information you may find helpful.

The await keyword can only be used inside a function declared with the async keyword.

The layer and the layerView are not the same thing. Roughly speaking, the layer is the data and the layerView is how the data is displayed. In most cases, you should run queries on the layer, rather than the layerView.

Re: Access layer features and data in Experience Builder Widget Development

diplonics — Tue, 27 Feb 2024 11:12:30 GMT

Thanks again and eventually worked it out to get what I need working. Into code exception handling now and stuck on the case where no GeoJSON features are returned. Is there an example of catching/handling errors you can point to.

Below is an image of the console errors. When the widget first loads there is no GeoJson data. If the load data button is clicked a layer refresh occurs and is fine as long as features are returned, if none are returned then these errors occur and further updates to the layer fail. Is there a correct way to handle exception cases where a query that returns no features just clears the map and shows a message of 'no data top load'.

Re: Access layer features and data in Experience Builder Widget Development

JeffreyThompson2 — Tue, 27 Feb 2024 14:14:31 GMT

If I understand your problem, you have code that functions and does additional analysis if the API returns data, but errors out if there is no data, and you want to know how to handle a no data senario. Practically, the best option would be to inform the user that there is no data to work with and allow them to start over. There are several ways to accomplish this (if/else, try/catch, or moving part of your code down the React tree), but they are all fundamentally just different ways to make an if statement.