Toggle RSS Feed on/off ??

MarkCunningham1 · ‎03-24-2014

I would like to be able to turn on and off a Georss feed via a check box.
I tried to use this example as a guide http://jsfiddle.net/D3J8H/12/
Thank you for the help.

<!DOCTYPE html> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">     <!--The viewport meta tag is used to improve the presentation and behavior of the samples        on iOS devices-->     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=yes">     <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">      <title>Title</title>     <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dojox/grid/resources/Grid.css">     <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">     <style>       html, body {         height: 100%;         margin: 0;         padding: 0;         width: 100%;       }       #map{          padding:0px;         height: 100%;         width: 100%;      }     #subfooter {       font-size:small;       color: #ffffff;     font-size:13px;       text-align:left;     margin: 1px;     }  .roundedCorner {       background-color: #FFFFFF;       border: 1px solid #066DAB;       border-radius: 4px;  }   #header {       margin:0px;       padding: 0px;        background-color:#0072AF; color:#0072AF;       border: solid 1px #000000;       height: 50px;     }    #title {       font-size:150%;       color: #ffffff;       text-align:left;    margin: 2px;     } #BasemapToggle {       position: absolute;       top: 20px;       right: 20px;       z-index: 50;     }    .esriControlsBR {    display: none;  }     </style> <script>var dojoConfig = { parseOnLoad: true }</script>     <script src="http://js.arcgis.com/3.8/"></script>     <script>           require([       "esri/map",       "esri/dijit/BasemapToggle",       "esri/layers/GeoRSSLayer",       "esri/InfoTemplate",       "dojo/parser",  "dojo/_base/array",  "dojo/dom-style",  "esri/symbols/PictureMarkerSymbol",      "esri/renderers/SimpleRenderer",     "dojo/_base/Color",     "dijit/layout/BorderContainer",     "dijit/layout/ContentPane",     "dojo/domReady!"              ],     function( Map,BasemapToggle, GeoRSSLayer, InfoTemplate, parser, arrayUtils, domStyle, PictureMarkerSymbol, SimpleRenderer, Color){   parser.parse();        var map;               map = new Map("map", {            basemap: "streets",           center: [-83.018, 34.005],           zoom: 8         });     var toggle = new BasemapToggle({         map: map,         basemap: "satellite"       }, "BasemapToggle");       toggle.startup();  ////////////////////////////////////////////////////////////////////           var geoLayerRss = new GeoRSSLayer("http://www.AGeorrssFeed.xml");     geoLayerRss.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/>");         // 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 = geoLayerRss.getFeatureLayers();                var picRenderer = new PictureMarkerSymbol("http://static.arcgis.com/images/Symbols/Basic/GreenShinyPin.png", 21, 21);         var georssRenderer = new SimpleRenderer(picRenderer);         arrayUtils.forEach(layers, function (cl) {             cl.setInfoTemplate(template);             cl.setRenderer(georssRenderer)        });     });       map.addLayers([geoLayerRss]);                     });     </script>    </head>      <body class="claro">   <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false"      style="width: 100%; height: 100%; margin: 0;background-color: #000000;">      <div id="header" dojotype="dijit/layout/ContentPane" region="top">        <div id="title">Main Title<div id="subfooter"> SubTitleMain</div> </div>   </div>      <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="border-radius: 2px;">       <div id="BasemapToggle"></div>  </div>   </div>   </body> </html>

MarkCunningham1 · ‎03-24-2014

I figured it out. Thanks for the reply.

<!DOCTYPE HTML> <html> <head>   <meta charset="utf-8">   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">   <title>Basemap Toggle</title>   <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">   <style>    html, body {     height: 100%;     width: 100%;     margin: 0; } body {     background-color: white;     overflow: hidden;     font-family:"Trebuchet MS"; } #header {     background-image: url(../images/banner.jpg);     background-repeat: repeat-x;     margin: 2px;     border: solid 2px #224a54;     color: white;     font-size: 18pt;     text-align: left;     font-weight: bold;     height: 45px; } #subheader {     font-size: small;     color: white;     padding-left: 20px; } #leftPane {     width: 20%;     margin: 1px;     border: solid 2px #224a54; } #footer {     margin: 2px;     border: solid 2px #224a54;     background-color: #ecefe4;     color: #3f3f3f;     font-size: 10pt;     text-align: center;     height: 30px; } .dijitTabInnerDiv {     background-color: #ecefe4; } #map {     margin: 1px;     border: solid 2px #224a54;     -moz-border-radius: 4px; } #BasemapToggle {     position: absolute;     top: 20px;     right: 20px;     z-index: 50; } #legendPane {     border: solid #97DCF2 1px; }   </style>  <script>     dojoConfig = {         parseOnLoad: true     } </script> <script src="http://js.arcgis.com/3.8/"></script>   <script> var map;     require(         ["dojo/parser", "esri/layers/GeoRSSLayer", "dijit/layout/BorderContainer",             "dijit/layout/ContentPane",             "dijit/layout/AccordionContainer", "esri/map",             "esri/dijit/BasemapToggle", "esri/layers/FeatureLayer",             "dojo/on", "esri/dijit/Legend", "dojo/_base/array",             "dijit/form/CheckBox","dojo/dom", "dojo/dom-construct",             "dojo/domReady!"],          function (parser, GeoRSSLayer, BorderContainer, ContentPane, AccordionContainer,         Map, BasemapToggle, FeatureLayer, on, Legend,         array, CheckBox, dom, domConstruct) {             parser.parse();             //Add Basemap             var map = new Map("map", {                 sliderOrientation: "horizontal",                 center: [-90, 40],                 zoom: 8,                 basemap: "osm"             });             //toggle Basemap             var toggle = new BasemapToggle({                 map: map,                 basemap: "satellite"             }, "BasemapToggle");             toggle.startup();             //Add layer        var url = "http://INSERTRSSFEEDHERE.xml";     var rssLayer = new GeoRSSLayer(url);                     var cities = new FeatureLayer(                 "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0", {                     mode: FeatureLayer.MODE_ONDEMAND,                     outFields: ["*"]                 });             var rivers = new FeatureLayer(                 "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/1", {                     mode: FeatureLayer.MODE_ONDEMAND,                     outFields: ["*"]                 });             var states = new FeatureLayer(                 "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/2", {                     mode: FeatureLayer.MODE_ONDEMAND,                     opacity: 0.5,                     outFields: ["*"]                 });              //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                     };                 });                 if (layerInfo.length > 0) {                     var legendDijit = new Legend({                         map: map,                         layerInfos: layerInfo                     }, "legendDiv");                     legendDijit.startup();                 }                 //add check boxes                 array.forEach(layerInfo,                  function (layer) {                     var layerName = layer.title;                     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([rssLayer, states, rivers, cities]);         });   </script> </head> <body class="claro">     <div id="content" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width: 100%; height: 100%; margin: 0;">         <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">Ahero Irrigation Scheme             <div id="subheader">Turn on and off layers in the Layers panel to manipulate layers</div>         </div>         <div data-dojo-type="dijit.layout.ContentPane" id="leftPane" data-dojo-props="region:'left'">             <div data-dojo-type="dijit.layout.AccordionContainer">                 <div data-dojo-type="dijit.layout.ContentPane" id="legendPane" data-dojo-props="title:'Legend', selected:true">                     <div id="legendDiv"></div>                 </div>                 <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Layers'">  <span style="padding: 10px 0;">Click to toggle the visibilty        of the various natural disasters</span>                      <div id="toggle" style="padding: 2px 2px;"></div>                 </div>             </div>         </div>         <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" style="overflow: hidden;">             <div id="BasemapToggle"></div>         </div>         <div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">App Created by Oakar Services Ltd</div>     </div> </body> </html>

View solution in original post

JonathanUihlein · ‎03-24-2014

Hi Jamie and welcome to the forum!

What part are you having trouble with?
What have you tried?
What error messages do you see?

Try to be as specific as possible so we can help troubleshoot the issue.

MarkCunningham1 · ‎03-24-2014

I figured it out. Thanks for the reply.

<!DOCTYPE HTML> <html> <head>   <meta charset="utf-8">   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">   <title>Basemap Toggle</title>   <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">   <style>    html, body {     height: 100%;     width: 100%;     margin: 0; } body {     background-color: white;     overflow: hidden;     font-family:"Trebuchet MS"; } #header {     background-image: url(../images/banner.jpg);     background-repeat: repeat-x;     margin: 2px;     border: solid 2px #224a54;     color: white;     font-size: 18pt;     text-align: left;     font-weight: bold;     height: 45px; } #subheader {     font-size: small;     color: white;     padding-left: 20px; } #leftPane {     width: 20%;     margin: 1px;     border: solid 2px #224a54; } #footer {     margin: 2px;     border: solid 2px #224a54;     background-color: #ecefe4;     color: #3f3f3f;     font-size: 10pt;     text-align: center;     height: 30px; } .dijitTabInnerDiv {     background-color: #ecefe4; } #map {     margin: 1px;     border: solid 2px #224a54;     -moz-border-radius: 4px; } #BasemapToggle {     position: absolute;     top: 20px;     right: 20px;     z-index: 50; } #legendPane {     border: solid #97DCF2 1px; }   </style>  <script>     dojoConfig = {         parseOnLoad: true     } </script> <script src="http://js.arcgis.com/3.8/"></script>   <script> var map;     require(         ["dojo/parser", "esri/layers/GeoRSSLayer", "dijit/layout/BorderContainer",             "dijit/layout/ContentPane",             "dijit/layout/AccordionContainer", "esri/map",             "esri/dijit/BasemapToggle", "esri/layers/FeatureLayer",             "dojo/on", "esri/dijit/Legend", "dojo/_base/array",             "dijit/form/CheckBox","dojo/dom", "dojo/dom-construct",             "dojo/domReady!"],          function (parser, GeoRSSLayer, BorderContainer, ContentPane, AccordionContainer,         Map, BasemapToggle, FeatureLayer, on, Legend,         array, CheckBox, dom, domConstruct) {             parser.parse();             //Add Basemap             var map = new Map("map", {                 sliderOrientation: "horizontal",                 center: [-90, 40],                 zoom: 8,                 basemap: "osm"             });             //toggle Basemap             var toggle = new BasemapToggle({                 map: map,                 basemap: "satellite"             }, "BasemapToggle");             toggle.startup();             //Add layer        var url = "http://INSERTRSSFEEDHERE.xml";     var rssLayer = new GeoRSSLayer(url);                     var cities = new FeatureLayer(                 "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0", {                     mode: FeatureLayer.MODE_ONDEMAND,                     outFields: ["*"]                 });             var rivers = new FeatureLayer(                 "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/1", {                     mode: FeatureLayer.MODE_ONDEMAND,                     outFields: ["*"]                 });             var states = new FeatureLayer(                 "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/2", {                     mode: FeatureLayer.MODE_ONDEMAND,                     opacity: 0.5,                     outFields: ["*"]                 });              //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                     };                 });                 if (layerInfo.length > 0) {                     var legendDijit = new Legend({                         map: map,                         layerInfos: layerInfo                     }, "legendDiv");                     legendDijit.startup();                 }                 //add check boxes                 array.forEach(layerInfo,                  function (layer) {                     var layerName = layer.title;                     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([rssLayer, states, rivers, cities]);         });   </script> </head> <body class="claro">     <div id="content" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width: 100%; height: 100%; margin: 0;">         <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">Ahero Irrigation Scheme             <div id="subheader">Turn on and off layers in the Layers panel to manipulate layers</div>         </div>         <div data-dojo-type="dijit.layout.ContentPane" id="leftPane" data-dojo-props="region:'left'">             <div data-dojo-type="dijit.layout.AccordionContainer">                 <div data-dojo-type="dijit.layout.ContentPane" id="legendPane" data-dojo-props="title:'Legend', selected:true">                     <div id="legendDiv"></div>                 </div>                 <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Layers'">  <span style="padding: 10px 0;">Click to toggle the visibilty        of the various natural disasters</span>                      <div id="toggle" style="padding: 2px 2px;"></div>                 </div>             </div>         </div>         <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" style="overflow: hidden;">             <div id="BasemapToggle"></div>         </div>         <div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">App Created by Oakar Services Ltd</div>     </div> </body> </html>