AnsweredAssumed Answered

ArcGIS server javascript coding help

Question asked by Muqitzoarder111 on Feb 4, 2016
Latest reply on May 6, 2016 by ppapadopoulosmarathondata-gr-esridist

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[l].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>

 

<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

Outcomes