topic Adding new graphic corresponding to user input and remove the old graphic in ArcGIS JavaScript Maps SDK Questions

Adding new graphic corresponding to user input and remove the old graphic

HossamAymanHassan — Mon, 14 Nov 2022 19:02:12 GMT

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

Re: Adding new graphic corresponding to user input and remove the old graphic

Sage_Wall — Mon, 14 Nov 2022 19:35:50 GMT

Hi @HossamAymanHassan ,

It looks like you are calling your removeGraphic function at the start of your script but not after adding a new graphic. Someplace in your script before adding the new graphic you would want to remove the old graphic(s). There are a few different ways to do this.

// Using your removeGraphic() function removeGraphic(graphicToRemove) // Using remove() myMapView.graphics.remove(graphicToRemove); // Using removeAll() myMapView.graphics.removeAll() // Then add the new graphic myMapView.graphics.add(newGraphic);

Re: Adding new graphic corresponding to user input and remove the old graphic

KenBuja — Mon, 14 Nov 2022 19:59:18 GMT

In this code sample, your require modules don't match up with your function arguments. Your Graphic argument thinks it's a BasemapGallery

require([ "esri/Map", "esri/views/MapView", "esri/widgets/BasemapGallery", "esri/Graphic", ], (Map, MapView, Graphic) => {

Re: Adding new graphic corresponding to user input and remove the old graphic

HossamAymanHassan — Mon, 14 Nov 2022 20:39:36 GMT

Hi Sage

Thank you so much for answering the myMapView.graphics.removeAll() method did work for me but the others still not working I don't know why.

I did add the removeGraphic(myPointGraphic) at first but it didn't work and the same for the myMapView.graphics.remove(myPointGraphic);

Re: Adding new graphic corresponding to user input and remove the old graphic

HossamAymanHassan — Mon, 14 Nov 2022 20:38:52 GMT

Hi KenBuja

Thank you for mentioning it. I did use it in my original JS file, but I forgot to delete it from the sample code.