Community

Remove graphic on click to another button

530
0
03-14-2019 06:07 AM
kawishabbas
by
Occasional Contributor
‎03-14-2019 06:07 AM

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

0 Kudos
0 Replies