When the map is loaded, sometimes it displays dynamic map layer and legends and sometimes it does not. I am not sure this is the error caused by ArcGIS Server Manager because other maps are loaded fine from the same ArcGIS Server. Could anyone please check my codes below and tell me what possibly is wrong? Thanks
<!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></title>
<link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
<style>
html, body{
height: 100%;
width: 100%;
margin-top: 10px;
overflow: hidden;
padding-bottom: 0;
}
#map {
padding-top: 8px;
width: 100%;
height: 100%;
padding-bottom: 20px;
margin-left: 0;
}
#navToolbar {
border: 2px solid lightgray;
width: 14%;
border-radius: 10px;
}
.zoominIcon {
background-image: url(Images/zoom-in.png);
width: 16px;
height: 16px;
}
.zoomoutIcon {
background-image: url(Images/zoom-out.png);
width: 16px;
height: 16px;
}
.zoomfullextIcon {
background-image: url(Images/zoom-full.png);
width: 16px;
height: 16px;
}
.zoomprevIcon {
background-image: url(Images/zoom-previous.png);
width: 16px;
height: 16px;
}
.zoomnextIcon {
background-image: url(Images/zoom-next.png);
width: 16px;
height: 16px;
}
.panIcon {
background-image: url(Images/pan.png);
width: 16px;
height: 16px;
}
.deactivateIcon {
background-image: url(Images/deactivate.png);
width: 16px;
height: 16px;
}
#search {
display: block;
position: absolute;
z-index: 2;
top:53px;
left: 90px;
}
#rightPane {
width: 8%;
padding-bottom: 20px;
}
#legendPane {
border: solid #97DCF2 1px;
}
.claro .dijitTooltipContainer {
background-image: none;
border: 1px solid #444444;
background-color: #444444;
color: #FFFFFF;
}
.claro .dijitTooltipConnector {
background-image: none;
}
</style>
<script src="https://js.arcgis.com/3.18/"></script>
<script>
var map, navToolbar;
require([
"esri/map",
"esri/toolbars/navigation",
"esri/dijit/Search",
"esri/layers/FeatureLayer",
"esri/InfoTemplate",
"esri/dijit/BasemapGallery",
"esri/dijit/Legend",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/ImageParameters",
"esri/Color",
"esri/dijit/Popup",
"esri/dijit/PopupTemplate",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"dojo/on",
"dojo/dom",
"dojo/parser",
"dojo/dom-construct",
"dijit/registry",
"dijit/Toolbar",
"dijit/form/Button",
"dijit/TitlePane",
"dijit/layout/ContentPane",
"dijit/layout/AccordionContainer",
"dijit/layout/BorderContainer",
"dojo/domReady!"
],
function (Map, Navigation,Search, FeatureLayer, InfoTemplate, BasemapGallery, Legend, ArcGISDynamicMapServiceLayer,
ImageParametrs, Color, Popup, PopupTemplate, SimpleFillSymbol, SimpleLineSymbol, on, dom, parser, domConstruct, registry) {
parser.parse();
// var navToolbar;
var legendLayers = [];
var sls = new SimpleLineSymbol("solid", new Color("#444444"), 3);
var sfs = new SimpleFillSymbol("solid", sls, new Color([68, 68, 68, 0.25]));
var popupOptions = {
fillSymbol: sfs,
marginLeft: "70",
marginTop: "100"
};
//create a popup to replace the map's info window
var popup = new Popup(popupOptions, domConstruct.create("div"));
map = new Map("map", {
basemap: "topo",
center: [-88.55, 43.12],
zoom: 9,
infoWindow: popup
});
var popupTemplate = new PopupTemplate({
"title": "Location",
"description": "<b>Name: </b> {Name} </br><br/> <b>Industry: </b> {Industry3} </br></br> "
});
var popupTemplate2 = new PopupTemplate({
title: "Area", description: "Region: {Region}"
});
var featureLayer = new FeatureLayer("RESTURL/FeatureServer/2", {
mode: FeatureLayer.MODE_SNAPSHOT,
infoTemplate: popupTemplate,
opacity:1,
outFields: ["*"]
});
var featureLayer2 = new FeatureLayer("URL/FeatureServer/5",{
mode: FeatureLayer.MODE_ONDEMAND,
opacity:0,
outFields: ["*"],
infoTemplate: popupTemplate2
});
map.addLayers([dynamicLayer]);
map.addLayer(featureLayer2);
map.addLayer(featureLayer);
var basemapGallery = new BasemapGallery({
showArcGISBasemaps: true,
map: map
}, "basemapGallery");
basemapGallery.startup();
basemapGallery.on("error", function (msg) {
console.log("basemap gallery error: ", msg);
});
var imageParameters = new ImageParametrs();
imageParameters.format = "jpeg";
var dynamicLayer = new ArcGISDynamicMapServiceLayer("RESTURL/MapServer", {
id: 'Area',
"imageParameters": imageParameters
});
legendLayers.push({ layer: dynamicLayer, title: 'Area' });
map.on('layers-add-result', function () {
var legend = new Legend({
map: map,
layerInfos: legendLayers
}, "legendDiv");
legend.startup();
});
map.addLayers([dynamicLayer]);
navToolbar = new Navigation(map);
on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);
registry.byId("zoomin").on("click", function () {
navToolbar.activate(Navigation.ZOOM_IN);
});
registry.byId("zoomout").on("click", function () {
navToolbar.activate(Navigation.ZOOM_OUT);
});
registry.byId("zoomfullext").on("click", function () {
navToolbar.zoomToFullExtent();
});
registry.byId("zoomprev").on("click", function () {
navToolbar.zoomToPrevExtent();
});
registry.byId("zoomnext").on("click", function () {
navToolbar.zoomToNextExtent();
});
registry.byId("pan").on("click", function () {
navToolbar.activate(Navigation.PAN);
});
registry.byId("deactivate").on("click", function () {
navToolbar.deactivate();
});
function extentHistoryChangeHandler () {
registry.byId("zoomprev").disabled = navToolbar.isFirstExtent();
registry.byId("zoomnext").disabled = navToolbar.isLastExtent();
}
var search = new Search({
sources: [{
featureLayer: new FeatureLayer("RESTURL/FeatureServer/5", {
outFields: ["*"],
opacity:0,
infoTemplate: new InfoTemplate("Metroplex", "Region: ${Region}")
}),
outFields: ["Metro_Region"],
displayField: "Metro_Region",
suggestionTemplate: "Metro Region:${Metro_Region}",
name: "Metroplex",
placeholder: "Enter a Metroplex Region",
enableSuggestions: true
}],
map: map
}, "search");
search.startup();
});
</script>
</head>
<body class="claro" >
<div id="content" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline', gutters:true"
style="width: 100%; height: 100%; margin: 0;">
<div id="rightPane"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'right'">
<div data-dojo-type="dijit/layout/AccordionContainer">
<div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
data-dojo-props="title:'Legend', selected:true">
<div id="legendDiv"></div>
</div>
<span>Loading...</span>
</div>
</div>
<div id="map"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'"
style="overflow:hidden;">
</div>
</div>
<div id="navToolbar" data-dojo-type="dijit/Toolbar" style="position:absolute; right:200px; top:52px; z-Index:1000;">
<div data-dojo-type="dijit/form/Button" id="pan" data-dojo-props="iconClass:'panIcon'"></div>
<div data-dojo-type="dijit/form/Button" id="zoomin" data-dojo-props="iconClass:'zoominIcon'"></div>
<div data-dojo-type="dijit/form/Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon'"></div>
<div data-dojo-type="dijit/form/Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon'"></div>
<div data-dojo-type="dijit/form/Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon'"></div>
<div data-dojo-type="dijit/form/Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon'"></div>
<div data-dojo-type="dijit/form/Button" id="deactivate" data-dojo-props="iconClass:'deactivateIcon'"></div>
</div>
<div id="search"></div>
<div style="position:absolute; right:500px; top:53px; z-Index:999;">
<div data-dojo-type="dijit/TitlePane"
data-dojo-props="title:'Switch Basemap', closable:false, open:false">
<div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
<div id="basemapGallery"></div>
</div>
</div>
</div>
</body>
</html>
