topic Re: Switching Basemaps Programmatically in ArcGIS JavaScript Maps SDK Questions

Switching Basemaps Programmatically

ChrisHavel — Sun, 12 Dec 2021 16:34:25 GMT

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

      }

Re: Switching Basemaps Programmatically

KenBuja — Fri, 06 Jun 2014 15:09:15 GMT

Would the BaseMapToggle work for you?

Re: Switching Basemaps Programmatically

ChrisHavel — Fri, 06 Jun 2014 15:32:49 GMT

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

Re: Switching Basemaps Programmatically

KenBuja — Fri, 06 Jun 2014 17:03:35 GMT

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>

Re: Switching Basemaps Programmatically

ChrisHavel — Fri, 06 Jun 2014 20:09:56 GMT

Fantastic Thanks

Re: Switching Basemaps Programmatically

ChristianSailer2 — Thu, 11 Dec 2014 13:35:13 GMT

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!

Re: Switching Basemaps Programmatically

RobertScheitlin__GISP — Thu, 11 Dec 2014 14:06:23 GMT

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;

Re: Switching Basemaps Programmatically

ChristianSailer2 — Thu, 11 Dec 2014 15:13:06 GMT

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

Re: Switching Basemaps Programmatically

KenBuja — Sat, 11 Dec 2021 22:54:53 GMT

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

Re: Switching Basemaps Programmatically

KenBuja — Thu, 11 Dec 2014 15:22:14 GMT

Here's an example of that.

Re: Switching Basemaps Programmatically

ChristianSailer2 — Thu, 11 Dec 2014 16:02:27 GMT

Thank you this has helped to find the ids names! Great!

//But when I'm using the default-widget.

var basemapGallery = new BasemapGallery({

showArcGISBasemaps: true,

map: map

}, "basemapGallery");

basemapGallery.startup();

//I cannot add

basemapGallery.remove("basemap_0");

//to remove a basemap. It return Null!

//I think basemap_0 is not yet recognized after the startup()

//Do you have a solution for that?

//Thank you

Re: Switching Basemaps Programmatically

KenBuja — Thu, 11 Dec 2014 16:53:47 GMT

I would suggest starting a new discussion on this. It would help get the attention of the Javascript API experts at Esri.

Re: Switching Basemaps Programmatically

AndrewPratt — Thu, 11 Dec 2014 23:36:05 GMT

Take a look at my demo site. I just the basemap toggle and then just applied CSS to override the defaults.

Javascript

var toggle = new BasemapToggle({

map: app.map,

basemap: "hybrid"

}, "BasemapToggle");

toggle.startup();

CSS

#BasemapToggle {

position: absolute;

top: 20px;

right: 20px;

z-index: 50;

}

.BasemapToggle .basemapImage {

height: 0;

overflow: hidden;

width: 0px;

}

.BasemapToggle .basemapTitle {

width: 80px;

}

Project Map Viewer

Re: Switching Basemaps Programmatically

ChristianSailer2 — Fri, 12 Dec 2014 14:29:06 GMT

new discussion; Adapt basemap collection in Dijit BasemapGallery

thanks.

Re: Switching Basemaps Programmatically

YungKaiChin — Tue, 16 Dec 2014 23:54:03 GMT

Just want to add to Andrew Pratt‌'s code.

You could add an event listener to the toggle and do switch there between 2 or more base layer.

Example:

toggler.on("toggle", changeNextBasemap);
function changeNextBasemap(event){
     switch(event.currentBasemap){
          case 1:
               toggle.basemap = "whatever";
               break;
          case 2:
          case 3:
          case 4:
          ...
     }
}