Ryan,
Here is a sample that demos how to do that with your data (Coding style change to AMD)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Popup</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">
<style>
html,
body,
#map {
padding: 0;
margin: 0;
height: 100%;
}
</style>
<script src="http://js.arcgis.com/3.12/"></script>
<script>
var map;
require([
"esri/map",
"esri/dijit/Popup", "esri/dijit/PopupTemplate",
"esri/layers/FeatureLayer", "esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol", "esri/Color",
"dojo/dom-class", "dojo/dom-construct", "dojo/on",
"esri/tasks/query", "esri/geometry/Extent",
"dojo/domReady!"
], function (
Map,
Popup, PopupTemplate,
FeatureLayer, SimpleLineSymbol,
SimpleFillSymbol, Color,
domClass, domConstruct, on, Query, Extent
) {
var popup = new Popup({}, domConstruct.create("div"));
map = new Map("map", {
basemap: "gray",
zoom: 4,
infoWindow: popup,
extent: new Extent({xmin:-9093667.253259916,ymin:4998534.567771332,xmax:-9059993.366364839,ymax:5064387.406860692,spatialReference:{wkid:54032}})
});
var soiltemplate = new PopupTemplate({
title: "Soil"
});
var soils = "http://summitmaps.summitoh.net/arcgis/rest/services/Environmental_Mercator/MapServer/2";
soilsFeatureLayer = new FeatureLayer(soils, {
mode: FeatureLayer.MODE_SELECTION,
visible: true,
outFields: ["*"],
infoTemplate: soiltemplate
});
var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NULL, new SimpleLineSymbol(SimpleFillSymbol.STYLE_SOLID, new Color([100, 100, 100]), 2), new Color([0, 0, 255, 0.20]));
soilsFeatureLayer.setSelectionSymbol(symbol);
var canopytemplate = new PopupTemplate({
title: "Canopy"
});
var canopy = "http://summitmaps.summitoh.net/arcgis/rest/services/Environmental_Mercator/MapServer/5";
canopyFeatureLayer = new FeatureLayer(canopy, {
mode: FeatureLayer.MODE_SELECTION,
visible: true,
outFields: ["*"],
infoTemplate: canopytemplate
});
var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NULL, new SimpleLineSymbol(SimpleFillSymbol.STYLE_SOLID, new Color([100, 100, 100]), 2), new Color([0, 0, 255, 0.20]));
canopyFeatureLayer.setSelectionSymbol(symbol);
//var clickEvent = connect.connect(map, "onClick", selectFeatures);
map.on('click', selectFeatures);
function pointToExtent(map, point, toleranceInPixel) {
var pixelWidth = map.extent.getWidth() / map.width;
var toleranceInMapCoords = toleranceInPixel * pixelWidth;
return new Extent(point.x - toleranceInMapCoords,
point.y - toleranceInMapCoords,
point.x + toleranceInMapCoords,
point.y + toleranceInMapCoords,
map.spatialReference);
}
function selectFeatures(evt) {
var query = new Query();
query.geometry = pointToExtent(map, evt.mapPoint, 2);
var deferredCanopy = canopyFeatureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW);
var deferredSoil = soilsFeatureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW);
map.infoWindow.setFeatures([deferredSoil, deferredCanopy]);
map.infoWindow.show(evt.mapPoint);
}
map.addLayers([soils, canopy]);
});
</script>
</head>
<body class="claro">
<div id="map"></div>
</body>
</html>