0

I'm having a problem with my Web Application. I try to fit in a legend and a BasemapToggle but it doesn't seem to work.

My Code looks like this:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
 
<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" href="http://192.168.163.129:6080/arcgis/rest/static/jsapi.css">

<script src="http://js.arcgis.com/3.8/"></script>

<script>
var map;
require([
    "esri/map", 
    "esri/dijit/Legend",
    "esri/dijit/BasemapGallery",
    "esri/arcgis/utils",
    "dojo/_base/array", 
    "dojo/parser",
    "dijit/layout/BorderContainer", 
    "dijit/layout/ContentPane", 
    "dijit/layout/AccordionContainer", 
    "dojo/domReady!",
    ],
function(Map, Legend, arrayUtils, BasemapGallery, arcgisUtils, parser) 
    {
    parser.parse();
    map = new esri.Map("map", {basemap: "topo", center: [10.8, 48.55], zoom: 9});
    
    var raum = new esri.layers.ArcGISDynamicMapServiceLayer("http://192.168.163.129:6080/arcgis/rest/services/Masterarbeit/MapServer", {opacity: 0.85});
    map.addLayer(raum);
    
    dojo.connect(map, 'onLayersAddResult', function(results){
        var layerInfo = new esri/dijit/Legend({
                map: map,
                layerInfos: {layer:raum, title:"Raumkategorien"},
                arrangement:esri/dijit/Legend/ALIGN_LEFT
        }, "legendDiv");
        layerInfo.startup();
    });
 
    
    var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: true,
        map: map
    }, "basemapGallery");
    basemapGallery.startup();
    
    
    });
</script> 
</head> 
<body class="tundra"> 
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width: 100%; height: 100%; margin: 0;"> 
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" id="navtable" style="background-image:url(http://192.168.163.129/Energiewende/master_1.png); width: 100%; height: 100px; z-index: 0"> 
        <div style="float:left;" id="breadcrumbs"><font color="white" face="Helvetica" size="6">Test Viewer</font><br><font color="white" face="Helvetica">Name here</font></div> 
        <div style="position:absolute; top:10px; right:10px" id="help"><a href="http://www.geo.uni-augsburg.de" target="_blank"><img src="IGUA-RGB_200x126.jpg" width="134" height="80" alt="Institut für Geographie - Universitaet Augsburg"></a></div> 
    </div> 
    <div id="leftPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width:15%">
        <div data-dojo-type="dijit/layout/AccordionContainer">
            <div data-dojo-type="dijit/layout/ContentPane" id="legendPane" data-dojo-props="title:'Legende', selected:true">
                <div id="legendDiv"></div>
            </div>
            <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tools here!'">Tools here!
            </div>
        </div>
    </div>
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="padding:0">
        <!--<div style="position:absolute; right:20px; top:10px">
            <div data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Switch Basemap', closable:false,  open:false">
                <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
                    <div id="basemapGallery" ></div>
                </div>
            </div>
        </div>-->
    </div> 
</div> 
</body>
</html>

So, if I'm using this code i get this result: enter image description here

There's no content showing up in the LegendPane. And if i undo the uncommented -part for the BasemapToggle it looks like this:

enter image description here

Does someone might have a hint or an answer for me?

0

2 Answers 2

2

When using AMD, the order of the arguments in the function have to match how the modules are loaded. You have several out of order

require([
    "esri/map", 
    "esri/dijit/Legend",
    "esri/dijit/BasemapGallery",
    "esri/arcgis/utils",
    "dojo/_base/array", 
    "dojo/parser",
    "dijit/layout/BorderContainer", 
    "dijit/layout/ContentPane", 
    "dijit/layout/AccordionContainer", 
    "dojo/domReady!",
],
function(Map, Legend, BasemapGallery, arcgisUtils, arrayUtils, parser) 

Take a look at this blog posting for more information

4
  • Thanks for your correction. That already helped for the BasemapGallery, but my legend doesn't work at all. Is there maybe an error in the code for loading the legend?
    – Simmal
    Commented Mar 19, 2014 at 18:24
  • 1
    I couldn't get your code working, but made something similar: jsbin.com/mupir/1/edit?html,output
    – kenbuja
    Commented Mar 19, 2014 at 21:24
  • that's just fine. thank you very much. i added the part with legendLayers.push in my code and it works just fine
    – Simmal
    Commented Mar 19, 2014 at 23:26
  • Glad to hear that. You should mark this question as answered.
    – kenbuja
    Commented Mar 20, 2014 at 12:39
1

Realized this is really old, but you could try something like this for those looking at this now.

// Creates the Legend from list of Feature Classes shown on map
  //  Dynamically changes depening on scale and what features are visible
  map.on("layers-add-result", function(evt) {
    var layerInfo = arrayUtils.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();
      }
  });      

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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