Geoffery,
Here is the sample updated to not display the search widgets popup but instead trigger the layers standard popup.
<!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>Create web map from id</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.16/esri/css/esri.css">
<link rel="stylesheet" href="css/layout.css">
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
overflow: hidden;
font-family: "Helvetica";
}
#header {
border: solid 1px #A8A8A8;
overflow: hidden;
background-color: #999;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#C0C0C0));
background: -moz-linear-gradient(top, #fff, #C0C0C0);
height: 65px;
margin: 5px 5px;
}
.roundedCorners {
-o-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.shadow {
-webkit-box-shadow: 4px 4px 8px #adadad;
-moz-box-shadow: 4px 4px 8px #adadad;
-o-box-shadow: 4px 4px 8px #adadad;
box-shadow: 4px 4px 8px #adadad;
}
#title {
padding-top: 2px;
padding-left: 10px;
color: #000;
font-size: 18pt;
text-align: left;
text-shadow: 0px 1px 0px #e5e5ee;
font-weight: 700;
}
#subtitle {
font-size: small;
padding-left: 40px;
text-shadow: 0px 1px 0px #e5e5ee;
color: #000;
}
#rightPane {
background-color: #E8E8E8;
border: solid 2px #B8B8B8;
margin: 5px;
width: 20%;
}
#map {
background-color: #FFF;
border: solid 2px #B8B8B8;
margin: 5px;
padding: 0;
}
.esriLegendServiceLabel {
display: none;
}
#search {
display: block;
position: absolute;
z-index: 2;
top: 140px;
left: 74px;
}
</style>
<script src="http://js.arcgis.com/3.16/"></script>
<script>
require([
"dojo/parser",
"dojo/ready",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/dom",
"esri/map",
"esri/urlUtils",
"esri/arcgis/utils",
"esri/dijit/Legend",
"esri/dijit/Scalebar",
"esri/dijit/Search",
"dojo/on",
"dojo/_base/lang",
"esri/tasks/query",
"esri/tasks/QueryTask",
"dojo/domReady!"
], function (
parser,
ready,
BorderContainer,
ContentPane,
dom,
Map,
urlUtils,
arcgisUtils,
Legend,
Scalebar,
Search,
on,
lang,
Query,
QueryTask
) {
ready(function () {
parser.parse();
//if accessing webmap from a portal outside of ArcGIS Online, uncomment and replace path with portal URL
//arcgisUtils.arcgisUrl = "https://pathto/portal/sharing/content/items";
arcgisUtils.createMap("a95d21a0d6bd4d42b96b88acdd910b49", "map").then(function (response) {
//update the app
dom.byId("title").innerHTML = response.itemInfo.item.title;
dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;
var map = response.map;
//add the scalebar
var scalebar = new Scalebar({
map: map,
scalebarUnit: "english"
});
var search = new Search({
map: map,
enableInfoWindow: false
}, "search");
search.startup();
search.on("select-result", lang.hitch(this, function(result){
var geom = result.result.feature.geometry;
var queryTask = new QueryTask("http://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_ZIP_Codes/FeatureServer/0");
var query = new Query();
query.returnGeometry = true;
query.outFields = ["*"];
query.geometry = geom;
queryTask.execute(query, lang.hitch(this, function(results){
//here are the attributes of the zip poly that the search widgets results intersected.
console.info(results.features[0].attributes);
var scrPt = map.toScreen(geom);
map.emit("click", { bubbles: true, cancelable: true, screenPoint: scrPt, mapPoint: geom });
}));
}));
//add the legend. Note that we use the utility method getLegendLayers to get
//the layers to display in the legend from the createMap response.
var legendLayers = arcgisUtils.getLegendLayers(response);
var legendDijit = new Legend({
map: map,
layerInfos: legendLayers
}, "legend");
legendDijit.startup();
});
});
});
</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="header" class="shadow roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<div id="title"></div>
<div id="subtitle"></div>
</div>
<div id="map" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
<div id="search"></div>
<div id="rightPane" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
<div id="legend"></div>
</div>
</div>
</body>
</html>
