Community

Implementing Feature Table Interaction in React ESRI Map Component

164
0
2 weeks ago
Labels (3)
koushikE
by
New Contributor
2 weeks ago

I'm currently developing a React application utilizing ESRI's ArcGIS API for JavaScript to display maps and interact with feature layers. Here's a simplified version of my component:

import { Box } from '@mui/material'
import React, { useEffect } from 'react'
import { loadModules } from 'esri-loader'

 

export default function Home() {
  useEffect(() => {
    loadModules(['esri/WebMap', 'esri/views/MapView','esri/layers/FeatureLayer',
    'esri/widgets/FeatureTable',], { css: true })
      .then(([WebMap, MapView,FeatureLayer, FeatureTable,]) => {
        let webmap = new WebMap({
          portalItem: {
            id: '' //webmap id
          }
        })

 

        let view = new MapView({
          container: 'viewDiv',
          map: webmap
        })

 

        view.when(() => {
          const featureLayer = new FeatureLayer({
            portalItem: {
              id: '' //feature layer id
            },
            outFields: ['*'],
            title: 'Customer'
          })

 

          webmap.add(featureLayer)

 

          const featureTable = new FeatureTable({
            view: view,
            layer: featureLayer,
            multiSortEnabled: true,
            editingEnabled: true,
            tableTemplate: {
              columnTemplates: [
                // Column template configurations
              ]
            },
            container: 'tableDiv'
          })

 

          view.ui.add(featureTable, 'bottom')
        })
      })
      .catch(error => {
        console.error('Error loading modules:', error)
      })
  }, [])

 

  return (
<Box>
<Box id='viewDiv' sx={{ flex: '1', width: '100%' }}></Box>
<Box id='tableDiv' sx={{ flex: '1', width: '100%' }}></Box>
</Box>
  )
}

Question Context:

I've successfully integrated the map and feature layers into my React component. However, I'm facing challenges implementing a feature where users can interact with popups and view corresponding data in a feature table. Here are my specific questions:

  1. Popup Interaction: How can I configure the component so that when a user clicks on a popup, they're presented with an option to view the associated data in the feature table? I aim to display all relevant data, typically 1 of 4 records, when the "Show on Map" button within the popup is clicked.
  2. Data Retrieval: I've explored various examples provided by ESRI, but I'm unsure how to retrieve the necessary data for the feature table. Some examples use URLs, while others utilize webmap.layers.getItemAt(0)  OR const featureLayer = webmap.findLayerById("OverlaySchools_2862");.  Could you provide guidance on how to access and display the data effectively?
  3. Custom API Integration: My application contains additional data that isn't represented on the map but needs to be displayed in the feature table. How can I incorporate this custom data, possibly through API calls, within the feature table?

    I appreciate any insights or assistance you can provide in addressing these challenges. Thank you!

0 Replies