Popup Window

NicholasKnabe · ‎07-30-2013

I have a popup window when you click on my features. I have 15 different layers but only one is visible from the start. I cannot for the life of me figure out how to identify just the layers that are visible. I have gone through all the tutorials and read through all the forums as well. I had it working before I got my rest services to say that the features are visible by default.

Also I cannot figure out how to incorporate a hyperlink (youtube link) attribute into my popup window so it is clickable

Thanks

KenBuja · ‎07-30-2013

What I was suggesting is to try this with a test service that isn't secured. If that works correctly, then there may be a bug when working with secured services.

For example, this code works as expected. Try substituting your service in to see what happens.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>TOC</title>

    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">

    <style>
        html, body
        {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0px;
            font-family: helvetica, arial, sans-serif;
            font-size: 90%;
        }


        #leftPane
        {
            width: 280px;
            overflow: auto;
        }
        /* this line hide layers when out of scale for the inline TOC */
        #scaleDiv .agsTOCOutOfScale
        {
            display: none;
        }
    </style>
    <script type="text/javascript">
        var djConfig = {
            parseOnLoad: true,
            packages: [{
                "name": "agsjs",
                "location": location.pathname.replace(/\/[^/]+$/, "") + '/agsjs'
                //"location": 'http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/2.05/xbuild/agsjs' // for xdomain load
            }]
        };
    </script>

    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>

    <script type="text/javascript">
        var map;
        var identifyTask, identifyParams;
        var urlSEFCRI = "http://egisws02.nos.noaa.gov/ArcGIS/rest/services/biogeo/SEFCRI/MapServer";

        var layerDynamic;
        var oldLayerName;
        var clickGraphicLayer;
        var visibleLayers;
        var initialExtent;

        require([
            "dojo/_base/connect",
            "dojo/_base/array",
            "dojo/parser",
            "dojo/ready",
            "dojo/Deferred",
            "dojo/dom",
            "dojo/domReady",

            "dijit/layout/ContentPane",
            "dijit/layout/TabContainer",
            "dijit/registry",
            "dijit/Dialog",

            "esri/map",
            "esri/InfoTemplate",

            "esri/dijit/Basemap",
            "esri/dijit/BasemapGallery",
            "esri/dijit/BasemapLayer",
            "esri/dijit/InfoWindow",

            "agsjs/dijit/TOC",

            "esri/arcgis/utils",

            "dijit/Menu",
            "dijit/form/DropDownButton",
            "dijit/layout/BorderContainer",

            "dojo/domReady!"

        ], function (
                connect, array, parser, ready, Deferred, dom, domReady,
                ContentPane, TabContainer, registry, Dialog,
                Map, InfoTemplate,
                Basemap, BasemapGallery, BasemapLayer, InfoWindow) {
            ready(function () {
                //parser.parse();
            });

            map = new Map("map", {
                basemap: "oceans",
                showAttribution: false,
                logo: false,
                center: [-80.2, 26.67],
                zoom: 11
            });
            map.resize();
            layerDynamic = new esri.layers.ArcGISDynamicMapServiceLayer(urlSEFCRI, {
                id: 'Dynamic'
            });
            map.addLayers([layerDynamic]);
            layerDynamic.setVisibleLayers([0]);

            map.on("layers-add-result", function (event) {

                console.log("layers-add-result");

                try {
                    var toc = new agsjs.dijit.TOC({
                        map: map,
                        layerInfos: [{
                            layer: layerDynamic,
                            title: "Legend",
                            slider: true
                        }]
                    }, 'tocDiv');
                    toc.startup();
                }
                catch (e) {
                    console.log(e.message);
                }

                mapReady(map);

            });

            layerDynamic.on("load", function () {
                var deferred = new Deferred();
                deferred = map.setExtent(layerDynamic.initialExtent, true);
                deferred.then(function () {
                    console.log("Extent set");
                    initialExtent = map.extent;
                });
            });

            var resizeTimer;

            map.on("load", function (theMap) {
                connect.connect(dijit.byId('map'), 'resize', function () { //resize the map if the div is resized
                    clearTimeout(resizeTimer);
                    resizeTimer = setTimeout(function () {
                        map.resize();
                        map.reposition();
                    }, 500);
                });
            });


            function mapReady(map) {
                console.log("MapReady");
                map.on("click", executeIdentifyTask);
                identifyTask = new esri.tasks.IdentifyTask(urlSEFCRI);
                identifyParams = new esri.tasks.IdentifyParameters();
                identifyParams.tolerance = 3;
                identifyParams.returnGeometry = true;
                //identifyParams.layerIds = [0, 117];
                identifyParams.layerIds = layerDynamic.visibleLayers;
                identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;
                identifyParams.width = map.width;
                identifyParams.height = map.height;

                map.infoWindow.resize(415, 200);
                map.infoWindow.setTitle("Results");
            }

            function executeIdentifyTask(evt) {
                map.graphics.clear();
                identifyParams.geometry = evt.mapPoint;
                identifyParams.mapExtent = map.extent;
                identifyParams.layerIds = layerDynamic.visibleLayers;

                oldLayerName = "";

                var deferred = identifyTask.execute(identifyParams);
                deferred.addCallback(function (response) {
                    return dojo.map(response, function (result) {
                        var feature = result.feature;
                        var infoTemplate = new esri.InfoTemplate("test", "${*}");
                        var contentString = "";
                        var sp = new Array();
                        var sp = feature.attributes;

                        contentString += "<b>" + result.layerName + "</b><hr width = '90%'>";

                        for (x in sp) {
                            if (x != "OBJECTID" && x != "Shape") {
                                contentString += "<i>" + x + "</i>: " + feature.attributes + "<br/>";
                            }
                        }
                        var infoTemplate = new esri.InfoTemplate();
                        infoTemplate.setTitle("Results");
                        infoTemplate.setContent(contentString);
                        var data = {
                            identifier: "OBJECTID",
                            label: "ID",
                            items: sp
                        };

                        feature.setInfoTemplate(infoTemplate);

                        return feature;
                    });
                });
                map.infoWindow.setFeatures([deferred]);
                map.infoWindow.show(evt.mapPoint);
            }


        });

    </script>

</head>
<body class="claro">
    <div id="content" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;">
        <div dojotype="dijit.layout.ContentPane" id="leftPane" region="left" splitter="true">
            <div id="tocDiv">
            </div>
        </div>
        <div id="map" dojotype="dijit.layout.ContentPane" region="center">
        </div>
    </div>
</body>
</html>