Getting BaseMapToggle error from ArcGIS API for JavaScript?

Question

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?

kenbuja · Accepted Answer · 2014-03-19 13:23:01Z

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

answered Mar 19, 2014 at 13:23

kenbuja

5,9252 gold badges20 silver badges31 bronze badges

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
– Simmal

2014-03-19 18:24:10 +00:00
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
– kenbuja

2014-03-19 21:24:39 +00:00
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
– Simmal

2014-03-19 23:26:10 +00:00
Commented Mar 19, 2014 at 23:26
Glad to hear that. You should mark this question as answered.

kenbuja
– kenbuja

2014-03-20 12:39:31 +00:00
Commented Mar 20, 2014 at 12:39

Add a comment |

Johnny · Accepted Answer · 2015-03-30 21:11:25Z

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();
      }
  });

Stack Exchange Network

Getting BaseMapToggle error from ArcGIS API for JavaScript?

2 Answers 2

Your Answer

Hot Network Questions

Getting BaseMapToggle error from ArcGIS API for JavaScript?

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions