nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Access layer features and data in Experience Builder Widget Development

diplonics

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:

const layer = new this.GeoJSONLayer({
	url: requestURL,
	customParameters: {
		request: this.state.bbox,
	},
	title: "New data",
	renderer: {
		type: "simple",
		symbol: {
			type: "simple-line",
			width: 2,
			Color: "blue"
		}
	}
});
JimuMapView.view.map.add(layer);
// After the layer is created try to build UI element from layer data.
layer.on('layerview-create', (event) => {
	try{
		const results = event.layerView.queryFeatures();
		const graphics = results.features;
		console.log(graphics);				//Just returns null
	}catch (error){
		console.error("query failed: ", error);
	}
})

Find more posts tagged with

ArcGIS Online

Accepted answers

All comments

Jeff.Thompson@arlingtontx.gov_arlingtontx

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.

diplonics

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!!!

const layer = new this.GeoJSONLayer({
	url: requestURL,
	customParameters: {
		request: this.state.bbox,
	},
	title: "New data",
	renderer: {
		type: "simple",
		symbol: {
			type: "simple-line",
			width: 2,
			Color: "blue"
		}
	}
});
JimuMapView.view.map.add(layer);
//var layerView = null;   //THIS WORKS
const layerView = await jimuMapView.view.whenLayerView(layer);   //THIS DOES NOT WORK
// After the layer is created try to build UI element from layer data.
layer.on('layerview-create', (event) => {
	try{
		const results = event.layerView.queryFeatures();
		const graphics = results.features;
		console.log(graphics);				//Just returns null
	}catch (error){
		console.error("query failed: ", error);
	}
})
jimuMapView.view.whenLayerView(layer).then(function(layerView){console.log(layerView);});

Jeff.Thompson@arlingtontx.gov_arlingtontx

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

diplonics

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?

Jeff.Thompson@arlingtontx.gov_arlingtontx

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");
    }
  })
});

diplonics

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.

Jeff.Thompson@arlingtontx.gov_arlingtontx

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

diplonics

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>
	}
}

Jeff.Thompson@arlingtontx.gov_arlingtontx

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.