nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Toggle layers error

CraigMcDade

I have added code from the Dynamically Create Layer List sample to my app. It works as expected, except, it loads without my basemap.

I have a switch basemap dropdown that still populates with all the ESRI basemaps, however, they don't load when clicked. When I do click on one, it eliminates my DynamicMapServiceLayer.

I added the following in the init():

layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://gisprod2/arcgis/rest/services/Dynamic/CountyTest/MapServer");          if (layer.loaded) {           buildLayerList(layer);         }         else {           dojo.connect(layer, "onLoad", buildLayerList);         }

and then separate functions of:

function buildLayerList(layer) {         var items = dojo.map(layer.layerInfos,function(info,index){           if (info.defaultVisibility) {             visible.push(info.id);           }           return "<input type='checkbox' class='list_item'" + (info.defaultVisibility ? "checked=checked" : "") + "' id='" + info.id + "' onclick='updateLayerVisibility();' /><label for='" + info.id + "'>" + info.name + "</label>";         });          dojo.byId("layer_list").innerHTML = items.join(' ');          layer.setVisibleLayers(visible);         map.addLayer(layer);        }        function updateLayerVisibility() {         var inputs = dojo.query(".list_item"), input;              visible = [];          dojo.forEach(inputs,function(input){           if (input.checked) {               visible.push(input.id);           }           });         //if there aren't any layers visible set the array to be -1         if(visible.length === 0){           visible.push(-1);         }         layer.setVisibleLayers(visible);       }

I get the following error in Chrome Developer Tools when I try to switch basemap
1. Resource interpreted as Script but transferred with MIME type tex/plain: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer

Any ideas why the basemaps will not load initially or switch?

Find more posts tagged with

Accepted answers

JohnGravois

i see the same error you described when i comment out the following line so please try adding your basemap explictly.

//var initBasemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"); //map.addLayer(initBasemap);

All comments

CraigMcDade

That did it. Thanks!

JohnGravois

i see the same error you described when i comment out the following line so please try adding your basemap explictly.

//var initBasemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"); //map.addLayer(initBasemap);

CraigMcDade

Thanks for your reply, as far as I can tell from your fiddle, our codes are pretty similar. I don't have an initial basemap set specifically, it just defaults to the aerial. Other than that, I am just loading the Dynamic layer. The weird thing is that I have refreshed my map a few times and probably 1 out of every 10 times it loads and functions correctly.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
  <html>  
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title> 
    </title> 
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css">    
    <style type="text/css"> 
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      .esriBasemapGallerySelectedNode .esriBasemapGalleryThumbnail{
        border-color: #66FFFF !important;
      }
   #header { 
        padding-top:5px; 
        padding-left:10px; 
        background-color:cornflowerblue; color:navy; font-size:18pt;
        text-align:left; font-weight:bold;
        height:30px; 
      } 
      #map{
        padding:0;
      }
   
    </style> 
    
    <script type="text/javascript"> 
      var djConfig = {
        parseOnLoad: true
      };
    </script> 
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script>
    
    <script type="text/javascript"> 
      dojo.require("dijit.dijit"); // optimize: load dijit layer
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("dijit.TitlePane");
      dojo.require("esri.dijit.BasemapGallery");
      dojo.require("esri.arcgis.utils");
   dojo.require("esri.tasks.locator");
      
      var map, locator, layer, visible = [];

      function init() {
        var initExtent = new esri.geometry.Extent({"xmin":-9265357.374781793,
    "ymin":3337183.1320917513,
    "xmax":-9021064.632382275,
    "ymax":3476757.145740537,
    "spatialReference":{"wkid":102100}});
        
    map = new esri.Map("map", {extent:initExtent, logo:false});
        
        createBasemapGallery();
        
        //resize the map when the browser resizes
        dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
      
    locator = new esri.tasks.Locator("http://tasks.arcgis.com/ArcGIS/rest/services/WorldLocator/GeocodeServer");
        dojo.connect(locator, "onAddressToLocationsComplete", showResults);
        
        map.infoWindow.resize(200,125);
    
    layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://gisprod2/arcgis/rest/services/Dynamic/CountyTest/MapServer");

        if (layer.loaded) {
          buildLayerList(layer);
        }
        else {
          dojo.connect(layer, "onLoad", buildLayerList);
        }
   }
   
   function buildLayerList(layer) {
        var items = dojo.map(layer.layerInfos,function(info,index){
          if (info.defaultVisibility) {
            visible.push(info.id);
          }
          return "<input type='checkbox' class='list_item'" + (info.defaultVisibility ? "checked=checked" : "") + "' id='" + info.id + "' onclick='updateLayerVisibility();' /><label for='" + info.id + "'>" + info.name + "</label>";
        });

        dojo.byId("layer_list").innerHTML = items.join(' ');

        layer.setVisibleLayers(visible);
        map.addLayer(layer);

      }

      function updateLayerVisibility() {
        var inputs = dojo.query(".list_item"), input;
    
        visible = [];

        dojo.forEach(inputs,function(input){
          if (input.checked) {
              visible.push(input.id);
          }
          });
        //if there aren't any layers visible set the array to be -1
        if(visible.length === 0){
          visible.push(-1);
        }
        layer.setVisibleLayers(visible);
      }
   
   function locate() {
        map.graphics.clear();
        var address = {"SingleLine":dojo.byId("address").value};
        locator.outSpatialReference= map.spatialReference;
        var options = {
          address:address,
          outFields:["Loc_name"]
        }
        locator.addressToLocations(options);
      }

      function showResults(candidates) {
        var candidate;
        var symbol = new esri.symbol.SimpleMarkerSymbol();
        var infoTemplate = new esri.InfoTemplate("Location", "Address: ${address}<br />Score: ${score}<br />Source locator: ${locatorName}");

        symbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_ROUND);
        symbol.setColor(new dojo.Color([153,0,51,0.75]));

        var geom;
        
        dojo.every(candidates,function(candidate){
          console.log(candidate.score);
          if (candidate.score > 80) {
            console.log(candidate.location);
            var attributes = { address: candidate.address, score:candidate.score, locatorName:candidate.attributes.Loc_name };   
            geom = candidate.location;
            var graphic = new esri.Graphic(geom, symbol, attributes, infoTemplate);
            //add a graphic to the map at the geocoded location
            map.graphics.add(graphic);
            //add a text symbol to the map listing the location of the matched address.
            var displayText = candidate.address;
            var font = new esri.symbol.Font("16pt",esri.symbol.Font.STYLE_NORMAL, esri.symbol.Font.VARIANT_NORMAL,esri.symbol.Font.WEIGHT_BOLD,"Helvetica");
           
            var textSymbol = new esri.symbol.TextSymbol(displayText,font,new dojo.Color("#666633"));
            textSymbol.setOffset(0,8);
            map.graphics.add(new esri.Graphic(geom, textSymbol));
            return false; //break out of loop after one candidate with score greater  than 80 is found.
          }
        });
        if(geom !== undefined){
          map.centerAndZoom(geom,15);
        }

      }
   

      function createBasemapGallery() {
        var basemapGallery = new esri.dijit.BasemapGallery({
          showArcGISBasemaps: true,
          map: map
        }, "basemapGallery");

        var selectionHandler = dojo.connect(basemapGallery,"onSelectionChange",function(){
          dojo.disconnect(selectionHandler);
          
        });
        
        basemapGallery.startup();
        
        
        dojo.connect(basemapGallery, "onError", function(msg) {console.log(msg)});
      }

   

      //show map on load 
      dojo.addOnLoad(init);
    </script> 
  </head> 

  <body class="claro"> 
    <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%;height:100%;margin:0;">
  <div id="header" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="top" align="left">
  Marion County Template
  <div style="position:absolute; right:160px; top:10px;  z-Index:99;">
    
      <div id="locate"></div>  </div>
  </div>
  <!--Basemap-->
  <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000;">
      <div style="position:absolute; right:20px; top:10px; z-Index:98;">
       <div dojoType="dijit.TitlePane" title="Search" closable="false" open="false" style="float:right">
     <b><i>Search by Address:</i></b>  
     <br />
     <textarea type="text" id="address"/>601 SE 25th Ave, Ocala, FL  34471</textArea> 
     <br />
     <button dojotype="dijit.form.Button" onclick="locate()">Search</button> 
    </div>
    <div dojoType="dijit.TitlePane" title="Layers" closable="false" open="false" style="float:right; margin-right:10px;">
     <span id="layer_list"><input type='checkbox' class='list_item' id='0' value=0 onclick='updateLayerVisibility();'
        </span> 
    </div>
        <div dojoType="dijit.TitlePane" title="Switch Basemap" closable="false"  open="false" style="float:right; margin-right:10px;">
          <div dojoType="dijit.layout.ContentPane" style="width:380px; height:280px; overflow:auto;">
         
          <div id="basemapGallery" >
           
          </div></div>
        </div>
      </div>
      </div>
    </div>
  </body> 

  </html>

JohnGravois

the console message about mime types isn't anything to worry about.

are you loading a tiledMapServiceLayer immediately in your application? i mocked up a quick sample demonstrating how to add the basemap gallery widget to our layer list sample and it seems to be working just fine as long as I load a basemap prior to building the dynamic layer list.

please forgive the messy formatting in jsfiddle 🙂
http://jsfiddle.net/jagravois/p4sdP/

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.