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

Switching Basemaps Programmatically

ChrisHavel

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

      }

Encuentra más publicaciones etiquetadas con

Accepted answers

kenbuja

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>

All comments

YungKaiChin

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:
          ...
     }
}

AndrewPratt

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

kenbuja

Here's an example of that.

kenbuja

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

ChristianSailer2

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

RobertScheitlin__GISP

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;

ChristianSailer2

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!

ChrisHavel

Fantastic Thanks

kenbuja

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>

ChrisHavel

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

kenbuja

Would the BaseMapToggle work for you?

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

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