I am trying to use JavaScript to add in a legend, dual scalebar, feature layer and info window together in one html page. However, when I can add in the scalebar, feature layer and info window, the addition of the info window javascript codes will cause all my functions to disappear. However when I try to put in the info window first and then add in the legend, scalebar and feature layer, everything disappears as well. Below is my code for adding in the legend, feature layer and scalebar and then the info window. Everything's working except the info window, and I can't figure out why. Like is there a problem with the placement of codes in the JavaScript? A particular sequence I failed to follow?
<!DOCTYPE html>
<html>
<head>
<!-- add in meta elements -->
<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>Mock Practical</title>
<!-- reference styles -->
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
<!-- reference arcGIS javascript -->
<script src="http://js.arcgis.com/3.9/"></script>
<style>
html, body {
height: 97%;
width: 98%;
margin: 1%;
}
#rightPane {
width: 20%;
}
#legendPane {
border: solid #97DCF2 1px;
}
</style>
<!-- javascript -->
<script>
var map;
require([
"esri/map", "esri/dijit/InfoWindowLite",
"esri/InfoTemplate", "esri/layers/FeatureLayer", "esri/dijit/Legend",
"dojo/_base/array", "dojo/parser", "esri/dijit/Scalebar",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dijit/layout/AccordionContainer", "dojo/dom-construct", "dojo/domReady!"
], function(
Map, InfoWindowLite, InfoTemplate, FeatureLayer, Legend,
arrayUtils, parser, Scalebar, domConstruct
) {
parser.parse();
map = new Map("map", {
basemap:"topo",
center: [-98.416, 39.781],
zoom: 6
});
// scalebar
var scalebar = new Scalebar({
map: map,
// "dual" displays both miles and kilmometers
// "english" is the default, which displays miles
// use "metric" for kilometers
scalebarUnit: "dual", attachTo:"bottom-center"
});
// feature layer
var featureLayer = new
FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields:["STATE_NAME", "SUB_REGION", "STATE_ABBR"]
});
//map.addLayer(featureLayer);
//add the legend
map.on("layers-add-result", function (evt) {
var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
return {layer:layer.layer, title:layer.layer.name};
});
if (layerInfo.length > 0) {
var legendDijit = new Legend({
map: map,
layerInfos: layerInfo
}, "legendDiv");
legendDijit.startup();
}
});
map.addLayers([featureLayer]);
var legendFeature = new
FeatureLayer("http://www.onemap.sg/ArcGIS/rest/services/TOC/MapServer/6", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields:["*"]
});
// infoWindow
var infoWindow = new InfoWindowLite(null, domConstruct.create("div", null, null,
map.root));
infoWindow.startup();
map.setInfoWindow(infoWindow);
var template = new InfoTemplate();
template.setTitle("<b>State name ${STATE_NAME} - State abbr ${STATE_ABBR}</b>");
template.setContent("${SUB_REGION} is in district ${STATE_NAME}.");
map.addLayer(featureLayer);
map.infoWindow.resize(200,75);
});
</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>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Pane 2'">
This pane could contain tools or additional content
</div>
</div>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow:hidden;">
</div>
</div>
</body>
</html>
I found some small faults in above snippet code. Below are the details.
Below is working code:
<!DOCTYPE html>
<html>
<head>
<!-- add in meta elements -->
<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>Mock Practical</title>
<!-- reference styles -->
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
<!-- reference arcGIS javascript -->
<script src="http://js.arcgis.com/3.9/"></script>
<style>
html, body {
height: 97%;
width: 98%;
margin: 1%;
}
#rightPane {
width: 20%;
}
#legendPane {
border: solid #97DCF2 1px;
}
</style>
<!-- javascript -->
<script>
var map;
require([
"esri/map", "esri/dijit/InfoWindowLite",
"esri/InfoTemplate", "esri/layers/FeatureLayer", "esri/dijit/Legend",
"dojo/_base/array", "dojo/parser", "esri/dijit/Scalebar",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dijit/layout/AccordionContainer", "dojo/dom-construct", "dojo/domReady!"
], function (
Map, InfoWindowLite, InfoTemplate, FeatureLayer, Legend,
arrayUtils, parser, Scalebar, BorderContainer, ContentPane, AccordionContainer, domConstruct
) {
parser.parse();
map = new Map("map", {
basemap: "topo",
center: [-98.416, 39.781],
zoom: 6
});
// scalebar
var scalebar = new Scalebar({
map: map,
// "dual" displays both miles and kilmometers
// "english" is the default, which displays miles
// use "metric" for kilometers
scalebarUnit: "dual", attachTo: "bottom-center"
});
var template = new InfoTemplate("<b>State name ${STATE_NAME} - State abbr ${STATE_ABBR}</b>", "${SUB_REGION} is in district ${STATE_NAME}.");
//template.setTitle("<b>State name ${STATE_NAME} - State abbr ${STATE_ABBR}</b>");
//template.setContent("${SUB_REGION} is in district ${STATE_NAME}.");
// map.infoWindow.resize(200, 75);
// feature layer
var featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["STATE_NAME", "SUB_REGION", "STATE_ABBR"],
infoTemplate: template
});
map.addLayer(featureLayer);
//add the legend
map.on("layers-add-result", function (evt) {
var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
return { layer: layer.layer, title: layer.layer.name };
});
if (layerInfo.length > 0) {
var legendDijit = new Legend({
map: map,
layerInfos: layerInfo
}, "legendDiv");
legendDijit.startup();
}
});
map.addLayers([featureLayer]);
var legendFeature = new FeatureLayer("http://www.onemap.sg/ArcGIS/rest/services/TOC/MapServer/6", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
});
// infoWindow
// var infoWindow = new InfoWindowLite(null, domConstruct.create("div", null, null,
//map.root));
// infoWindow.startup();
// map.setInfoWindow(infoWindow);
});
</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>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Pane 2'">
This pane could contain tools or additional content
</div>
</div>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow:hidden;">
</div>
</div>
</body>
</html>