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.
