Remove graphic on click to another button

kawishabbas — Thu, 14 Mar 2019 13:07:01 GMT

Hi,

I am creating small app for testing. i have a problem to remove graphics when user click on another button.e.g when user click to corporate button, residential customers should be remove. i have used remove() and removeAll() but it's not working.

import React from 'react'

import { loadModules } from 'react-arcgis';

export default class Widgets extends React.Component{

componentDidMount() {

let view = this.props.view;

let map = this.props.map;

loadModules(["esri/tasks/support/Query", "esri/tasks/QueryTask", "esri/Graphic", "esri/layers/GraphicsLayer"

])

.then(([Query, QueryTask, Graphic, GraphicsLayer]) => {

let g,g1,g2

let link = "http://localhost:6080/arcgis/rest/services/karachi/MapServer/5"

//*****QUERY AND QUERY TASK*****//

let queryTask = new QueryTask({

url: link

});

// Residential

let featuremap = new Query({

returnGeometry: true,

outFields: ["*"],

where: "Query = 3"

})

function click(){

queryTask.execute(featuremap).then(function (results) {

results.features.map((item, index) => {

g = new Graphic({

geometry: item.geometry,

attributes: item.attribute,

symbol: {

type: "simple-marker",

color: "blue",

size: 5,

outline: { // autocasts as new SimpleLineSymbol()

width: 0.5,

color: [0, 0, 0, 0.2]

}

});

// view.graphics.add(g);

let layer = new GraphicsLayer({

graphics: [g]

})

map.add(layer)

});

view.goTo({

target: view.graphics

});

}).otherwise(function (e) {

console.log(e);

});

}

let add = document.getElementById("residential");

add.addEventListener('click', function(){

click()

})

view.ui.add(add, 'top-right')

// Corporate

let featuremap1 = new Query({

returnGeometry: true,

outFields: ["*"],

where: "Query = 1"

})

function clicks() {

queryTask.execute(featuremap1).then(function (results) {

results.features.map((item, index) => {

g1 = new Graphic({

geometry: item.geometry,

attributes: item.attribute,

symbol: {

type: "simple-marker",

color: "green",

size: 5,

outline: {

width: 0.5,

color: [0, 0, 0, 0.2]

}

});

//view.graphics.add(g1);

let layer = new GraphicsLayer({

graphics: [g1]

})

map.add(layer)

});

view.goTo({

target: view.graphics

});

}).otherwise(function (e) {

console.log(e);

});

}

let add1 = document.getElementById("corporate");

add1.addEventListener('click', function () {

clicks()

})

view.ui.add(add1, 'top-right')

// Retailer

let featuremap2 = new Query({

returnGeometry: true,

outFields: ["*"],

where: "Query = 2"

})

function clicking() {

queryTask.execute(featuremap2).then(function (results) {

results.features.map((item, index) => {

g2 = new Graphic({

geometry: item.geometry,

attributes: item.attribute,

symbol: {

type: "simple-marker",

color: "red",

size: 5,

outline: { // autocasts as new SimpleLineSymbol()

width: 0.5,

color: [0, 0, 0, 0.2]

}

});

//view.graphics.add(g2);

let layer = new GraphicsLayer({

graphics: [g2]

})

map.add(layer)

});

view.goTo({

target: view.graphics

});

}).otherwise(function (e) {

console.log(e);

});

}

let add2 = document.getElementById("retailer");

add2.addEventListener('click', function () {

clicking()

})

view.ui.add(add2, 'top-right')

})

}

render(){

return (

<div>

<button id="residential">Residential</button>

<button id="corporate">corporate</button>

<button id="retailer">Retailer</button>

</div>)

}

topic Remove graphic on click to another button in ArcGIS JavaScript Maps SDK Questions

Remove graphic on click to another button