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!
Solved! Go to Solution.
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>
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>
Thank you Robert! This works perfectly!