topic Re: Display and Tie datagrid to graphic circle radius query in ArcGIS JavaScript Maps SDK Questions

Display and Tie datagrid to graphic circle radius query

CarlSunderman — Sat, 11 Dec 2021 16:29:38 GMT

I am drawing a circle radius at one mile and selecting all features that fall within the circle. I want to highlight the selected features and show them in a data grid/ table, and as i click around the map, to update the table along with the selected features.

I am able to draw the circle and select the features. i'm also able to console.log the output, but can't figure out how to create the datagrid thats tied the the selected records and clear the table on each new selection.

    <!DOCTYPE html>  
    <html>  
    
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples   
        on iOS devices-->  
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">  
    <title>Buffer</title>  
    <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/tundra/tundra.css">  
    <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">  
    <style>  
        html,  
        body,  
        #mapDiv {  
        padding: 0;  
        margin: 0;  
        height: 100%;  
        }  
        #messages {  
        background-color: #fff;  
        box-shadow: 0 0 5px #888;  
        font-size: 1.1em;  
        max-width: 15em;  
        padding: 0.5em;  
        position: absolute;  
        right: 20px;  
        top: 20px;  
        z-index: 40;  
        }  
        #drop {  
        background-color: #fff;  
        box-shadow: 0 0 5px #888;  
        font-size: 1.1em;  
        max-width: 15em;  
        padding: 0.5em;  
        position: absolute;  
        right: 20px;  
        top: 105px;  
        z-index: 40;  
        }  
    </style>  
    <script src="http://js.arcgis.com/3.11/"></script>  
    <script>  
        var map;  
    
    
        require([  
            "esri/map", "esri/layers/FeatureLayer",  
            "esri/tasks/query", "esri/geometry/Circle", "esri/units",  
            "esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",  
            "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",  
            "esri/config", "esri/Color", "dojo/dom", "dijit/form/ComboBox", "dojo/domReady!"  
        ], function (  
        Map, FeatureLayer,  
        Query, Circle, Units,  
        Graphic, InfoTemplate, SimpleMarkerSymbol,  
        SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer,  
        esriConfig, Color, dom  
        ) {  
        // use a proxy page if a URL generated by this page is greater than 2000 characters  
        //  
        // this should not be needed as nearly all query & select functions are performed on the client  
        esriConfig.defaults.io.proxyUrl = "/proxy/";  
    
        map = new Map("mapDiv", {  
            basemap: "streets",  
            center: [-81.00, 34.000],  
            zoom: 14,  
            slider: false  
        });  
    
        //selected features are clicked a popup window will appear displaying the content defined in the info template.  
        var featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0", {  
            outFields: ["POP2000", "HOUSEHOLDS", "HSE_UNITS", "TRACT", "BLOCK"]  
        });  
    
        // selection symbol used to draw the selected census block points within the buffer polygon  
        var symbol = new SimpleMarkerSymbol(  
            SimpleMarkerSymbol.STYLE_CIRCLE,  
            6,  
            new SimpleLineSymbol(  
            SimpleLineSymbol.STYLE_NULL, new Color([200, 120, 101, 0.9]), 1),  
            new Color([200, 0, 0, 1])  
        );  
        featureLayer.setSelectionSymbol(symbol);  
    
        //make unselected features invisible  
        var nullSymbol = new SimpleMarkerSymbol().setSize(0);  
        featureLayer.setRenderer(new SimpleRenderer(nullSymbol));  
    
        map.addLayer(featureLayer);  
    
    
        var circleSymb = new SimpleFillSymbol(  
            SimpleFillSymbol.STYLE_NULL,  
            new SimpleLineSymbol(  
            SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,  
            new Color([105, 105, 105]),  
            2  
            ), new Color([255, 255, 0, 0.25])  
        );  
        var circle;  
    
        //when the map is clicked create a buffer around the click point of the specified distance.  
        map.on("click", function (evt) {  
            selbuf = document.FormSelection.BufferSelection.selectedIndex;  
            var BufferSelection = document.FormSelection.BufferSelection.options[selbuf].value;  
    
            circle = new Circle({  
            center: evt.mapPoint,  
            geodesic: true,  
            radius: BufferSelection,  
            radiusUnit: Units.MILES  
            });  
            map.graphics.clear();  
            map.infoWindow.hide();  
            var graphic = new Graphic(circle, circleSymb);  
            map.graphics.add(graphic);  
    
            var query = new Query();  
            query.geometry = circle;  
            featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (results) {  
            console.log(results)
            var features = results.features;  
            console.log(features)
            });  
        });  
    
        });  
    </script>  
    </head>  
    
    <body>  
    <span id="messages">Click on the map to select by radius within mile.</span>  
    <span id="drop">  Select Radius Size
        <form name="FormSelection">  
        <select name="BufferSelection">   
            <option>1</option>  
            <option>2</option>  
            <option>10</option>  
        </select>  
        </form>  
    </span>  
    <div id="mapDiv"></div>  
    </body>  
    
    </html> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Display and Tie datagrid to graphic circle radius query

KenBuja — Mon, 12 Aug 2019 20:35:48 GMT

Take a look at this sample that uses a dgrid: dgrid | ArcGIS API for JavaScript 3.29

Re: Display and Tie datagrid to graphic circle radius query

RobertScheitlin__GISP — Sat, 11 Dec 2021 16:29:42 GMT

Here is a sample that is almost exactly what you are describing.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Map with a Dojo dGrid</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.25/dojo/resources/dojo.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.25/dgrid/css/dgrid.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.25/dgrid/css/skins/tundra.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.25/dijit/themes/tundra/tundra.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.25/esri/css/esri.css">
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    #container {
      height: 100%;
      visibility: hidden;
    }

    #bottomPane {
      height: 200px;
    }

    .left {
      float: left;
      width: 50%;
      overflow: hidden;
      height: 200px;
    }

    .right {
      float: left;
      width: 50%;
      overflow: hidden;
      height: 200px;
    }

    .dgrid {
      border: none;
    }

    .field-id {
      cursor: pointer;
    }
  </style>

  <script src="http://js.arcgis.com/3.25/"></script>
  <script>
    // load dgrid, esri and dojo modules
    // create the grid and the map
    // then parse the dijit layout dijits
    require([
      "dgrid/OnDemandGrid",
      "dgrid/Selection",
      "dojo/store/Memory",
      "dojo/_base/array",
      "dojo/dom-style",
      "dojo/dom-attr",
      "dijit/registry",
      "esri/map",
      "esri/layers/FeatureLayer",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/symbols/SimpleFillSymbol",
      "esri/Color",
      "esri/config",
      "esri/renderers/SimpleRenderer",
      "esri/tasks/QueryTask",
      "esri/tasks/query",
      "esri/geometry/Circle",
      "esri/graphic",
      "esri/dijit/PopupTemplate",
      "esri/InfoTemplate",
      "dojo/_base/declare",
      "dojo/number",
      "dojo/on",
      "dojo/_base/lang",
      "dojo/parser",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dojo/domReady!"
    ], function(
      Grid,
      Selection,
      Memory,
      array,
      domStyle,
      domAttr,
      registry,
      Map,
      FeatureLayer,
      SimpleMarkerSymbol,
      SimpleLineSymbol,
      SimpleFillSymbol,
      Color,
      esriConfig,
      SimpleRenderer,
      QueryTask,
      Query,
      Circle,
      Graphic,
      PopupTemplate,
      InfoTemplate,
      declare,
      dojoNum,
      on,
      lang,
      parser
    ) {
      esriConfig.defaults.io.proxyUrl = "proxy/Proxy.ashx"
      parser.parse();

      // create the dgrid
      window.grid = new(declare([Grid, Selection]))({
        // use Infinity so that all data is available in the grid
        bufferRows: Infinity,
        columns: {
          "id": "ID",
          "popuplation": {
            "label": "2000 Population",
            "formatter": dojoNum.format
          },
          "households": "Households",
          "houseunits": "House Units"
        }
      }, "grid");
      // add a click listener on the ID column
      grid.on(".field-id:click", selectBlkPnt);
      grid.on("th.field-households:mouseover", function(evt){
        if(domAttr.get(evt.target, "title") !== "Blah Blah"){
          domAttr.set(evt.target, "title", "Blah Blah");
        }
      });

      // create the dgrid
      window.grid2 = new(declare([Grid, Selection]))({
        // use Infinity so that all data is available in the grid
        bufferRows: Infinity,
        columns: {
          "id": "ID",
          "popuplation": {
            "label": "2000 Population",
            "formatter": dojoNum.format
          },
          "white": "White",
          "black": "Black",
          "asian": "Asian"
        }
      }, "grid2");

      window.map = new Map("map", {
        basemap: "streets",
        center: [-95.249, 38.954],
        zoom: 14,
      });

      window.blockUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0";
      window.blockGroupURL = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/1";
      window.outFields = ["OBJECTID", "POP2000", "HOUSEHOLDS", "HSE_UNITS"];
      window.bgoutFields = ["OBJECTID", "POP2000", "WHITE", "BLACK", "ASIAN"];


      var fl = new FeatureLayer(window.blockUrl, {
        id: "blockPnts",
        outFields: window.outFields
      });

      var fl2 = new FeatureLayer(window.blockGroupURL, {
        id: "blockGroup",
        outFields: window.bgoutFields
      });

      // Selection symbol used to draw the selected census block points within the buffer polygon
      var symbol = new SimpleMarkerSymbol(
        SimpleMarkerSymbol.STYLE_CIRCLE,
        12,
        new SimpleLineSymbol(
          SimpleLineSymbol.STYLE_NULL,
          new Color([247, 34, 101, 0.9]),
          1
        ),
        new Color([207, 34, 171, 0.5])
      );
      fl.setSelectionSymbol(symbol);

      // Selection symbol used to draw the selected census block points within the buffer polygon
      var symbol2 = new SimpleFillSymbol(
        SimpleFillSymbol.STYLE_NULL,
        new SimpleLineSymbol(
          SimpleLineSymbol.STYLE_SOLID,
          new Color([247, 0, 0, 1]),
          3
        ),
        new Color([0, 0, 0, 0.5])
      );
      fl2.setSelectionSymbol(symbol2);

      // Make unselected features invisible
      var nullSymbol = new SimpleMarkerSymbol().setSize(0);
      fl.setRenderer(new SimpleRenderer(nullSymbol));

      // Make unselected features invisible
      var nullSymbol2 = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL).setOutline(null);
      fl2.setRenderer(new SimpleRenderer(nullSymbol2));

      fl.on("click", selectGrid);

      // change cursor to indicate features are click-able
      fl.on("mouse-over", function() {
        window.mapClickEvt.pause();
        map.setMapCursor("pointer");
      });
      fl.on("mouse-out", function() {
        setTimeout(function() {
          window.mapClickEvt.resume();
        }, 800);

        map.setMapCursor("default");
      });

      map.addLayer(fl);
      map.addLayer(fl2);

      var circleSymb = new SimpleFillSymbol(
        SimpleFillSymbol.STYLE_NULL,
        new SimpleLineSymbol(
          SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
          new Color([105, 105, 105]),
          2
        ), new Color([255, 255, 0, 0.25])
      );
      var circle;

      // When the map is clicked create a buffer around the click point of the specified distance
      window.mapClickEvt = on.pausable(map, "click", function(evt) {
        circle = new Circle({
          center: evt.mapPoint,
          geodesic: true,
          radius: 1,
          radiusUnit: "esriMiles"
        });
        map.graphics.clear();
        var graphic = new Graphic(circle, circleSymb);
        map.graphics.add(graphic);

        var query = new Query();
        query.geometry = circle;
        // Use a fast bounding box query. It will only go to the server if bounding box is outside of the visible map.
        fl.selectFeatures(query, FeatureLayer.SELECTION_NEW, selectInBuffer);
        fl2.selectFeatures(query, FeatureLayer.SELECTION_NEW, selectInBuffer2)
      });

      function selectInBuffer2(features) {
        console.info(features);
        var data = array.map(features, function(feature) {
          return {
            // property names used here match those used when creating the dgrid
            "id": feature.attributes[window.bgoutFields[0]],
            "popuplation": feature.attributes[window.bgoutFields[1]],
            "white": feature.attributes[window.bgoutFields[2]],
            "black": feature.attributes[window.bgoutFields[3]],
            "asian": feature.attributes[window.bgoutFields[4]]
          };
        });
        var memStore = new Memory({
          data: data
        });
        window.grid2.set("store", memStore);
      }

      function selectInBuffer(features) {
        var data = array.map(features, function(feature) {
          return {
            // property names used here match those used when creating the dgrid
            "id": feature.attributes[window.outFields[0]],
            "popuplation": feature.attributes[window.outFields[1]],
            "households": feature.attributes[window.outFields[2]],
            "houseunits": feature.attributes[window.outFields[3]]
          };
        });
        var memStore = new Memory({
          data: data
        });
        window.grid.set("store", memStore);
      }

      map.on("load", function(evt) {
        // show the border container now that the dijits
        // are rendered and the map has loaded
        domStyle.set(registry.byId("container").domNode, "visibility", "visible");
      });

      // fires when a row in the dgrid is clicked
      function selectBlkPnt(e) {
        map.graphics.clear();
        var fl = map.getLayer("blockPnts");
        var query = new Query();
        query.objectIds = [parseInt(e.target.innerHTML, 10)];
        query.returnGeometry = true;
        fl.queryFeatures(query, function(results) {
          var gra = results.features[0].clone();
          var symbol = new SimpleMarkerSymbol(
            SimpleMarkerSymbol.STYLE_CIRCLE,
            12,
            new SimpleLineSymbol(
              SimpleLineSymbol.STYLE_NULL,
              new Color([247, 247, 0, 1]),
              1
            ),
            new Color([247, 247, 0, 0.9])
          );
          gra.setSymbol(symbol);
          map.graphics.add(gra);
        });

      }

      // fires when a feature on the map is clicked
      function selectGrid(e) {
        var id = e.graphic.attributes.OBJECTID;
        // select the corresponding row in the grid
        // and make sure it is in view
        grid.clearSelection();
        grid.select(id);
        grid.row(id).element.scrollIntoView();
      }
    });
  </script>
</head>

<body class="tundra">
  <div id="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline', gutters: false">
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'"></div>
    <div id="bottomPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'">
      <div id="grid" class="left"></div>
      <div id="grid2" class="right"></div>
    </div>
  </div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍