Select to view content in your preferred language

Update a GraphicLayer without re-rendering base map

287
0
11-28-2023 08:25 PM
jboyer
by
New Contributor

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.
0 Kudos
0 Replies