When users enter a new input (a zip code), it creates a graphic for it but when I enter the second input it doesn't remove the first graphic for the first input
I tried to use view.graphics.remove() to remove the oldest user's input whenever the user hits the generate button but it did not work it keeps adding graphics for each user's input (generate click )
This is my code so far:
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/BasemapGallery",
"esri/Graphic",
], (Map, MapView, Graphic) => {
const generateData = document.getElementById("generate");
Whenever the user hits the generate button this arrow function works
generateData.addEventListener("click", async () => {
try {
//This calling will get user's lat and long in an array
var latLogArray = await getLongAndLat(fullUrl);
//Should remove any graphics if there is any
removeGraphic(myPointGraphic);
//to add a new graphic corresponding to user's input
await addGraphic(latLogArray, latLogArray);
} catch (error) {
console.log(error, "ERROR");
}
});
//this function return the lat and long in an array
const getLongAndLat = async (url) => {
try {
const fullResponseJSON = await (await fetch(url)).json();
const lat = fullResponseJSON.coord.lat;
const long = fullResponseJSON.coord.lon;
const coordArray = [long, lat];
return coordArray;
} catch (error) {
console.log(error, "ERROR");
}
};
const myMap = new Map({
basemap: "osm",
});
const myMapView = new MapView({
map: myMap,
container: "myDiv",
zoom: 5,
center: [-98.5795, 39.8283], //myMapView.center = somevalue
});
var myPoint = {
type: "point", // autocasts as new Point()
longitude: -98.5795,
latitude: 39.8283,
};
// Create a symbol for drawing the point
var markerSymbol = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
color: [226, 119, 40],
};
const goToLatandLong = async (usercoord) => {
myMapView.goTo(
{
center: usercoord,
zoom: 10,
},
{ duration: 3000 }
);
return usercoord;
};
// Create a graphic and add the geometry and symbol to it
var myPointGraphic = new Graphic({
geometry: myPoint,
symbol: markerSymbol,
});
myMapView.graphics.add(myPointGraphic);
let removeGraphic = async (myPointGraphic) => {
try {
myMapView.graphics.remove(myPointGraphic);
// console.log("GRAPHIC HAS BEEN REMOVED :red_circle:");
} catch (error) {
console.log(error, "no graphic to remove");
}
};
let addGraphic = async (graphicLong, graphicLat) => {
var myPoint = {
type: "point", // autocasts as new Point()
longitude: 0,
latitude: 0,
};
myPoint.longitude = graphicLong[0];
myPoint.latitude = graphicLat[1];
// Create a symbol for drawing the point
var markerSymbol = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
color: [226, 119, 40],
};
// Create a graphic and add the geometry and symbol to it
var myPointGraphic = new Graphic({
geometry: myPoint,
symbol: markerSymbol,
});
myMapView.graphics.add(myPointGraphic);
// console.log("GRAPHIC HAS BEEN ADED 🟢");
};
});
NOTE: I'm getting the data from Open weather API
