Opening Info Window When Zooming to Layer with Zoom Grid Sidebar

Question

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 · Accepted Answer

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

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 = "

"</SPAN> <SPAN class="operator token">+</SPAN> id <SPAN class="operator token">+</SPAN> <SPAN class="string token">"

; zBtn = zBtn + " width='18' height='18'>

"; 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> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍