topic Re: Adding Layers on top of AGOL WebMap in ArcGIS JavaScript Maps SDK Questions

Adding Layers on top of AGOL WebMap

CharlesGant — Tue, 13 May 2014 12:50:19 GMT

All,

I'm working on an application where I need to turn layers on/off. I thought it best to build a basemap on AGOL, pull that in using the webmap ID method, then add layers on top of that. However, whenever I try adding a new layer using the CSVLayer module, my basemap will not load. Can someone help me out?

Thanks!

<script src="http://js.arcgis.com/3.9/"></script>
<script>
  require([
 "dojo/parser",
 "dojo/ready",
 "dijit/layout/BorderContainer",
 "dijit/layout/ContentPane",
 "dojo/dom",
 "esri/map", 
 "esri/urlUtils",
 "esri/arcgis/utils",
 "esri/dijit/Legend",
 "esri/dijit/Scalebar",
 "dojo/domReady!"
  ], function(
 parser,
 ready,
 BorderContainer,
 ContentPane,
 dom,
 Map,
 urlUtils,
 arcgisUtils,
 Legend,
 Scalebar
  ) {
 ready(function(){

 parser.parse();


 arcgisUtils.createMap("Some IDNUM","map").then(function(response){
   //update the app 
   dom.byId("title").innerHTML = response.itemInfo.item.title;
   dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;

   var map = response.map;



   //add the scalebar 
   var scalebar = new Scalebar({
  map: map,
  scalebarUnit: "english"
   });

   //add the legend. Note that we use the utility method getLegendLayers to get 
   //the layers to display in the legend from the createMap response.
   var legendLayers = arcgisUtils.getLegendLayers(response); 
   var legendDijit = new Legend({
  map: map,
  layerInfos: legendLayers
   },"legend");
   legendDijit.startup();


 });


 });

  });
</script>

Re: Adding Layers on top of AGOL WebMap

CharlesGant — Tue, 13 May 2014 19:08:10 GMT

Well, after almost 8 hours of trial and error, nothing. I have tried adding CSVlayers, DynamicServices, and regular feature layers from my publisher account. After every attempt, I ran the api in the page, the webmap loaded with no additional layers. I could just load these layers in the webmap itself, however I still need to be able to set visible or non visible on click with a check box.

Anyone?

Re: Adding Layers on top of AGOL WebMap

CharlesGant — Sun, 12 Dec 2021 01:32:19 GMT

Yet another day of frustration. Using the code below, I get the webmap layer, and no ArcGISDynamicMapServiceLayer. However, If I remove the webmap portion, the ArcGISDynamicMapServiceLayer shows up. What am I'm doing wrong?

<script src="http://js.arcgis.com/3.9/"></script>
<script>
  require(["dojo/parser","dojo/ready","dijit/layout/BorderContainer","dijit/layout/ContentPane","dojo/dom","esri/map", "esri/urlUtils",
  "esri/arcgis/utils","esri/dijit/Legend","esri/dijit/Scalebar","esri/layers/ArcGISDynamicMapServiceLayer","esri/layers/ImageParameters",
  "dojo/on","dojo/query","dojo/domReady!","esri/layers/GraphicsLayer","esri/layers/FeatureLayer"
  ], function(
 parser,
 ready,
 BorderContainer,
 ContentPane,
 dom,
 Map,
 urlUtils,
 arcgisUtils,
 Legend,
 Scalebar,
 DynamicMapServiceLayer
  ) {
 ready(function(){

 parser.parse();


 arcgisUtils.createMap("964718e320ea4fc4abcc73ada068d015","map").then(function(response){
   //update the app 
   dom.byId("title").innerHTML = response.itemInfo.item.title;
   dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;
   
   var map = response.map

   //add the scalebar 
   var scalebar = new Scalebar({
  map: map,
  scalebarUnit: "english"
   });

   //add the legend. Note that we use the utility method getLegendLayers to get 
   //the layers to display in the legend from the createMap response.
   var legendLayers = arcgisUtils.getLegendLayers(response); 
   var legendDijit = new Legend({
  map: map,
  layerInfos: legendLayers
   },"legend");
   legendDijit.startup();


 });
 
 var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://gisdev.srh.noaa.gov/arcgis/rest/services/GSP/gffg/MapServer/",{visible:true});
 map.addLayer(layer);

 });


  });
</script>

Re: Adding Layers on top of AGOL WebMap

Noah-Sager — Wed, 14 May 2014 20:46:45 GMT

Hi Charles,

I think the issue is related to the AMD style, and how you call the ArcGISDynamicMapServiceLayer. First, please review this blog post concerning the AMD style of programming. You have a mixture of AMD and legacy style in your code.

I didn't look through your code too closely, but I did combine our ArcGIS.com webmap sample with the DynamicMapService sample, and made a JSFiddle application consuming your services: Layers on top of AGOL WebMap.

Hope this helps!

-Noah

Re: Adding Layers on top of AGOL WebMap

CharlesGant — Thu, 15 May 2014 13:55:20 GMT

Noah,

Thank you so much for your reply! Was desperate for some help. I will look into the blog post you mentioned. I'm sure my code is "reckless" as I'm a newbie at this Javascript/API stuff. Too bad its not Python! Anyways, also will study your example and hopefully that will get me over the hump. Thanks again!

Charles

Hi Charles,

I think the issue is related to the AMD style, and how you call the ArcGISDynamicMapServiceLayer. First, please review this blog post concerning the AMD style of programming. You have a mixture of AMD and legacy style in your code.

I didn't look through your code too closely, but I did combine our ArcGIS.com webmap sample with the DynamicMapService sample, and made a JSFiddle application consuming your services: Layers on top of AGOL WebMap.

Hope this helps!

-Noah

Re: Adding Layers on top of AGOL WebMap

Noah-Sager — Thu, 15 May 2014 14:01:58 GMT

No worries Charles. There is always a learning curve associated with any new language or product. Here is another helpful blog post with tips on debugging JavaScript applications.

Good luck and happy coding!

-Noah

Re: Adding Layers on top of AGOL WebMap

CharlesGant — Sun, 12 Dec 2021 01:32:24 GMT

Well, once I removed the code below the layer loaded. I assume its because I did not call those ID's in the html.

dom.byId("title").innerHTML = response.itemInfo.item.title;
dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;

Re: Adding Layers on top of AGOL WebMap

CharlesGant — Sun, 12 Dec 2021 01:32:21 GMT

Noah,

Well I still dont know what I'm doing wrong. I have a feeling its something to do with the order I call the map div in the html. I have attached the entire page script. When I load it on my server, I get everything except the ArcGISDynamicMapServiceLayer.

Charles

<!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">
  <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
  <link rel='stylesheet' type='text/css' href='index2.css' />
  <link rel="stylesheet" href="https://community.esri.com//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

 <script>
 $(function() {
 $( "#accordion" ).accordion()});
 </script>

    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
      require([
        "dojo/parser",
        "dojo/ready",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/dom",
        "esri/map", 
        "esri/urlUtils",
        "esri/arcgis/utils",
        "esri/dijit/Legend",
        "esri/dijit/Scalebar",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ImageParameters",
        "dojo/domReady!"
      ], function(
        parser,
        ready,
        BorderContainer,
        ContentPane,
        dom,
        Map,
        urlUtils,
        arcgisUtils,
        Legend,
        Scalebar,
        ArcGISDynamicMapServiceLayer, 
        ImageParameters
      ) {
        ready(function(){

        parser.parse();


        arcgisUtils.createMap("964718e320ea4fc4abcc73ada068d015","map").then(function(response){
          //update the app 
          dom.byId("title").innerHTML = response.itemInfo.item.title;
          dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;

          var map = response.map;

          //Takes a URL to a non cached map service.
          var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://gisdev.srh.noaa.gov/arcgis/rest/services/GSP/gffg/MapServer", {
              "opacity" : 0.5
            });
                     
          map.addLayer(dynamicMapServiceLayer);


          //add the scalebar 
          var scalebar = new Scalebar({
            map: map,
            scalebarUnit: "english"
          });

          //add the legend. Note that we use the utility method getLegendLayers to get 
          //the layers to display in the legend from the createMap response.
          var legendLayers = arcgisUtils.getLegendLayers(response); 
          var legendDijit = new Legend({
            map: map,
            layerInfos: legendLayers
          },"legend");
          legendDijit.startup();


        });


        });

      });
    </script>


<title>NWS GSP HyrdoViewer</title>

</head>

<body>



    <div id="container">

        <!-- Map area -->
        <div id="map-container">

            <!-- Toolbar area -->
            <div id="toolbar" class="screen-only ui-widget-header hidden" style="display: block">
   
   <ul class="menu1">
    <li><a href="http://http://www.weather.gov/gsp/brief_hydro">GSP Brief Page</a></li>
    <li><a href="http://water.weather.gov/ahps2/index.php?wfo=gsp">AHPS GSP</a></li>
    <li><a href="http://www.srh.noaa.gov/serfc/">SERFC</a></li>
    <li><a href="http://www.srh.noaa.gov/lmrfc/">LMRFC</a></li>
    <li><a href="http://www.srh.noaa.gov/lmrfc/">Empty</a></li>
   </ul>
   <ul class="menu2">
    <li class="menu2sub"><input type="radio" id="rain" name="mapcontrol-button" value="rain" checked="checked" hidden=true/>
    <label for="rain">Precipitation</label></li>
    <li class="menu2sub"><input type="radio" id="river" name="mapcontrol-button" value="river" checked="checked" hidden=true/>
                <label for="rain">River Stages</label></li>
    <li class="menu2sub"><input type="radio" id="lake" name="mapcontrol-button" value="lake" checked="checked" hidden=true/>
                <label for="rain">Lake Stages</label></li>
    <li class="menu2sub lastitem"><input type="radio" id="cams" name="mapcontrol-button" value="cams" checked="checked" hidden=true/>
                <label for="rain">Web Cams</label></li>
   </ul>
     
   <div id = "ACRmarquee">
    <?php
    $myFile = "scroll.txt";
    $fh = fopen($myFile, 'r');
    $message = fgets($fh);
    fclose($fh);
    ?>
    <marquee behavior="scroll" direction="left" scrollamount="4"> <?=$message?> </marquee></div>
    </div>

            <!-- Map -->
            <div id="map" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>

           
        </div>

        <!-- Sidebar -->
        <aside>
   <header>

    <!-- Header logo -->
    <a href="http://www.noaa.gov"><img class="NOAA" src="NOAAlogo.png" alt="NOAAlogo"></a>
    <a href="http://www.weather.gov/gsp"><img class="NWS" src="GSPLogo.png" alt="NWSlogo"></a>
    <div id="headercontrols" class="alignleft">
     <!-- <input type="button" id="refreshmap" value="Refresh Map" class="alignright" onclick="lde_refresh();"/> -->
     <button onclick="lde_refresh()" class="alignright">Refresh Map</button>
    </div>
   
   </header>

   <br>
   <div id="accordion">
    <h3>Map Controls</h3>
    <div>
     <div class="BUTTONS">  
      <div id="APIZoomButton">
      <h3>API Zoom Level</h3>
      <input type="radio" name="APIZoom" value="CWA" /> CWA<br />
      <input type="radio" name="APIZoom" value="GSP" /> GSP<br />
      <input type="radio" name="APIZoom" value="CLT" /> Charlotte<br />
      <input type="radio" name="APIZoom" value="AVL" /> Asheville<br />
      </div>

      <div id="FFGButton">
      <h3>Observation</br> Interval</h3>
      <input type="radio" name="FFGInt" value="30MN" /> 30 Min<br />
      <input type="radio" name="FFGInt" value="1HR" /> 1 Hour<br />
      <input type="radio" name="FFGInt" value="2HR" /> 2 Hour<br />
      <input type="radio" name="FFGInt" value="3HR" /> 3 Hour<br />
      <input type="radio" name="FFGInt" value="6HR" /> 6 Hour<br />
      </div>
     </div>
    </div>
    <h3>Map Layers</h3>
    <div>
    
    </div>
    
    <h3>Twitter</h3>
    <div>
    <!-- <a class="twitter-timeline" data-widget-id="360802375943983105" href="https://twitter.com/NWSGSP">Tweets by @NWSGSP</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> -->
    </div>
    
    <h3>Facebook</h3>
    <div>
    <!-- <iframe allowtransparency="true" frameborder="1" scrolling="yes" src="http://www.facebook.com/connect/connect.php?id=179395995467046&amp;connections=0&amp;stream=1" style="border: none; width: 120%; height: 100%;"></iframe> -->
    </div>
   </div>


        </aside>

    </div> <!-- end of #container -->


</body>

</html>