Select to view content in your preferred language

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

890
4
Jump to solution
11-14-2022 11:02 AM
HossamAymanHassan
New Contributor II

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

0 Kudos
1 Solution

Accepted Solutions
Sage_Wall
Esri Contributor

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);

 

View solution in original post

4 Replies
Sage_Wall
Esri Contributor

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);

 

HossamAymanHassan
New Contributor II
  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); 
0 Kudos
KenBuja
MVP Esteemed Contributor

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) => {

 

HossamAymanHassan
New Contributor II

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.

0 Kudos