topic Rss Checkbox / Table of Contents map.on issue??? in ArcGIS JavaScript Maps SDK Questions

Rss Checkbox / Table of Contents map.on issue???

MarkCunningham1 — Thu, 01 May 2014 12:18:32 GMT

[ATTACH=CONFIG]33521[/ATTACH]I currently have a Table of Contents working from a Dynamic Map Service under the Layers button. I would like to add a few RSS layers under the RSS Layers Button with a check box and name. I can't figure out why the checkbox is not appearing for my rss layer. I assume has to do with map.on("layers-add-result",......

<!DOCTYPE html>
<html>
<head>
    <title>Map</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
    <link rel="stylesheet" type="text/css" href="http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs/css/agsjs.css" />
    <style>
        html, body {
            height: 100%;
            width: 100;
            margin: 0;
            padding: 0;
            font-family: helvetica, arial, sans-serif;
            font-size: 90%;
   color: #00151; 
        }
       #map {
            padding: 0;
   overflow: hidden;
   background-color:#0072AF; color:#0072AF;
        }
   #header {
      margin:0px;
      padding: 0px;
   text-align:right;
    background: -webkit-gradient(linear, left top, left bottom, from(#005b8c), to(#1980b7));
       background-color:#0072AF; color:#0072AF;
      border: solid 1px #000000;
      height: 56px;
    }
 #bookmarks-wrapper {
        position: absolute;
        z-index: 40;
        top: 15px;
        right: 30px;
        background: transparent;
        font-size: 12pt;
        color: #444;
      }
   
   #Search-wrapper {
        position: absolute;
        z-index: 40;
        top: 15px;
        right: 140px;
        background: transparent;
        font-size: 12pt;
        color: #444;
      }
   
     #RssLayers-wrapper {
        position: absolute;
        z-index: 40;
        top: 15px;
        right: 265px;
        background: transparent;
        font-size: 12pt;
        color: #444;
      }
 #title {
      font-size:150%;
      color: #ffffff;
      text-align:center;
   margin: 2px;
    }
    #subfooter {
      font-size:small;
      color: #ffffff;
   font-size:13px;
      text-align:center;
   margin: 2px;
    }
    .esriControlsBR {
   display: none;
 }
 
 
        /* this line hides layers when out of scale for the inline TOC 
        .agsjsTOCOutOfScale {
            display: none
        }*/
    </style>
    <script type="text/javascript">
        var djConfig = {parseOnLoad: true, packages: [{"name": "agsjs","location": "http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs" }] };
    </script>

    <script src="http://js.arcgis.com/3.8/"></script>
    <script type="text/javascript">
        var map, toc, dynaLayer1;

        require(["dojo/_base/connect",
                 "dojo/parser",
      "esri/urlUtils",
      "dojo/on",
      "agsjs/dijit/TOC",
                 "esri/map",
     "esri/layers/ArcGISDynamicMapServiceLayer",
      "esri/dijit/Geocoder",
       "esri/layers/GeoRSSLayer",
       "esri/InfoTemplate",
       "dojo/_base/array",
       "esri/symbols/PictureMarkerSymbol",
       "esri/renderers/SimpleRenderer",
                 "dijit/form/CheckBox", 
       "dojo/dom", 
       "dojo/dom-construct",
      "dijit/form/DropDownButton",
      "dijit/form/Button",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      
                 "dojo/fx",
                 "dojo/domReady!"],
                 function (connect, parser,urlUtils, on, TOC, Map, ArcGISDynamicMapServiceLayer, Geocoder,GeoRSSLayer,InfoTemplate,array, PictureMarkerSymbol, SimpleRenderer, CheckBox, dom, domConstruct) {

                     //call the parser to create the layout dijits
                     parser.parse();


                     map = new Map("map", {
                         center: [-93.00, 35.768],
                         zoom: 4,
                         basemap: "streets"
                     });
///Proxy 
 
// Dyanmic layer For Table of Contents 
                     dynaLayer1 = new ArcGISDynamicMapServiceLayer("http://maps5.gisworkshop.com/ArcGIS/rest/services/McKenzieTaxDirector/MapServer");

                     map.on('layer-add-result', function (e) {
                         dynaLayer1.setVisibleLayers([0]);
                         toc = new TOC({
                             map: map,
                             layerInfos: [{
                                 layer: dynaLayer1,
                                 title: "McKenzie Parcels",
                                 collapsed: true,
                                 slider: false
                             }]
                         }, 'tocDiv');
                         toc.startup();
                     });
                     map.addLayer(dynaLayer1);
///Geocoding Service  
  var geocoder = new Geocoder({
   placeholder: "",
   url: "",
   map: map,
   autoComplete: true,
   },"search");
   geocoder.startup();     
     

    // var georssUrl = "http://geocommons.com/overlays/116926.atom"; // S.F. and East Bay Breweries http://geocommons.com/overlays/116926
           var rssBeer = new GeoRSSLayer("http://geocommons.com/overlays/116926.atom", {id: "Beer"}); 
            rssBeer.on("load", function () {
                //domStyle.set("loading", "display", "none");
                // create an info template
                  var template = new InfoTemplate("${title}", "<tr><td></td><td>${description}</td></tr><br/><br/><tr><td>  <a href=${link} target=_blank> BeerLine </a></td></tr></br>");
    // set the info template for the feature layers that make up the GeoRSS layer
                // the GeoRSS layer contains one feature layer for each geometry type
                var layers = rssBeer.getFeatureLayers();
                var picRenderer = new PictureMarkerSymbol("http://static.arcgis.com/images/Symbols/Basic/RedShinyPin.png", 21, 21);
                var georssRenderer = new SimpleRenderer(picRenderer);
                array.forEach(layers, function (l) {
                    l.setInfoTemplate(template);
                    l.setRenderer(georssRenderer)
                }); 
            
            });
///////////////////////////////////////////////////////////////////////////


            //add the legend
            map.on("layers-add-result", function (evt) {
                var layerInfo = array.map(evt.layers, function (layer,
                index) {
                    return {
                        layer: layer.layer,
                        title: layer.layer.name
                    };
      
                });
              
                //add check boxes
                array.forEach(layerInfo,

                function (layer) {
                    var layerName = layer.title;
                    if (layer.layer.id === "Beer") { layerName = "My Beer";}
                  
                    var checkBox = new CheckBox({
                        name: "checkBox" + layer.layer.id,
                        value: layer.layer.id,
                        checked: layer.layer.visible,
                        onChange: function (evt) {
                            var clayer = map.getLayer(this.value);
                            clayer.setVisibility(!clayer.visible);
                            this.checked = clayer.visible;
                        }
                    });
                    //add the check box and label to the TOC
                    domConstruct.place(checkBox.domNode, "toggle",
                        "after");
                    var checkLabel = domConstruct.create('label', {
                        'for': checkBox.name,
                        innerHTML: layerName
                    }, checkBox.domNode, "after");
                    domConstruct.place("<br />", checkLabel,
                        "after");
                });
            });


          map.addLayers([rssBeer]);
   
   
   
     }); // End Main Function ///////
    </script>
</head>
<body class="tundra">
    <div id="content" data-dojo-type="dijit/layout/BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;">
<div id="header" class="shadow roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
  
   <div id="title">Title Main
       <div id="subfooter">SubTitle</div> 
    
    </div> 
 <!-- Bookmarks widget inside a Drop Down Button -->
        <div id="bookmarks-wrapper">
   <div data-dojo-type="dijit/form/DropDownButton" region="top"> <span>Layers</span>
    <div data-dojo-type="dijit/TooltipDialog">
    <div id="tocDiv"></div>
    </div>
    </div>
  </div>
  
 <!-- Search widget inside a Drop Down Button -->
        <div id="Search-wrapper">
   <div data-dojo-type="dijit/form/DropDownButton" region="top"> <span>Address</span>
    <div data-dojo-type="dijit/TooltipDialog">
    <div id="search"></div>
    </div>
    </div>
  </div>
 <!-- Search widget inside a Drop Down Button -->
        <div id="RssLayers-wrapper">
   <div data-dojo-type="dijit/form/DropDownButton" region="top"> <span>Rss Layers</span>
    <div data-dojo-type="dijit/TooltipDialog">
     
     <h3>Layers</h3>
                <br>
    <div id="toggle" style="padding: 2px 2px;"></div>
    </div>
    </div>
  </div> 
 </div><!-- End Header -->

   <div id="map" data-dojo-type="dijit/layout/ContentPane" region="center">
    

 
        </div> <!-- End Map-->
    </div>
    
</div>     
</body>
</html>

Re: Rss Checkbox / Table of Contents map.on issue???

JonathanUihlein — Wed, 09 Jul 2014 17:43:20 GMT

Hi Jamie,

A few quick notes:

1) You have an extra div closing tag.

2) You are calling parser twice. Remove parseOnLoad: true from the following line:

var djConfig = {parseOnLoad: true, packages: [{"name": "agsjs","location": "http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs" }] };

3) You are using the map's layers-add-result event incorrectly. It will not fire when adding one layer directly to the map using: map.addLayer(rssBeer); or map.addLayers([rssBeer]); You have two options:

- Add each layer individually (map.addLayer(rssBeer); ) and handle each unique case in a single layer-add-result event callback.

- Add both layers at the same time (map.addLayers([rssBeer, dynaLayer1]); ) and handle each case using a loop in your layers-add-result event callback.

There are pros and cons to both and deciding between the two really depends on the rest of your application.

Pseudo-Code:

map.on("layer-add-result", function (evt) {

if("beer layer pseudo code"){

toc = new TOC({

map: map,

layerInfos: [{

layer: evt.layer,

title: "Beer",

collapsed: true,

slider: false

}]

}, "tocDiv1");

toc.startup();

}else if("dyna layer psuedo code"){

toc2 = new TOC({

map: map,

layerInfos: [{

layer: evt.layer,

title: "Dyna",

collapsed: true,

slider: false

}]

}, "tocDiv2");

toc2.startup();

}

});

map.addLayers([dynaLayer1, rssBeer]);

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

// Loop through the Layers

array.forEach(evt.layers, function(layer, index){

var toc = new TOC({

map: map,

layerInfos: [{

layer: layer.layer,

title: layer.layer.id,

collapsed: true,

slider: false

}]

}, layer.layer.id);

toc.startup();

});

Re: Rss Checkbox / Table of Contents map.on issue???

MarkCunningham1 — Thu, 10 Jul 2014 12:53:14 GMT

Thank you for your response I decided to move in a slightly different direction. Where I scrapped the TOC widget and just went with the generate check-boxes.

<!DOCTYPE HTML>

<html>

<head>

<title>HurricaneTracker</title>

<style>

html, body {

height: 100%;

width: 100%;

margin: 0;

padding: 0;

background-color: #000000;

}

#map {

height: 100%;

width:100%;

margin: 0;

padding: 0;

overflow: none;

}

legendDiv {

display: none;

}

.esriControlsBR {display:none;}

#header {

margin:0px;

padding: 0px;

text-align:right;

background: -webkit-gradient(linear, left top, left bottom, from(#005b8c), to(#1980b7));

background-color:#0072AF; color:#0072AF;

border: solid 1px #000000;

height: 56px;

}

#title {

font-size:150%;

color: #ffffff;

text-align:center;

margin: 2px;

}

#subfooter {

font-size:small;

color: #ffffff;

font-size:13px;

text-align:center;

margin: 2px;

}

#LayerDrop {

position: absolute;

top: 20px;

right: 20px;

z-index: 50;

}

#appToolbarButtons{

float: right;

vertical-align: middle;

}

#layerBTN {

vertical-align: right;

bottom: 15px;

cursor: pointer ;

margin-right: 5px;

z-index: 50;

cursor: pointer;

right: 10px;

width: 65px!important;

padding: 5px;

position: absolute;

-moz-box-shadow:inset 0px 0px 35px 0px #ccd8e0;

-webkit-box-shadow:inset 0px 0px 35px 0px #ccd8e0;

box-shadow: 1px 6px 12px #0093CA inset, -1px -10px 5px #00ACEC inset, 1px 2px 1px rgba(0, 0, 0, 0);

background-color: #00ACEC;

background:-moz-linear-gradient( center top, #145bb3 5%, #468ccf 100% );

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#145bb3', endColorstr='#468ccf');

-webkit-border-top-left-radius:37px;

-moz-border-radius-topleft:37px;

border-top-left-radius:37px;

-webkit-border-top-right-radius:37px;

-moz-border-radius-topright:37px;

border-top-right-radius:37px;

-webkit-border-bottom-right-radius:37px;

-moz-border-radius-bottomright:37px;

border-bottom-right-radius:37px;

-webkit-border-bottom-left-radius:37px;

-moz-border-radius-bottomleft:37px;

border-bottom-left-radius:37px;

text-indent:0;

display:inline-block;

color:#FFFFFF;

font-family:Arial;

font-weight:bold;

font-style:normal;

text-decoration:none;

text-align:center;

text-shadow:0px 0px 0px #072038;

}

#LocateButton {

position: absolute;

top: 95px;

left: 20px;

z-index: 50;

}

#BasemapToggle {

position: absolute;

bottom: 30px;

left: 30px;

z-index: 50;

width:59px;

height:50px;

}

.BasemapToggle .basemapImage {

width:55px;

height:30px;

overflow:hidden;

}

</style>

var map;

require([

"dojo/parser",

"esri/map",

"esri/dijit/LocateButton",

"esri/dijit/BasemapToggle",

"esri/layers/KMLLayer",

"esri/InfoTemplate",

"esri/layers/FeatureLayer",

"dojo/_base/array",

"esri/symbols/PictureMarkerSymbol",

"esri/renderers/SimpleRenderer",

"esri/dijit/Legend",

"dijit/form/CheckBox", "dojo/dom", "dojo/dom-construct",

"dijit/layout/BorderContainer",

"dijit/layout/ContentPane",

"dijit/Dialog",

"dojo/domReady!"

], function (parser,

Map, LocateButton, BasemapToggle, KMLLayer, InfoTemplate,

FeatureLayer, array, PictureMarkerSymbol, SimpleRenderer, Legend, CheckBox, dom, domConstruct

) {

map = new Map("map", {

basemap: "national-geographic",

fadeOnZoom: true,

center: [-80.013, 32.622],

zoom: 4

});

// create layout dijits

parser.parse();

geoLocate = new LocateButton({

map: map

}, "LocateButton");

geoLocate.startup();

var toggle = new BasemapToggle({

map: map,

basemap: "satellite"

}, "BasemapToggle");

toggle.startup();

var legendLayers = [];

var kmlUrl = "";

var kml = new KMLLayer(kmlUrl, {

id: "KML"

});

kml.setRefreshInterval(5);

var kmlHurricane = "";

var kmlH = new KMLLayer(kmlHurricane, {

id: "Hurricane"

});

kmlH.setRefreshInterval(10);

kmlH.setVisibility(false);

var kmlGaleURL = "";

var kmlGale = new KMLLayer(kmlGaleURL, {

id: "Gale"

});

kmlGale.setRefreshInterval(10);

kmlGale.setVisibility(false);

var kmlTropicalURL = "";

var kmlTropical = new KMLLayer(kmlTropicalURL, {

id: "Tropical"

});

kmlTropical.setRefreshInterval(3);

kmlTropical.setVisibility(false);

//////

var kmlRadarURL = "";

var kmlRadar = new KMLLayer(kmlRadarURL, {

id: "Radar"

});

kmlRadar.setRefreshInterval(7);

kmlRadar.setVisibility(false);

//////

var cities = new FeatureLayer(

"http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0", {

mode: FeatureLayer.MODE_ONDEMAND,

id: "City",

outFields: ["*"]

});

cities.setVisibility(false);

///////////////////////////////////////////////////////////////////////////

////Add layers to Legend ////This Also Sets Order of Layers ////

legendLayers.push({ layer: cities, title: 'Cities' });

legendLayers.push({ layer: kmlH, title: 'Hurricane (64kt/73mph)' });

legendLayers.push({ layer: kmlGale, title: 'Gale (50kt/57mph)' });

legendLayers.push({ layer: kmlTropical, title: 'Tropical (34kt/ 39mph)' });

legendLayers.push({ layer: kmlRadar, title: 'Radar' });

legendLayers.push({ layer: kml, title: 'Path' });

//////////////////////////////////////////////////////////

///////////// Check-Box Created////////////////////////////////////

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

//add check boxes

array.forEach(legendLayers, function (layer) {

var layerName = layer.title;

var checkBox = new CheckBox({

name: "checkBox" + layer.layer.id,

value: layer.layer.id,

checked: layer.layer.visible

});

checkBox.on("change", function () {

var targetLayer = map.getLayer(this.value);

targetLayer.setVisibility(!targetLayer.visible);

this.checked = targetLayer.visible;

});

//add the check box and label to the TOC

domConstruct.place(checkBox.domNode, "toggle",

"after");

var checkLabel = domConstruct.create('label', {

'for': checkBox.name,

innerHTML: layerName

}, checkBox.domNode, "after");

domConstruct.place("<br /><hr/>", checkLabel,

"after");

});

map.addLayers([cities, kml, kmlH, kmlGale, kmlTropical, kmlRadar]);

});

</script>

</head>

<div id="title">Tropical Tracker

</div>

<button id="layerBTN" type="button" onClick="myLayersDialog.show();"> Layers</button>

</div>

</div>

</div>

</body>

</html>