I want to combine the popup function (identify the pixel values or feature attributes for MapService) and layerlist widget, potentially add some other widgets. I follow the example for the ESRI's javascript API description but the widgets seem to be misplaced and the popup does not show in the current location. The content plane has been set to the right and the widgets to the left, but still not working. I would appreciate any inputs regarding this issue.
<!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>soil map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/themes/calcite/esri/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/dijit/themes/claro/claro.css">
<style>
html, body, .container, #map {
height:100%;
width:100%;
margin:0;
padding:0;
margin:0;
font-family: "Open Sans";
}
#map {
padding:0;
}
#layerListPane{
width:25%;
}
.esriLayer{
background-color: #fff;
}
.esriLayerList .esriList{
border-top:none;
}
.esriLayerList .esriTitle {
background-color: #fff;
border-bottom:none;
}
.esriLayerList .esriList ul{
background-color: #fff;
}
#search {
display: block;
position: absolute;
z-index: 3;
top: 20px;
left: 75px;
}
#HomeButton {
position: absolute;
top: 100px;
left: 15px;
z-index: 50;
}
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="http://js.arcgis.com/3.29/"></script>
<script>
require([
"esri/dijit/Popup",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/Color",
"dojo/dom-construct",
"esri/map",
"esri/dijit/HomeButton",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/dijit/LayerList",
"esri/dijit/Search",
"esri/dijit/Legend",
"esri/dijit/Scalebar",
"esri/tasks/IdentifyTask",
"esri/tasks/IdentifyParameters",
"dojo/_base/array",
"esri/InfoTemplate",
"dojo/dom",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function (
Popup, SimpleFillSymbol, SimpleLineSymbol, Color, domConstruct,
Map, HomeButton, ArcGISDynamicMapServiceLayer, LayerList, Search, Legend, Scalebar,
IdentifyTask, IdentifyParameters, arrayUtils, InfoTemplate,
dom
){
var map, identifyTask, identifyParams;
var popup = new Popup({
fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]))
}, domConstruct.create("div"));
map = new Map("map", {
basemap: "topo",
center: [-90.125, 40],
zoom: 8,
infoWindow: popup
});
map.on("load", mapReady);
var rasterURL1 = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer";
var operationalLayer1 = new ArcGISDynamicMapServiceLayer(rasterURL1, { opacity: .80 });
map.addLayers([operationalLayer1]);
var layerList = new LayerList({
map: map,
layers: [{
layer: operationalLayer1,
id: "sub"
}],
showLegend: true,
showSubLayers: false,
showOpacitySlider: true
},"layerList");
layerList.startup();
var rasterURL2 = "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer";
map.addLayer(new ArcGISDynamicMapServiceLayer(rasterURL2,
{ opacity: .90 }));
var search = new Search({
map: map,
}, dom.byId("search"));
search.startup();
var home = new HomeButton({
map: map
}, "HomeButton");
home.startup();
var scalebar = new Scalebar({
map: map,
scalebarUnit: "dual"
});
scalebar.startup();
function mapReady () {
map.on("click", executeIdentifyTask);
//create identify tasks and setup parameters
identifyTask = new IdentifyTask(rasterURL1);
identifyParams = new IdentifyParameters();
identifyParams.tolerance = 1;
identifyParams.returnGeometry = true;
identifyParams.layerIds = [0,1];
identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
identifyParams.width = map.width;
identifyParams.height = map.height;
}
function executeIdentifyTask (event) {
identifyParams.geometry = event.mapPoint;
identifyParams.mapExtent = map.extent;
var deferred = identifyTask
.execute(identifyParams);
deferred.addCallback(function (response) {
return arrayUtils.map(response, function (result) {
var feature = result.feature;
var layerName = result.layerName;
//alert(result);
feature.attributes.layerName = layerName;
if (layerName === 'Census Block Points') {
var taxParcelTemplate = new InfoTemplate(layerName,
"the oject value is: " + feature.attributes['STATE_FIPS']);
feature.setInfoTemplate(taxParcelTemplate);
}
else if (layerName === 'KS_FIELD_OUTLINES_SPRING2005_GEONAD27') {
var taxParcelTemplate = new InfoTemplate(layerName,
"the oject value is: : " + feature.attributes['FIELD_NAME']);
feature.setInfoTemplate(taxParcelTemplate);
}
return feature;
});
});
map.infoWindow.setFeatures([deferred]);
map.infoWindow.show(event.mapPoint);
}
});
</script>
</head>
<body class="claro">
<div class="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false">
<div id="layerListPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
<div id="layerList"></div>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
<div id="search" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'"></div>
<div id="legendDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'"></div>
<div id="HomeButton" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'"></div>
</div>
</body>
</html>
Solved! Go to Solution.
Robert,
Thanks, but I still do not understand the concept of async tasks. I am new to javascript and is there any simpler way to do this? What I need is just to provide users with toggle on/off (by click) for layers and popup for currently toggled layers.
Feng,
Sorry I not sure how I could provide any more help short of writing the code for you.
Robert,
I found another example from this thread and try to incorporate into my code but it does not work correctly. I will create a new question and would appreciate your inputs. Thanks.
https://community.esri.com/thread/94154
Feng