I'm working with the layer list widget LayerList widget | ArcGIS API for JavaScript 3.18. I've combined it into a map with the basemap gallery and the raster identify popup. The problem is that I can't see the layer list from the map service. It works just fine using the example script above. I'm also wondering if it's possible to make the layer list pane only go down a quarter of the page instead of all the way down so it looks like a widget within the map and not a separate box next to the map? Here is my code:
<!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>Identify with Popup</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.18/esri/css/esri.css">
<style>
html, body, .container, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
margin: 0;
font-family: "arial";
}
.esriScalebar {
padding: 20px 20px;
}
#layerListPane {
width: 18%;
}
.esriLayer {
background-color: #fff;
}
.esriLayerList .esriList {
border-top: none;
}
.esriLayerList .esriTitle {
background-color: #fff;
border-bottom: none;
}
.esriLayerList .esriList ul {
background-color: transparent;
}
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="http://js.arcgis.com/3.18/"></script>
<script>
require([
"esri/map",
"esri/InfoTemplate",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/dijit/LayerList",
"esri/arcgis/utils",
"esri/dijit/BasemapGallery",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/tasks/IdentifyTask",
"esri/tasks/IdentifyParameters",
"esri/dijit/Popup",
"dojo/_base/array",
"esri/Color",
"dojo/dom-construct",
"dojo/parser",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/TitlePane",
"dojo/domReady!"
], function (
Map, InfoTemplate, ArcGISDynamicMapServiceLayer,
LayerList, arcgisUtils,
BasemapGallery, SimpleFillSymbol,
SimpleLineSymbol, IdentifyTask, IdentifyParameters, Popup,
arrayUtils, Color, domConstruct, parser
) {
parser.parse();
var 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: "gray",
center: [-96.8, 38.5],
zoom: 4,
infoWindow: popup
});
var basemapGallery = new BasemapGallery({
showArcGISBasemaps: true,
map: map
}, "basemapGallery");
basemapGallery.startup();
basemapGallery.on("error", function(msg) {
console.log("basemap gallery error: ", msg);
});
map.on("load", mapReady);
var floodURL = "http://gis.mymetcon.com/arcgis/rest/services/Flood_Potential/MapServer";
map.addLayer(new ArcGISDynamicMapServiceLayer(floodURL,
{ opacity: .75 }));
var myWidget = new LayerList({
map: map,
layers: [{
layer: floodURL,
id: "Forecast Days",
subLayers: true
}],
//layer: floodLayer
}, "layerList");
function mapReady () {
map.on("click", executeIdentifyTask);
//create identify tasks and setup parameters
identifyTask = new IdentifyTask(floodURL);
identifyParams = new IdentifyParameters();
identifyParams.tolerance = 1;
identifyParams.returnGeometry = true;
identifyParams.layerIds = [0, 1, 2, 3, 4, 5];
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) {
// response is an array of identify result objects
// Let's return an array of features.
return arrayUtils.map(response, function (result) {
var feature = result.feature;
var layerName = result.layerName;
//alert(result);
feature.attributes.layerName = layerName;
var risklevel = feature.attributes[ 'Pixel Value']
if(risklevel === '0'){risklevel = 'No Flooding';}
else if(risklevel === '1'){risklevel = 'Possible Flooding';}
else if(risklevel === '2'){risklevel = 'Probable Flooding';}
else if(risklevel === '3'){risklevel = 'Flooding';}
else if(risklevel === '4'){risklevel = 'More Significant Flooding';}
else if(risklevel === '5'){risklevel = 'Significant Flooding';}
else {risklevel = 'No Flooding';}
var floodRiskTemplate = new InfoTemplate(layerName,
"Risk Level: " + risklevel);
feature.setInfoTemplate(floodRiskTemplate);
return feature;
});
});
// InfoWindow expects an array of features from each deferred
// object that you pass. If the response from the task execution
// above is not an array of features, then you need to add a callback
// like the one above to post-process the response and return an
// array of features.
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 style="position:absolute; left:75px; top:20px; z-Index:999;">
<div data-dojo-type="dijit/TitlePane" style="font-family:arial;background-color:lightgray"
data-dojo-props="title:'Switch Basemap', closable:false, open:false">
<div id="basemapGallery"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Solved! Go to Solution.
I think you have to apply the startup function..
myWidget.startup()
Thanks! That works. Still wondering if it's possible to resize or embed the layer list widget so it's basically just a box over the basemap?
Thats just some CSS and HTML modification of the sandbox sample you provided.
Solution
<!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>Layer List Dijit</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
<style>
html, body, .container, #map {
height:100%;
width:100%;
margin:0;
padding:0;
margin:0;
font-family: "Open Sans";
}
#map {
padding:0;
}
#layerListPane{
position: absolute;
/* top: 100px; */
right: 10px;
width: 300px;
z-index: 101;
padding: 10px;
bottom: 10px;
box-shaddow: 0 0 5px 0 #DDD;
border:1px solid #000;
background-color:#FFF;
}
.esriLayer{
background-color: #fff;
}
.esriLayerList .esriList{
border-top:none;
}
.esriLayerList .esriTitle {
background-color: #fff;
border-bottom:none;
}
.esriLayerList .esriList ul{
background-color: #fff;
}
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="https://js.arcgis.com/3.18/"></script>
<script>
require([
"esri/arcgis/utils",
"esri/dijit/LayerList",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(
arcgisUtils,
LayerList
) {
//Create a map based on an ArcGIS Online web map id
arcgisUtils.createMap("f63fed3f87fc488489e27c026fa5d434", "map").then(function(response){
var myWidget = new LayerList({
map: response.map,
layers: arcgisUtils.getLayerList(response)
},"layerList");
myWidget.startup();
});
});
</script>
</head>
<body class="claro">
<div id="layerListPane">
<div id="layerList"></div>
</div>
<div id="map"></div>
</body>
</html>
Drew
Ah, thanks. I was messing with the <div> content pane.
Another issue I'm having is that the identify task popup is showing every layer, regardless of which layer is selected in the layer list. I tried changing identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL; to OPTION_VISIBLE to no avail.
At a quick glance I would say its because you have the layerId's defined.
Remove this line
identifyParams.layerIds = [0, 1, 2, 3, 4, 5];
You can read more on the IdentifyParameters below
IdentifyParameters | API Reference | ArcGIS API for JavaScript 3.18
Drew
Try setting the layerIds property not when you initialize the map, but in the executeIdentifyTask function, setting it to the visibleLayers of the layer
I tried both of these, I set the layer IDs to an empty list and moved identifyParams.layerIds = [];
identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_VISIBLE; under the identify task. Now it only gives me the top layer, regardless of which layer is visible.
First, set a variable for the layer when constructing the map to be used in the executeIdentifyTask
var floodLayer = new ArcGISDynamicMapServiceLayer(floodURL, { opacity: .75 }));
Then use that in the function
identifyParams.layerIds = floodLayer.visibleLayers;