Latest Contributions by kawishabbas

Hi Please review the following code. I have a problem that i want to remove previous table when user click new value (it means hide previous table and show new table of new value). i have added image to understand problem. Robert Scheitlin, GISP‌  Rene Rubalcava‌   Kelly Hutchins‌ import React from 'react'; import { loadModules } from 'react-arcgis'; import Axios from 'axios'; export default class QueryODB extends React.Component{ constructor(props) { super(props); this.state = { ODB: [], server:[] } } componentDidMount(){ let map = this.props.map; let view = this.props.view; loadModules(["esri/tasks/support/Query", "esri/tasks/QueryTask", "esri/layers/FeatureLayer", 'esri/widgets/Expand', "esri/layers/GraphicsLayer", "esri/geometry/geometryEngine", "esri/Graphic", "esri/request", ]) .then(([Query, QueryTask, FeatureLayer, Expand, GraphicsLayer, geometryEngine, Graphic, Request]) => { /* view.ui.add( [ new Expand({ view:view, content: document.getElementById('attribute'), group: 'bottom-right', expanded: false }) ], "top-left" ) */ view.ui.add( [ new Expand({ view: view, content: document.getElementById("infoDiv"), group: "bottom-right", expanded: false, expandIconClass: "fas fa-object-group", }) ], "top-right" ); let OdbfromPOP = document.getElementById('odb-type'); const ODBRenderer = { type: "simple", // autocasts as new SimpleRenderer() symbol: { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() size: 6, color: [0, 255, 255], outline: null } }; /* const FiberRenderer = { type: "simple", // autocasts as new SimpleRenderer() symbol: { type: "simple-line", // autocasts as new SimpleLineSymbol() width: "2px", color: [0, 255, 255], outline: null } }; */ // *********** ODB Query *************** let odburl = "http://172.16.6.64:6080/arcgis/rest/services/KarachiSDE/FeatureServer/1"; let ODB = new FeatureLayer({ url: odburl, title: 'ODB/DC', renderer: ODBRenderer, listMode: "hide", popupTemplate: { title: "ODB/DC", content: [{ type: "fields", fieldInfos: [{ fieldName: "Name", label: "Name", format: { digitSeparator: true, places: 0 } }, { fieldName: "Splitter", label: "Splitter", format: { digitSeparator: true, places: 0 } }, { fieldName: "ID", label: "ID", format: { digitSeparator: false, places: 0 } }, { fieldName: "POP", label: "POP", format: { digitSeparator: false, places: 0 } }, { fieldName: "Placement", label: "Placement", format: { digitSeparator: true, places: 0 } }, { fieldName: "City", label: "City", format: { digitSeparator: true, places: 0 } }, { fieldName: "Comment", label: "Comment", format: { digitSeparator: true, places: 0 } }] }] } }) map.add(ODB) let queryTask = new QueryTask({ url: odburl }); var resultsLayer = new GraphicsLayer({ listMode: "hide" }); map.add(resultsLayer) view.when(() => { return ODB.when(function () { var query = ODB.createQuery(); return ODB.queryFeatures(query); }) }) .then(getValues) .then(getUniqueValues) .then(addToSelect) function getValues(response) { var features = response.features; var values = features.map((feature, index) => { return feature.attributes.POP; }); return values; } function getUniqueValues(values) { var uniqueValues = []; values.map((item, i) => { if ( (uniqueValues.length < 1 || uniqueValues.indexOf(item) === -1) && item !== "" ) { uniqueValues.push(item); } }); return uniqueValues; } function addToSelect(values) { values.sort(); values.map((value, index) => { var option = document.createElement("option"); option.text = value; OdbfromPOP.add(option); }); return setWellsDefinitionExpression(OdbfromPOP.value); } function setWellsDefinitionExpression(newValue) { ODB.definitionExpression = "POP = '" + newValue + "'"; let queryodb = new Query({ returnGeometry: true, outFields: ["Name", "ID", "Placement", "Comment", "POP"], where: ODB.definitionExpression }) queryTask.executeForCount(queryodb).then(function (results) { document.getElementById('results').innerHTML = " ODBs are " + results; }); queryTask.execute(queryodb).then(function (response) { var attribute = document.getElementById("attribute"); var table = document.createElement("table"); table.border = 1; var header = document.createElement("tr"); table.appendChild(header); response.fields.forEach(element => { var column = document.createElement("th"); column.textContent = element.alias; header.appendChild(column); //alert(response.data.fields.alias); }); response.features.forEach(res => { // console.log(response.features ) var row = document.createElement("tr"); table.appendChild(row); response.fields.forEach(response => { //console.log(response.fields) var columns = document.createElement("td"); columns.textContent = res.attributes[response.name]; row.appendChild(columns); ///console.log(feature.attributes[field.name]) }) }) attribute.appendChild(table); }); } // set a new definitionExpression on the wells layer // and create a new buffer around the new wells OdbfromPOP.addEventListener("change", function (event) { let btn = document.getElementById('query-button'); btn.addEventListener('click', () => { let type = event.target.value; document.getElementById('pop').innerHTML = type setWellsDefinitionExpression(type) view.ui.add('attribute', "top-left") }) }); }) } render(){ return ( <div> <div id="infoDiv"> SELECT * FROM DC_ODB WHERE: <div> <strong>POP = <span id="pop"></span></strong></div> <select id="odb-type"> <option value = " ">...Unselect ODB...</option> </select><br /> <button id="query-button">Click to query</button><br /> <div id="results"></div> </div> <div id="attribute"></div> </div> ) } } ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍    I select POP ID(21001) to show it's record on map as a table. it's working.       when i select second POP ID (21004), the new table opens whereas old table does not disappear. ... View more

Hi  I am using sql server 2012 and Arcmap version 10.4.1. My problem is that when i post data from Arcmap it will post to parent version easily but not show in the table of sql server. in above image i reconciled from child to parent version and post, it works successfully. i edit name filed which has mentioned in image.  This is my Application in which i show all data in table format, you all can see there is no update of name filed. ... View more

Hi, I am using react-arcgis for React App. I want to use Scene instead of Map but API does not load with Scene while it works properly with Map module. import React from 'react'; import { Scene } from 'react-arcgis'; //import { Scene } from '@esri/react-arcgis'; import { Row, Col } from 'reactstrap'; import './south.css' import SouthWidget from './SouthWidget'; export default class SouthRegion extends React.Component{ constructor(props) { super(props); this.state = { viewProperties: { center: [67.110382, 24.8776361], scale: 220000, popup: { dockEnabled: true, dockOptions: { // Disables the dock button from the popup buttonEnabled: false, // Ignore the default sizes that trigger responsive docking breakpoint: false, position: "bottom-left" } } } } } render(){ return ( <div className="page-wrapper"> <div className="container-fluid"> <Row> <Scene className="scene__container" style={{ width: '100vw', height: '90vh' }} mapProperties={{ basemap: 'satellite' }} viewProperties={this.state.viewProperties} > <SouthWidget/> </Scene> </Row> </div> </div> ) } }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ ... View more

Hi, My App is built with react and i want to use Arcgis API 3.27 into this project. i have downloaded react-arcgis but it install latest verison of API 4.10. How can i use API 3.27 instead of 4.10 in react ... View more

Hi i have join table with feature class and set symbology on base of that join on arcmap 10.4.1. Is there any possibility to show same symbology on web app??? i am using arcgis API 4.10. ... View more

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>) } } ... View more