1

I'm having trouble getting a legend on my swipe layer map. I'm new to Javascript and took most of the code from the API reference but can't get the legend to show up for either layers. I'm Hoping someone can take a look at what i'm doing and give me some advice what i'm doing wrong.

  <!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Layer Swipe</title>
   <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.11/esri/css/esri.css">
<style>
html, body, #map,.map.container {
  padding:0;
  margin:0;
  height:100%;
  width:95%;
}
#legendDiv{
background-color: #fff;
position: absolute !important;
z-index: 99;
top:01%;
right:0%;
 }
 </style>
 <script src="//js.arcgis.com/3.11/"></script>
 <script>

require([
  "esri/map", 
  "esri/dijit/LayerSwipe",
  "esri/arcgis/utils",
  "dojo/_base/array",
  "esri/dijit/Legend",
  "dojo/domReady!",
], function(
  Map, LayerSwipe, arcgisUtils, array, Legend 
)  {

  var mapDeferred = arcgisUtils.createMap("e80b5668e7ea478c986dff4bfbe7112a", "map");

  mapDeferred.then(function(response){

    var id;
    var map = response.map;
    var title = "Inundation Post Dike Placement";

    //loop through all the operational layers in the web map 
    //to find the one with the specified title;
    var layers = response.itemInfo.itemData.operationalLayers;
    array.some(layers, function(layer){
                  id = layer.id;

    });
    //get the layer from the map using the id and set it as the swipe layer. 
    if(id){
      var swipeLayer = map.getLayer(id);
      var swipeWidget = new LayerSwipe({
        type: "vertical",  //Try switching to "scope" or "horizontal"
        map: map,
        layers: [swipeLayer]
      }, "swipeDiv");
      swipeWidget.startup();
    }
  });

  var legend = new Legend({
      map: map,
      layerInfos:(arcgisUtils.getLegendLayers(response))
  }, "legendDiv");
  legend.startup();
});

  • Have you tried debugging with a tool like firebug? Is any request made for the legend in the Net Tab? – Devdatta Tengshe Nov 27 '14 at 3:30
1

Your code to create the legend:

var legend = new Legend({
  map: map,
  layerInfos:(arcgisUtils.getLegendLayers(response))
}, "legendDiv");
legend.startup();

is running before the createMap response is available. It needs to be inside your the function that runs when mapDeferred is resolved like so:

var mapDeferred = arcgisUtils.createMap("e80b5668e7ea478c986dff4bfbe7112a", "map");
mapDeferred.then(function(response) {
  var id;
  var map = response.map;
  var title = "Inundation Post Dike Placement";

  //loop through all the operational layers in the web map 
  //to find the one with the specified title;
  var layers = response.itemInfo.itemData.operationalLayers;
  array.some(layers, function(layer) {
    id = layer.id;
  });
  //get the layer from the map using the id and set it as the swipe layer. 
  if (id) {
    var swipeLayer = map.getLayer(id);
    var swipeWidget = new LayerSwipe({
      type: "vertical", //Try switching to "scope" or "horizontal"
      map: map,
      layers: [swipeLayer]
    }, "swipeDiv");
    swipeWidget.startup();
  }

  var legend = new Legend({
    map: map,
    layerInfos: (arcgisUtils.getLegendLayers(response))
  }, "legendDiv");
  legend.startup();
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.