ArcGIS server javascript coding help

Muqit_Zoarder — Thu, 04 Feb 2016 15:51:01 GMT

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>

<title>Dresden Building Web Map</title>

<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>

dojoConfig = {

parseOnLoad: true,

isDebug: true

};

</script>

// 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.visible;

});

// 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>

<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>

<h3>Layers</h3>

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>

<br>

</div>

</body>

</html>

so far result is

Thanks

topic Re: ArcGIS server javascript coding help in ArcGIS Server with JavaScript API Questions

ArcGIS server javascript coding help

Re: ArcGIS server javascript coding help

Re: ArcGIS server javascript coding help

Re: ArcGIS server javascript coding help

Re: ArcGIS server javascript coding help