Opening Info Window When Zooming to Layer with Zoom Grid Sidebar

ThomasMetos1 · ‎01-12-2018

Hi, I am new to Javascript and need some help,

I am creating a web map with the ArcGIS Javascript API based on this Sandbox template link.

When zooming to the selected feature, I would like an info window with information on the feature to popup as well.

I would like to know the best way to do this.

Thanks!

RobertScheitlin__GISP · ‎01-12-2018

Thomas,

here is that sample updated for that:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Add zoom button to dgrid</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/dojo/resources/dojo.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/dgrid/css/dgrid.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
    <style>
      body,html,#main{
        margin:0;
        padding:0;
        height:100%;
        width:100%;
        font: 16px Geneva, Arial, Helvetica, sans-serif;
      }
      #map{
        padding:0;
        border: 1px solid #b5bcc7;
      }
      .dgrid { border: none; height: 100%; }
      .dgrid-column-0 {
        width: 35px;
      }
      .dgrid-row-odd {
        background: #FFFDF3;
      }
      td div img:hover {
        cursor: pointer;
      }
    </style>
    <script src="https://js.arcgis.com/3.23/"></script>
    <script>
      var map, grid;
    /*
    optional:
    1. make field heading color rusty brown (and white on hover)
    2. make sure odd selected rows turn blue too
    3. figure out how to make zoom label the image (can't inject button in the constructor)
    */
      require([
        "esri/map", "esri/layers/FeatureLayer", "esri/symbols/SimpleFillSymbol",
        "esri/tasks/query", "esri/Color", "esri/InfoTemplate",
        "dgrid/OnDemandGrid", "dgrid/Selection", "dojo/store/Memory",
        "dojo/_base/array", "dojo/dom", "dijit/form/Button",
        "dojo/parser", "dojo/_base/declare",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function(
        Map, FeatureLayer, SimpleFillSymbol,
        Query, Color, InfoTemplate,
        Grid, Selection, Memory,
        array, dom, Button,
        parser, declare
      ) {

        parser.parse();

        var StatesGrid = declare([Grid, Selection]);

        var columns = [{
          label: "",  //wasn't able to inject an HTML <div> with image here
          field: "ObjectID",
          formatter: makeZoomButton
        }, {
          label: "State",
          field: "STATE_NAME"
        }, {
          label: "Population",
          field: "POP2000"
        }];

        //restrict sorting to the state name field
        for (var i = 0; i < columns.length; i++) {
          if (i == 1) {
            columns[i].sortable = true;
          } else {
            columns[i].sortable = false;
          }
        }

        grid = new StatesGrid({
          bufferRows: Infinity,
          columns: columns
        }, "grid");

        map = new Map("map", {
          basemap: "gray",
          center: [-97.031, 42.618],
          zoom: 4
        });

        //add the states demographic data
        var statesLayer = new FeatureLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5", {
          mode: FeatureLayer.MODE_SELECTION,
          outFields: ["ObjectID", "STATE_NAME", "POP2000"],
          infoTemplate: new InfoTemplate("Attributes", "${*}")
        });

        //define a selection symbol
        var highlightSymbol = new SimpleFillSymbol().setColor(new Color([50, 205, 50, 0.25]));
        statesLayer.setSelectionSymbol(highlightSymbol);

        statesLayer.on("load", function(evt) {
          var query = new Query();
          query.where = "1=1";
          evt.layer.queryFeatures(query, function(featureSet) {
            var items = array.map(featureSet.features, function(feature) {
              return feature.attributes;
            });

            //idProperty must be set manually if value is something other than 'id'
            var memStore = new Memory({
              data: items,
              idProperty: "ObjectID"
            });
            window.grid.set("store", memStore);
            window.grid.set("sort", "STATE_NAME");

            grid.on(".field-ObjectID:click", function(e) {
              //retrieve the ObjectId when someone clicks on the magnifying glass
              if (e.target.alt) {
                zoomRow(e.target.alt);
              }
            });
          });
        });

        map.addLayers([statesLayer]);

        function makeZoomButton(id) {
          //set the feature 'id' as the alt value for the image so that it can be used to query below
          var zBtn = "<div data-dojo-type='dijit/form/Button'><img src='images/zoom.png' alt='" + id + "'";
          zBtn = zBtn + " width='18' height='18'></div>";
          return zBtn;
        }

        function zoomRow(id) {
          statesLayer.clearSelection();
          var query = new Query();
          query.objectIds = [id];
          statesLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(features) {
            //zoom to the selected feature
            map.infoWindow.setFeatures(features);
            map.infoWindow.show(features[0].geometry.getExtent().getCenter())
            var stateExtent = features[0].geometry.getExtent().expand(5.0);
            map.setExtent(stateExtent);
          });
        }

      });
    </script>
  </head>
  <body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
      <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" >
      </div>
      <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width:275px">
      <div id="grid"></div>
    </div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎01-12-2018

Thomas,

here is that sample updated for that:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Add zoom button to dgrid</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/dojo/resources/dojo.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/dgrid/css/dgrid.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
    <style>
      body,html,#main{
        margin:0;
        padding:0;
        height:100%;
        width:100%;
        font: 16px Geneva, Arial, Helvetica, sans-serif;
      }
      #map{
        padding:0;
        border: 1px solid #b5bcc7;
      }
      .dgrid { border: none; height: 100%; }
      .dgrid-column-0 {
        width: 35px;
      }
      .dgrid-row-odd {
        background: #FFFDF3;
      }
      td div img:hover {
        cursor: pointer;
      }
    </style>
    <script src="https://js.arcgis.com/3.23/"></script>
    <script>
      var map, grid;
    /*
    optional:
    1. make field heading color rusty brown (and white on hover)
    2. make sure odd selected rows turn blue too
    3. figure out how to make zoom label the image (can't inject button in the constructor)
    */
      require([
        "esri/map", "esri/layers/FeatureLayer", "esri/symbols/SimpleFillSymbol",
        "esri/tasks/query", "esri/Color", "esri/InfoTemplate",
        "dgrid/OnDemandGrid", "dgrid/Selection", "dojo/store/Memory",
        "dojo/_base/array", "dojo/dom", "dijit/form/Button",
        "dojo/parser", "dojo/_base/declare",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function(
        Map, FeatureLayer, SimpleFillSymbol,
        Query, Color, InfoTemplate,
        Grid, Selection, Memory,
        array, dom, Button,
        parser, declare
      ) {

        parser.parse();

        var StatesGrid = declare([Grid, Selection]);

        var columns = [{
          label: "",  //wasn't able to inject an HTML <div> with image here
          field: "ObjectID",
          formatter: makeZoomButton
        }, {
          label: "State",
          field: "STATE_NAME"
        }, {
          label: "Population",
          field: "POP2000"
        }];

        //restrict sorting to the state name field
        for (var i = 0; i < columns.length; i++) {
          if (i == 1) {
            columns[i].sortable = true;
          } else {
            columns[i].sortable = false;
          }
        }

        grid = new StatesGrid({
          bufferRows: Infinity,
          columns: columns
        }, "grid");

        map = new Map("map", {
          basemap: "gray",
          center: [-97.031, 42.618],
          zoom: 4
        });

        //add the states demographic data
        var statesLayer = new FeatureLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5", {
          mode: FeatureLayer.MODE_SELECTION,
          outFields: ["ObjectID", "STATE_NAME", "POP2000"],
          infoTemplate: new InfoTemplate("Attributes", "${*}")
        });

        //define a selection symbol
        var highlightSymbol = new SimpleFillSymbol().setColor(new Color([50, 205, 50, 0.25]));
        statesLayer.setSelectionSymbol(highlightSymbol);

        statesLayer.on("load", function(evt) {
          var query = new Query();
          query.where = "1=1";
          evt.layer.queryFeatures(query, function(featureSet) {
            var items = array.map(featureSet.features, function(feature) {
              return feature.attributes;
            });

            //idProperty must be set manually if value is something other than 'id'
            var memStore = new Memory({
              data: items,
              idProperty: "ObjectID"
            });
            window.grid.set("store", memStore);
            window.grid.set("sort", "STATE_NAME");

            grid.on(".field-ObjectID:click", function(e) {
              //retrieve the ObjectId when someone clicks on the magnifying glass
              if (e.target.alt) {
                zoomRow(e.target.alt);
              }
            });
          });
        });

        map.addLayers([statesLayer]);

        function makeZoomButton(id) {
          //set the feature 'id' as the alt value for the image so that it can be used to query below
          var zBtn = "<div data-dojo-type='dijit/form/Button'><img src='images/zoom.png' alt='" + id + "'";
          zBtn = zBtn + " width='18' height='18'></div>";
          return zBtn;
        }

        function zoomRow(id) {
          statesLayer.clearSelection();
          var query = new Query();
          query.objectIds = [id];
          statesLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(features) {
            //zoom to the selected feature
            map.infoWindow.setFeatures(features);
            map.infoWindow.show(features[0].geometry.getExtent().getCenter())
            var stateExtent = features[0].geometry.getExtent().expand(5.0);
            map.setExtent(stateExtent);
          });
        }

      });
    </script>
  </head>
  <body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
      <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" >
      </div>
      <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width:275px">
      <div id="grid"></div>
    </div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

ThomasMetos1 · ‎01-12-2018

Thank you Robert! This works perfectly!