Basemaps without the Gallery

StevenGriffith · ‎08-07-2012

What's the best way to add/remove basemaps without using the Gallery dijit?

Thanks,
Steve G
County of SLO

StephenLead · ‎08-07-2012

What's the best way to add/remove basemaps without using the Gallery dijit?

You could simply add a Tiled layer to the map using map.addLayer(tiledLayer), then remove it using map.removeLayer(tiledLayer).

StevenGriffith · ‎08-08-2012

You could simply add a Tiled layer to the map using map.addLayer(tiledLayer), then remove it using map.removeLayer(tiledLayer).

I tried that, first thing. In fact this is what had been working for some time, then stopped. Currently I can add a new base layer, and remove it perfectly fine - but when I re-add the same base layer back again, the layer does not load. Basically, it seems that the addLayer routine will only work once per layer.

So, at the risk of sounding silly, I'd like to know what's the best way to switch between base layers w/o using the gallery dijit? Is it really addLayer/removeLayer? And, if so - what factors am I missing that could make that not work in my situation?

P.S. The break appears to be in v3.1 only - v2.8 appears to work just fine.

Thanks,

Steve G
County of SLO

KellyHutchins · ‎08-08-2012

Steve,

Can you post a sample that shows the problem?

Kelly

StevenGriffith · ‎08-08-2012

map.removeLayer(layermanager.currentbaselayer.layer);
map.addLayer(layermanager.currentbaselayer.layer);

Where "layermanager.currentbaselayer.layer" is an ArcGISTiledMapServiceLayer and "map" is the esri map object. Simple as that. Note that while I'm running this in Chrome, this fails in the latest main Firefox build as well.

Steve G
County of SLO

KellyHutchins · ‎08-08-2012

I ran a quick test and was able to add and remove basemap layers at 3.1. Here's my test case:

<!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" />
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Terrain basemap with custom data</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #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.1"></script>
    <script type="text/javascript">
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      
      var map;

      function init() {
        var initExtent = new esri.geometry.Extent({"xmin":-14094630.358433869,"ymin":3325662.059679695,"xmax":-7558958.691939897,"ymax":5991785.606265934,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map",{
          extent:initExtent
        });
        //Add the terrain service to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service    
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer",{id:'basemap'});
        map.addLayer(basemap);
        
 
        var operationalLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer", {"opacity":0.5});
        map.addLayer(operationalLayer);
        

        

        dojo.connect(map, 'onLoad', function(theMap) {
          //resize the map when the browser resizes
          dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
        });
      }
      function switchMap(basemap){
        //remove the existing basemap layer
        var layer = map.getLayer('basemap');
        map.removeLayer(layer);
        var layerUrl;
        switch(basemap){
          case 'topo':
            layerUrl = 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer';
            break;
          case 'imagery':
            layerUrl = 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer';
            break;
        }
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer(layerUrl,{id:'basemap'});
        map.addLayer(basemap,0);
        
      }

      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 dojotype='dijit.layout.ContentPane' region='top' style='height:20px;'>
      <input type='button' value='Topo' onclick='switchMap("topo");'/>
      <input type='button' value ='Imagery' onclick='switchMap("imagery");'/>
      </div>
      <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;">
      </div>
    </div>
  </body>

</html>

StevenGriffith · ‎08-08-2012

I've created a sample web page that demonstrates this problem. I've hijacked the Print Dijit example to demonstrate the issue:

<!doctype html>
<html lang="en">
  <head>
    <meta 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" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/nihilo/nihilo.css">
    <style type="text/css">
      html, body { 
        height: 100%; width: 100%;
        margin: 0; padding: 0;
      } 
      body{
        background-color: #fff; overflow:hidden; 
        font-family: sans-serif;
      } 
      label {
        display: inline-block;
        padding: 5px 5px 0 5px;
        font-weight: 400;
        font-size: 12pt;
      }
      #header {
        padding-top: 4px;
        padding-right: 15px;
        color: #444; 
        font-size:16pt; text-align:right;font-weight:bold;
        height:55px;
        background: #fff;
        border-bottom: 1px solid #444;
      }
      #subheader {
        font-size:small;
        color: #444;
        text-align:right;
        padding-right:20px;
      }
      #header, #subheader {
        text-shadow: 1px 1px 1px #cee1f0;
        filter: dropshadow(color=#cee1f0, offx=1, offy=1);
      }
      #rightPane{
        margin: 0;
        padding: 10px;
        background-color: #fff;
        color: #421b14;
        width: 180px;
      }

      .ds { background: #000; overflow: hidden; position: absolute; z-index: 2; }
      #ds-h div { width: 100%; }
      #ds-l div, #ds-r div { height: 100%; }
      #ds-r div { right: 0; }
      #ds .o1 { filter: alpha(opacity=10); opacity: .1; }
      #ds .o2 { filter: alpha(opacity=8); opacity: .08; }
      #ds .o3 { filter: alpha(opacity=6); opacity: .06; }
      #ds .o4 { filter: alpha(opacity=4); opacity: .04; }
      #ds .o5 { filter: alpha(opacity=2); opacity: .02; }
      #ds .h1 { height: 1px; }
      #ds .h2 { height: 2px; }
      #ds .h3 { height: 3px; }
      #ds .h4 { height: 4px; }
      #ds .h5 { height: 5px; }
      #ds .v1 { width: 1px; }
      #ds .v2 { width: 2px; }
      #ds .v3 { width: 3px; }
      #ds .v4 { width: 4px; }
      #ds .v5 { width: 5px; }

      /* make all dijit buttons the same width */
      .dijitButton .dijitButtonNode, #drawingWrapper {
        width: 160px;
      }
      
    </style>
    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script>
    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.form.CheckBox");
      dojo.require("esri.map");
      dojo.require("esri.toolbars.draw");
      dojo.require("esri.dijit.Print");
      
      var app = {};
      app.map = null, app.toolbar = null, app.circle = false, app.symbols = null, 
      app.printer = null;
      function init() {
        esri.config.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";
        
        var initialExtent = new esri.geometry.Extent({"xmin":-10399332,"ymin":3440549,"xmax":-9801289,"ymax":3705938,"spatialReference":{"wkid":102100}});
        app.map = new esri.Map("map", {
          extent: initialExtent,
          wrapAround180: true
        });
        dojo.connect(app.map, 'onLoad', function() {
          dojo.connect(dijit.byId('map'), 'resize', app.map, app.map.resize);
          app.toolbar = new esri.toolbars.Draw(app.map);
          dojo.connect(app.toolbar, "onDrawEnd", addToMap);
        });

        // print dijit
        app.printer = new esri.dijit.Print({
          map: app.map,
          url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
        }, dojo.byId("printButton"));
        app.printer.startup();

        var url = "http://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer";
        var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer(url, { "id": "Ocean" });
        app.map.addLayer(tiledLayer);
        
        //--Testing----Testing----Testing----------------------------------------------------------
        // Save that layer!! We need to save the layer object so we can remove and re-add it later
        app.tiledLayer = tiledLayer;
        //--Testing----Testing----Testing----------------------------------------------------------
        
        // add census boundary dyn map svc
        var dynUrl = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer";
        var dynLayer = new esri.layers.ArcGISDynamicMapServiceLayer(dynUrl, { "id": "Boundaries" });
        app.map.addLayer(dynLayer);

        // create a check box
        dojo.forEach(["Boundaries", "Ocean"], function(id) {
          new dijit.form.CheckBox({
            id: "cb_" + id,
            name: "cb_" + id,
            checked: true,
            onChange: function(bool) {
              bool ? 
                app.map.getLayer(this.id.split('_')[1]).show() :
                app.map.getLayer(this.id.split('_')[1]).hide();
            }
          }, dojo.create('input', { id: 'lyr_' + id })).placeAt(dojo.byId('layerToggle'));

          // create a label for the check box
          var label = dojo.create('label', { 
            "for": "cb_" + id,
            "innerHTML": id
          });
          dojo.place(label, dojo.byId('layerToggle'));
          dojo.place(dojo.create('br'), dojo.byId('layerToggle'));
        });


        // set up symbols for the various geometry types
        app.symbols = {};
        var es = esri.symbol;
        var dc = dojo.Color;

        // find the divs for buttons
        dojo.forEach(dojo.query(".drawing"), function(btn) {
          var button = new dijit.form.Button({
            label: btn.innerHTML,
            onClick: function() {
              activateTool(this.id);
            },
            style: { "width": "100%", "margin": "3px auto", "textAlign": "center" }
          }, btn);
        });
      }

      //--Testing----Testing----Testing------------------------------------------------------------
      // Make the Base Layer Go Away
      //--Testing----Testing----Testing------------------------------------------------------------
      function activateTool(type) {
        //--Testing----Testing----Testing----------------------------------------------------------
        // Hijack drawing tool to activate our disappearing base map layer issue
          app.map.removeLayer(app.tiledLayer)
          app.map.addLayer(app.tiledLayer)
        //--Testing----Testing----Testing----------------------------------------------------------
      }

      function addToMap(geom) {
      }

      dojo.ready(init);
    </script>
  </head>
  <body class="nihilo">
    <div id="mainWindow" 
         data-dojo-type="dijit.layout.BorderContainer" 
         data-dojo-props="design:'headline',gutters:false"
         style="width: 100%; height: 100%; margin: 0;">
      <div id="header" 
           data-dojo-type="dijit.layout.ContentPane"
           data-dojo-props="region:'top'">
        Print Dijit:  Hijacked application to show Disappearing Base Layer Issue 
        <div id="subheader">Requires ArcGIS Server 10.1</div>
      </div>
      <div id="map" class="shadow" 
           data-dojo-type="dijit.layout.ContentPane"
           data-dojo-props="region:'center'">

        <!-- drop shadow divs -->
        <div id="ds">
          <div id="ds-h">
            <div class="ds h1 o1"></div>
            <div class="ds h2 o2"></div>
            <div class="ds h3 o3"></div>
            <div class="ds h4 o4"></div>
            <div class="ds h5 o5"></div>
          </div>
          <div id="ds-r">
            <div class="ds v1 o1"></div>
            <div class="ds v2 o2"></div>
            <div class="ds v3 o3"></div>
            <div class="ds v4 o4"></div>
            <div class="ds v5 o5"></div>
          </div>
        </div> <!-- end drop shadow divs -->
            
      </div>
      <div id="rightPane"
           data-dojo-type="dijit.layout.ContentPane"
           data-dojo-props="region:'right'">

        <div id="printButton"></div>
        <hr />
        
        <div id="drawingWrapper">
          Make the baselayer go away:
          <!-- Testing----Testing----Testing---------------------------------------------------------->
          <div id="test" class="drawing">Click Me</div>
          <!-- Testing----Testing----Testing---------------------------------------------------------->
          
        </div>
        <hr />
        <div id="layerToggle">
          Toggle Layers: <br />
          <!-- checkbox and labels inserted programmatically -->
        </div>
      </div>
    </div>
  </body>
</html>

StevenGriffith · ‎08-08-2012

I ran a quick test and was able to add and remove basemap layers at 3.1. Here's my test case:

      function switchMap(basemap){
        //remove the existing basemap layer
        var layer = map.getLayer('basemap');
        map.removeLayer(layer);
        var layerUrl;
        switch(basemap){
          case 'topo':
            layerUrl = 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer';
            break;
          case 'imagery':
            layerUrl = 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer';
            break;
        }
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer(layerUrl,{id:'basemap'});
        map.addLayer(basemap,0);
        
      }

I see that you're actually not re-adding an existing layer object, but instead creating a new ArcGISTiledMapServiceLayer object each time the base layer is swapped. I ended up recoding my site to do the same thing to switch base layers.

FWIW, if a layer object can no longer be re-used like it could in v2.8, perhaps this should go into the "things that changed with v3.1" documentation?

Steve G
County of SLO