Update a GraphicLayer without re-rendering base map

jboyer — Wed, 29 Nov 2023 04:25:28 GMT

Hello! I am new to ArcGIS (and JavaScript) and would like to get some help with a problem. For a course at university, I'm building a web application with Vue that will query an AWS database for an IoT sensor's geographical position, and display the position on a map rendered with the Esri Loader. I have no problem rendering the map, adding graphics, or the feature layer. But the question I have now is: How can I update the graphics layer in real-time without re-rendering the base map tiles? The map, graphic layer, and feature layer are all separate objects so it makes sense that I should be able to just change the graphic layer and not have to fetch the tiles again (due to api costs).

The function goes as follows:

loadMap() {

loadModules(['esri/config', 'esri/Map', 'esri/views/MapView', 'esri/Graphic', 'esri/layers/GraphicsLayer', 'esri/layers/FeatureLayer'], {

css: true

})

.then(([esriConfig, ArcGISMap, MapView, Graphic, GraphicsLayer, FeatureLayer]) => {

esriConfig.apiKey = import.meta.env.VITE_ARCGIS_API_KEY

// create map with the given options

const map = new ArcGISMap({

basemap: 'arcgis-oceans'

});

... //add point graphics and feature layer

}

I want to be able to access map from a secondary function to update the point graphics with the new position, and I can't figure out how to structure it.

topic Update a GraphicLayer without re-rendering base map in ArcGIS JavaScript Maps SDK Questions

Update a GraphicLayer without re-rendering base map