topic Zoom to point using Dojo Datagrid in ArcGIS JavaScript Maps SDK Questions

Zoom to point using Dojo Datagrid

StephenLopez — Fri, 07 May 2010 15:07:49 GMT

I am attempting to use the find task on a point feature to populate a datagrid then zoom to a selected feature when the user click on a record in the datagrid. I have successfully accomplished everything except defining an extent for the point so that the user may zoom. Any thoughts on how to accomplish this?

I have attached the code

Re: Zoom to point using Dojo Datagrid

ScottDavis — Fri, 07 May 2010 17:24:43 GMT

You could use Map:centerAndZoom(mapPoint, levelOrFactor). I've used it to zoom to points. It works well.

Re: Zoom to point using Dojo Datagrid

JensOldeland — Sat, 08 May 2010 06:25:49 GMT

Hi,

there is a nice tutorial on the esri-blog page
http://blogs.esri.com/Dev/blogs/arcgisserver/archive/2009/12/14/Add-a-Zoom-button-to-a-DataGrid.aspx

I think this might be exactly what you need.

best regards,
Jens

Re: Zoom to point using Dojo Datagrid

ChrisNelsen — Wed, 19 May 2010 15:31:04 GMT

I am trying to do the same thing and recently came across a sample that explained how to handle it. When you get your point you have an x,y location. You can use those values to help set the xmin, ymin, xmax, ymax needed for an extent. Hope this helps

function onRowClickHandler(e){
        clickedPointID = grid.getItem(e.rowIndex).OBJECTID;
        var selectedPoint;
        for (var i=0, il=map.graphics.graphics.length; i<il; i++) {
          var currentGraphic = map.graphics.graphics;
          if ((currentGraphic.attributes) && currentGraphic.attributes.OBJECTID == clickedPointID){
            selectedPoint = currentGraphic;
            break;
          }
        }
        var PointExtent = new esri.geometry.Extent();
        PointExtent.xmin = selectedPoint.geometry.x - 100; //I'm using State Plane Feet, so that's 100 out from my point
        PointExtent.ymin = selectedPoint.geometry.y - 100;
        PointExtent.xmax = selectedPoint.geometry.x + 100;
        PointExtent.ymax = selectedPoint.geometry.y + 100;
        map.setExtent(PointExtent);
      }

Re: Zoom to point using Dojo Datagrid

JuneAcosta — Mon, 28 Jun 2010 22:46:35 GMT

Stephen,

Did you get this working? What solution did you use to zoom to the point?

Re: Zoom to point using Dojo Datagrid

PaulHann — Tue, 29 Jun 2010 12:04:22 GMT

I have done this in the last week or so.

I simply did a

     dojo.connect(gridWidget, "onRowContextMenu", gridRowClick);

then using gridRowClick() I load up a context menu :

function gridRowClick(e)
    {
    curRec = e;
    pMenu.targetNodeIds = e.cellNode;
    pMenu._openMyself(e);

    }

where ....

pMenu = new dijit.Menu({title:'Menu'});
        pMenu.addChild(new dijit.MenuItem({
            label: "Zoom here",
            onClick: function(e){zoomToRecord(e,true);}
        }));
         pMenu.addChild(new dijit.MenuItem({
            label: "Highlight on Map",
              onClick: function(e){zoomToRecord(e,false);}
        }));


        pMenu.startup();

where

function zoomToRecord(e, zoomto){
results = Gridwidget;
pos = curRec.rowIndex
    var totalExtent ;
    var gType = results.geometryType;

    clearAllGraphics();

        var curFeature = results.features[pos];
        graphic = new esri.Graphic(curFeature);

        switch (gType) {
            case "esriGeometryPoint":
                var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 5, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 0, 0, 0.25]));
                totalExtent = new esri.geometry.Extent(parseFloat(graphic.geometry.x) - factor, parseFloat(graphic.geometry.y) - factor, parseFloat(graphic.geometry.x) + factor, parseFloat(graphic.geometry.y) + factor, myMap.spatialReference) ;
                break;
            case "esriGeometryPolyline":
                var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 1);
                totalExtent = graphic.geometry.getExtent() ;
                break;
            case "esriGeometryPolygon":
                //var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]));
                var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 0, 0, 0.25]));
                totalExtent = graphic.geometry.getExtent() ;
                break;
        }
        graphic.setSymbol(symbol);

        zoomListner = dojo.connect(myMap, "onExtentChange", function(){

                myMap.graphics.add(graphic);

                dojo.disconnect(zoomListner);

            });






    if (zoomto){
    myMap.setExtent(totalExtent.expand(2), true);
    }
    myMap.resize();
    myMap.reposition();

}

Re: Zoom to point using Dojo Datagrid

MatthewLewis — Sat, 11 Dec 2021 10:56:18 GMT

i realise this has been closed for a while but in my questing for an answer i couldn't really find one so i've added my solution here.

Below is my sample of the select by data grid using the new dgrid method.

you will need to add your own URLS and Fields. Note this is for a point feature. To use polygon use - result[0].geometry.getExtent().getCenter() in function selectState.

<!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.7/js/dojo/dojo/resources/dojo.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dgrid/css/dgrid.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dgrid/css/skins/tundra.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/tundra/tundra.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/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; }
    #grid { height: 100%; }
    .dgrid { border: none; }
    .field-id { cursor: pointer; }
  </style>

  <script src="http://js.arcgis.com/3.7/"></script>
  <script>
      // load dgrid, esri and dojo modules
      // create the grid and the map
      // then parse the dijit layout dijits
      require([
        "dojo/ready",
        "dgrid/OnDemandGrid",
        "dgrid/Selection",
        "dojo/store/Memory",
        "dojo/_base/array",
        "dojo/dom-style",
        "dijit/registry",
        "esri/map",
        "esri/layers/FeatureLayer",
        "esri/symbols/SimpleFillSymbol",
        "esri/tasks/QueryTask",
        "esri/tasks/query",
        "dojo/_base/declare",
        "dojo/number",
        "dojo/on",
        "dojo/parser",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane"
      ], function (
          ready,
          Grid,
          Selection,
          Memory,
          array,
          domStyle,
          registry,
          Map,
          FeatureLayer,
          SimpleFillSymbol,
          QueryTask,
          Query,
          declare,
          dojoNum,
          on,
          parser
        ) {
          ready(function () {

              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": "OBJECTID",
                      "Project_Nu": "Project Number",
                      //"median": { "label": "Median Net Worth", "formatter": dojoNum.format },
                      //"over1m": { "label": "Households Net Worth > $1M", "formatter": dojoNum.format }
                  }
              }, "grid");
              // add a click listener on the ID column
              grid.on(".field-id:click", selectState);

              window.map = new Map("map", {
                  basemap: "gray",
                  center: [-101.426, 42.972],
                  zoom: 4
              });

              window.statesUrl = "ADDMYOWNGISURLHERE!/MapServer/0";
              window.outFields = ["OBJECTID", "Project_Nu", "MEDNW_CY", "NW1M_CY"];

              var fl = new FeatureLayer(window.statesUrl, {
                  id: "states",
                  mode: 1, // ONDEMAND, could also use FeatureLayer.MODE_ONDEMAND
                  outFields: window.outFields
              });

              fl.on("load", function () {
                  fl.maxScale = 0; // show the states layer at all scales
                  fl.setSelectionSymbol(new SimpleFillSymbol().setOutline(null).setColor("#AEC7E3"));
              });

              fl.on("click", selectGrid);

              // change cursor to indicate features are click-able
              fl.on("mouse-over", function () {
                  map.setMapCursor("pointer");
              });
              fl.on("mouse-out", function () {
                  map.setMapCursor("default");
              });

              map.addLayer(fl);

              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");
                  populateGrid(Memory); // pass a reference to the MemoryStore constructor
              });

              function populateGrid(Memory) {
                  var qt = new QueryTask(window.statesUrl);
                  var query = new Query();
                  query.where = "1=1";
                  query.returnGeometry = false;
                  query.outFields = window.outFields;
                  qt.execute(query, function (results) {
                      var data = array.map(results.features, function (feature) {
                          return {
                              // property names used here match those used when creating the dgrid
                              "id": feature.attributes[window.outFields[0]],
                              "Project_Nu": feature.attributes[window.outFields[1]],
                              "median": feature.attributes[window.outFields[2]],
                              "over1m": feature.attributes[window.outFields[3]]
                          }
                      });
                      var memStore = new Memory({ data: data });
                      window.grid.set("store", memStore);
                  });
              }


              // fires when a row in the dgrid is clicked
              function selectState(e) {
                  // select the feature
                  var fl = map.getLayer("states");
                  var query = new Query();
                  var id = parseInt(e.target.innerHTML)
                  query.objectIds = [parseInt(e.target.innerHTML)];
                  fl.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (result) {
                      if (result.length) {
                          point = result
                          window.map.centerAndZoom(result[0].geometry, 10);
                      } else {
                          console.log("Feature Layer query returned no features... ", result);
                      }
                  });
              }

              // fires when a feature on the map is clicked
              function selectGrid(e) {
                  var id = e.graphic.attributes.OBJECTID;
                  // select the feature that was clicked
                  var query = new Query();
                  query.objectIds = [id];
                  var states = map.getLayer("states");
                  states.selectFeatures(query, FeatureLayer.SELECTION_NEW);
                  // 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"></div>
    </div>
  </div>
</body>
</html>