nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Zoom to point using Dojo Datagrid

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

datagrid.txt.zip

Find more posts tagged with

Accepted answers

All comments

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>

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();

}

Stephen,

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

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

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

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.