I'm trying to use the JS API (3.20), and I'd like to leverage the popups from my webmap, in my application. How do I do that, as I'm currently displaying the layers, in my code (without using the webMap). Let me make that more clearer- Can I use my web map without referring to individual layers in my code, with the .addLayers method? I'm pretty new to programming. If so, How?
And, if calling/using a webmap (only) is possible, can I still be able to query layers in the webmap?
How?
Help!
Laura,
Here is a sample that uses a web map and uses a layer in that web map to add to the Search widgets sources:
<!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="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
body {
background-color: :#666666;
overflow: hidden;
font-family: "Verdana", serif;
}
#header {
-moz-border-radius: 5px;
margin: 2px;
padding-top: 4px;
padding-left: 15px;
background-color: #666666;
color: #cccccc;
font-size: 9pt;
font-weight: bold;
border: solid 20px ##227AB4;
height: 45px;
}
#rightPane {
margin-left: 3px;
padding: 10px;
background-color: white;
color: #33333;
border: solid 1px #959595;
width: 20%;
}
#map {
margin: 0px;
height: 100%;
width: 100%
}
.shadow {
-o-border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
box-shadow: 8px 8px 16px #323834;
-webkit-box-shadow: 8px 8px 16px #323834;
-moz-box-shadow: 8px 8px 16px #323834;
-o-box-shadow: 8px 8px 16px #323834;
}
#search {
display: block;
position: absolute;
z-index: 99;
top: 103px;
left: 74px;
}
</style>
<script src="https://js.arcgis.com/3.20/"></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/tasks/query",
"esri/tasks/QueryTask",
"esri/dijit/Search",
"esri/InfoTemplate",
"dojo/domReady!"
], function(
parser,
ready,
BorderContainer,
ContentPane,
dom,
Map,
urlUtils,
arcgisUtils,
Legend,
Scalebar,
Query,
QueryTask,
Search,
InfoTemplate
) {
ready(function() {
parser.parse();
arcgisUtils.createMap("ef9c7fbda731474d98647bebb4b33c20", "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;
var webmapLayers = arcgisUtils.getLegendLayers(response);
var search = new Search({
enableButtonMode: true, //this enables the search widget to display as a single button
enableLabel: false,
enableInfoWindow: true,
showInfoWindowOnSelect: false,
map: map
}, "search");
var sources = search.get("sources");
console.info(webmapLayers);
sources.push({
featureLayer: webmapLayers[1].layer,
searchFields: ["NAME"],
displayField: "NAME",
exactMatch: false,
outFields: ["NAME", "STATE", "COUNTY_NAM"],
name: "High Cost Loans by County Name",
placeholder: "Calhoun",
maxResults: 6,
maxSuggestions: 6,
//Create an InfoTemplate and include three fields
infoTemplate: new InfoTemplate("High Cost Loans", "State: ${STATE}</br>Name: ${NAME}</br>County: ${COUNTY_NAM}"),
enableSuggestions: true,
minCharacters: 0
});
//Set the sources above to the search widget
search.set("sources", sources);
search.startup();
//add the scalebar
var scalebar = new Scalebar({
map: map,
scalebarUnit: "english"
});
var legendDijit = new Legend({
map: map,
layerInfos: webmapLayers
}, "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="search"></div>
<div id="map" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></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>
Hey Robert,
Thank you. I still don't see where you've defined the layer variable... How has this line defined the actual layer service?
var webmapLayers = arcgisUtils.getLegendLayers(response)
Also, I'm specifically looking for one where I can query, and not really search...but same concept of using both WebMap and the layers. I'd like to know if there's a way to do so without the "arcgisUtils" method.
Thanks!
Laura,
Why do you have a requirement to not use arcgisUtils?... That is the normal method of working with web maps in the JS API.
Using the arcgisUtils to parse the web map allows you to get to the web maps layers and thus the actual layer objects which can be used in a queryTask or the like.
Oh, Ok! Let me try that.