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