ArcGIS server javascript coding help
Hello All, i need a programming related help. I am working on development of a ArcGIS server based web application. I can now see my layer and the layer list but i want to see the pop-up info box of the feature (on click event). I tried with the coding from ArcGIS Javascript API sites. But something is going worng here. Please see my coding. Also I could not add the base mapGallery.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Dresden Building Web Map</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css">
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#ins {
background: #fff;
color: #444;
position: absolute;
font-family: arial;
height: 200px;
right: 30px;
margin: 5px;
padding: 10px;
top: 0px;
width: 300px;
z-index: 40;
}
h2 {
text-align: center;
margin: 4px 0;
}
h3 {
margin: 0 0 5px 0;
border-bottom: 1px solid #444;
}
.shadow {
box-shadow: 0 0 5px #888;
}
#map {
margin: 0;
padding: 0;
}
#feedback {
background: #fff;
color: #444;
position: absolute;
font-family: arial;
height: 300px;
left: 25px;
margin: 5px;
padding: 10px;
top: 170px;
width: 300px;
z-index: 40;
}
#note,
#hint {
font-size: 80%;
}
#note {
font-weight: 700;
padding: 0 0 10px 0;
}
#layerList {
width: 200px;
}
.dojoDndItemOver {
background: #ccc;
}
#search {
display: block;
position: absolute;
z-index: 2;
top: 100px;
left: 25px;
}
</style>
<script type="text/javascript">
dojoConfig = {
parseOnLoad: true,
isDebug: true
};
</script>
<script src="https://js.arcgis.com/3.13/"></script>
<script type="text/javascript">
// the infos object is used to track layer visibility and position
var map, buildLayer, infos = {};
require([
"esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/dijit/Search",
"esri/tasks/IdentifyParameters",
"esri/tasks/IdentifyTask",
"esri/InfoTemplate",
"esri/layers/DynamicLayerInfo",
"esri/layers/LayerDataSource",
"esri/layers/LayerDrawingOptions",
"esri/layers/TableDataSource",
"esri/Color",
"esri/renderers/SimpleRenderer",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"dojo/dom",
"dojo/dom-construct",
"dojo/dom-style",
"dojo/query",
"dojo/on",
"dojo/parser",
"dojo/_base/array",
"dojo/dnd/Source",
"dijit/registry",
"dijit/form/Button",
"dojo/domReady!"
], function (
Map, ArcGISDynamicMapServiceLayer, Search,
DynamicLayerInfo, LayerDataSource,
LayerDrawingOptions, TableDataSource,
Color, SimpleRenderer, IdentifyParameters, IdentifyTask, InfoTemplate,
SimpleFillSymbol, SimpleLineSymbol,
dom, domConstruct, domStyle,
query, on,
parser, arrayUtils, Source, registry
) {
parser.parse();
var dynamicLayerInfos;
map = new Map("map", {
basemap: "topo",
center: [13.7383200, 51.0508900],
zoom: 13,
slider: true
}), search = new Search({
map: map
}, "search");
search.startup();
var dndSource = new Source("layerList");
dndSource.on("DndDrop", reorderLayers);
buildLayer = new ArcGISDynamicMapServiceLayer("http://192.168.224.16:6080/arcgis/rest/services/Dresden/MapServer/");
buildLayer.on("load", function (e) {
dynamicLayerInfos = e.target.createDynamicLayerInfosFromLayerInfos();
arrayUtils.forEach(dynamicLayerInfos, function (info) {
var i = {
id: info.id,
name: info.name,
position: info.id
};
if (arrayUtils.indexOf(buildLayer.visibleLayers, info.id) > -1) {
i.visible = true;
} else {
i.visible = false;
}
infos[info.id] = i;
});
infos.total = dynamicLayerInfos.length;
e.target.setDynamicLayerInfos(dynamicLayerInfos, true);
});
// only create the layer list the first time update-end fires
on.once(buildLayer, "update-end", buildLayerList);
// hide the loading icon when the dynamic layer finishes updating
buildLayer.on("update-end", hideLoading);
map.addLayer(buildLayer);
function buildLayerList() {
dndSource.clearItems();
domConstruct.empty(dom.byId("layerList"));
var layerNames = [];
for (var info in infos) {
if (!infos[info].hasOwnProperty("id")) {
continue;
}
// only want the layer's name, don't need the db name and owner name
var nameParts = infos[info].name.split(".");
var layerName = nameParts[nameParts.length - 1];
var layerDiv = createToggle(layerName, infos[info].visible);
layerNames[infos[info].position] = layerDiv;
}
dndSource.insertNodes(false, layerNames);
}
function toggleLayer(e) {
showLoading();
for (var info in infos) {
var i = infos[info];
if (i.name === e.target.name) {
i.visible = !i.visible;
}
}
var visible = getVisibleLayers();
if (visible.length === 0) {
buildLayer.setVisibleLayers([-1]);
} else {
buildLayer.setDynamicLayerInfos(visible);
}
}
function reorderLayers() {
showLoading();
var newOrder = getVisibleLayers();
buildLayer.setDynamicLayerInfos(newOrder);
}
function getVisibleLayers() {
// get layer name nodes, build an array corresponding to new layer order
var layerOrder = [];
query("#layerList .dojoDndItem label").forEach(function (n, idx) {
for (var info in infos) {
var i = infos[info];
if (i.name === n.innerHTML) {
layerOrder[idx] = i.id;
// keep track of a layer's position in the layer list
i.position = idx;
break;
}
}
});
// find the layer IDs for visible layer
var ids = arrayUtils.filter(layerOrder, function (l) {
return infos
});
// get the dynamicLayerInfos for visible layers
var visible = arrayUtils.map(ids, function (id) {
return dynamicLayerInfos[id];
});
return visible;
}
function createToggle(name, visible) {
var div = domConstruct.create("div");
var layerVis = domConstruct.create("input", {
checked: visible,
id: name,
name: name,
type: "checkbox"
}, div);
on(layerVis, "click", toggleLayer);
var layerSpan = domConstruct.create("label", {
for: name,
innerHTML: name
}, div);
return div;
}
function showLoading() {
domStyle.set(dom.byId("loading"), "display", "inline-block");
}
function hideLoading() {
domStyle.set(dom.byId("loading"), "display", "none");
}
var iTask = new IdentifyTask(buildLayer);
function onIdentifyComplete (results) {
return arrayUtils.map(results, function (result) {
var feature = result.feature,
title = result.layerName,
content;
switch(title) {
case "gis.osm_buildings_v06":
content = "${*}"; //"OSMID: ${osm_id}<br />CODE: ${code}<br />TYPE: ${type}";
break;
/*default:
content = "${*}";*/
}
feature.infoTemplate = new InfoTemplate(title, content);
return feature;
});
}
function onMapClick (event) {
var params = new IdentifyParameters(),
defResults;
params.geometry = event.mapPoint;
params.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
params.mapExtent = map.extent;
params.returnGeometry = true;
params.width = map.width;
params.height= map.height;
params.spatialReference = map.spatialReference;
params.tolerance = 3;
defResults = iTask.execute(params).addCallback(onIdentifyComplete);
map.infoWindow.setFeatures([defResults]);
map.infoWindow.show(event.mapPoint);
}
function onMapLoad() {
map.on("click", onMapClick);
}
map.addLayer(buildLayer);
if (map.loaded) {
onMapLoad();
} else {
map.on("load", onMapLoad);
}
});
</script>
</head>
<body class="claro">
<div style="width: 100%; height: 100%; margin: 0;">
<div id="map">
<div id="search"></div>
<div id="ins" class="shadow">
<h2>BUILDING INFORMATION WEB MAPPING OF DRESDEN </h2>
<p>Click on the map to view the building information data of Dresden. This is based on open source data.</p>
</div>
<div id="feedback" class="shadow">
<h3>Layers</h3>
<div id="info">
<div id="hint">
Click and drag a map layer name below to re-order layers. The first layer in the list will be drawn on top.
</div>
<strong>Map Layers</strong>
<img id="loading" src="https://dl.dropboxusercontent.com/u/2654618/loading_black.gif">
<br>
<div id="layerList"></div>
</div>
</div>
</div>
</div>
</body>
</html>
so far result is
Thanks
