Switching Basemaps Programmatically

7215
14
Jump to solution
06-06-2014 07:33 AM
ChrisHavel
New Contributor
I am trying to change basemaps without the BaseMap widget.

I can accomplish this BUT I have two buttons and I only want ONE..

I am trying to invision how to do this with one button....
1. I should be able to use a toggler of some sort
2. if not I can use an If Then statement or a Case as seen below BUT would need to fidn out how to determine the name of the current basemap that is being displayed..

    
    map = new esri.Map("map", {
       basemap: "topo",
    });


If I am looking at the code above....

1. How do I test for the basemap? Return to a variable and then I can use in the Case below.

I tried this and got 'undefined'

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

alert(layer);



WORKING CODE BUT TWO BUTTONS

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


        map = new esri.Map("map",{
          extent:initExtent
        });
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer",{id:'basemap'});
        map.addLayer(basemap);


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

      }
0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Esteemed Contributor
This switches basemaps with a button.

<!DOCTYPE html> <html> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <!--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>Map with legend</title>      <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">      <style>         html, body {             height: 100%;             width: 100%;             margin: 0;         }          #rightPane {             width: 20%;         }          #legendPane {             border: solid #97DCF2 1px;         }     </style>      <script src="http://js.arcgis.com/3.9/"></script>     <script>         var map;         require([           "esri/map", "esri/layers/ArcGISTiledMapServiceLayer",           "dojo/parser", "dijit/form/ToggleButton",           "dijit/layout/BorderContainer", "dijit/layout/ContentPane",           "dojo/domReady!"         ], function (           Map,  ArcGISTiledMapServiceLayer,           parser, ToggleButton         ) {             parser.parse();              map = new Map("map", {                 center: [-122.45, 37.75],                 zoom: 13             });              var base1 = new ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer", {                 id: "baseTopo",                 visible: true             });             var base2 = new ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer", {                 id: "baseImagery",                 visible: false             });               //add the legend             map.on("layers-add-result", function (evt) {              });              map.addLayers([base1, base2]);               new ToggleButton({                 showLabel: true,                 checked: false,                 onChange: function (val) {                     base1.setVisibility(!val);                     base2.setVisibility(val);                 }             },"programmatic");         });     </script> </head>  <body class="claro">     <!--[if IE 7]>     <style>       html, body {         margin: 0;       }     </style>     <![endif]-->     <div id="content"          data-dojo-type="dijit/layout/BorderContainer"          data-dojo-props="design:'headline', gutters:true"          style="width: 100%; height: 100%; margin: 0;">         <div id="map"              data-dojo-type="dijit/layout/ContentPane"              data-dojo-props="region:'center'"              style="overflow:hidden;">             <button id="programmatic">Change Basemap</button>         </div>    </div> </body>  </html>

View solution in original post

0 Kudos
14 Replies
KenBuja
MVP Esteemed Contributor
Would the BaseMapToggle work for you?
0 Kudos
ChrisHavel
New Contributor
Yea I saw that and had it worked....but trying to create my own button and size it accordingly....
Is there a way to resize the BasemapToggle button?  That was part of my issue....that and just trying to learn more.
Tried to resize in CSS and didnt work
0 Kudos
KenBuja
MVP Esteemed Contributor
This switches basemaps with a button.

<!DOCTYPE html> <html> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <!--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>Map with legend</title>      <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">      <style>         html, body {             height: 100%;             width: 100%;             margin: 0;         }          #rightPane {             width: 20%;         }          #legendPane {             border: solid #97DCF2 1px;         }     </style>      <script src="http://js.arcgis.com/3.9/"></script>     <script>         var map;         require([           "esri/map", "esri/layers/ArcGISTiledMapServiceLayer",           "dojo/parser", "dijit/form/ToggleButton",           "dijit/layout/BorderContainer", "dijit/layout/ContentPane",           "dojo/domReady!"         ], function (           Map,  ArcGISTiledMapServiceLayer,           parser, ToggleButton         ) {             parser.parse();              map = new Map("map", {                 center: [-122.45, 37.75],                 zoom: 13             });              var base1 = new ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer", {                 id: "baseTopo",                 visible: true             });             var base2 = new ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer", {                 id: "baseImagery",                 visible: false             });               //add the legend             map.on("layers-add-result", function (evt) {              });              map.addLayers([base1, base2]);               new ToggleButton({                 showLabel: true,                 checked: false,                 onChange: function (val) {                     base1.setVisibility(!val);                     base2.setVisibility(val);                 }             },"programmatic");         });     </script> </head>  <body class="claro">     <!--[if IE 7]>     <style>       html, body {         margin: 0;       }     </style>     <![endif]-->     <div id="content"          data-dojo-type="dijit/layout/BorderContainer"          data-dojo-props="design:'headline', gutters:true"          style="width: 100%; height: 100%; margin: 0;">         <div id="map"              data-dojo-type="dijit/layout/ContentPane"              data-dojo-props="region:'center'"              style="overflow:hidden;">             <button id="programmatic">Change Basemap</button>         </div>    </div> </body>  </html>
0 Kudos
ChrisHavel
New Contributor
Fantastic Thanks
0 Kudos
ChristianSailer2
Occasional Contributor

Hello

using the BasemapGallery Dijit we found this morning the new dark canvas layer which summarize now 10 basemaps in the gallery.

To remove one of these 10 basemap, there is a method in basemapgallery-amd | API Reference | ArcGIS API for JavaScript  called remove(id)

Now what are the "id"s for these 10 basemaps?

I tried with "satellite", "osm" and ... but it doesn't work!

Thanks for help!

CS

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Christian,

   The id is something like "basemap_3" you can get these ids by looking through the basemapGallery.basemaps and then get the "id" of each or something like basemapGallery.basemaps[2].id;

0 Kudos
ChristianSailer2
Occasional Contributor

Hi Robert

Thank you for you reply. Still nothing found sth. about the ids names;

console.log("id is "+basemapGallery.getSelected()); returns Null.

Also 

function getBasemap(id){
 
var basemap = basemapGallery.get(id);
  console
.log(basemap.title);

}

returns "not defined".

0 Kudos
KenBuja
MVP Esteemed Contributor

You can find that out this way as you select new basemaps using the gallery

basemapGallery.on("selection-change", function () {
    basemap = basemapGallery.getSelected();
});
map.on("update-end", function () {
    console.log(basemap.id);
});
0 Kudos
KenBuja
MVP Esteemed Contributor

Here's an example of that.

0 Kudos