topic Re: Change the togglebasemap title in ArcGIS JavaScript Maps SDK Questions

Change the togglebasemap title

Pierre-JeanMuller — Fri, 17 Jun 2016 08:48:17 GMT

I want to change the togglebasemap titles. I tried with the basemaps object, but it doesn't work.

Re: Change the togglebasemap title

FC_Basson — Fri, 17 Jun 2016 08:59:14 GMT

Which version of the API? 3.x or 4.0?

Re: Change the togglebasemap title

Pierre-JeanMuller — Fri, 17 Jun 2016 10:53:54 GMT

api 3.16

Re: Change the togglebasemap title

FC_Basson — Fri, 17 Jun 2016 12:42:05 GMT

I assume you are referring to the Widget title text (Switch Basemap) then.

Specify an id attribute for the TitlePane div:

<div id="basemapTitle" data-dojo-type="dijit/TitlePane"  data-dojo-props="title:'Switch Basemap', closable:false, open:false">

Then with dijit set the new title:

dijit.byId("basemapTtile").set("title", "My new awesome title");

Re: Change the togglebasemap title

Pierre-JeanMuller — Fri, 17 Jun 2016 14:36:20 GMT

thanks for your answer, but what I want is to change the texte under the basemap name. For example : in the image, I want to change "Topographie" to "Topography"

Re: Change the togglebasemap title

RobertScheitlin__GISP — Sat, 11 Dec 2021 12:59:40 GMT

Pierre,

Here is a sample of how to apply custom basemap names:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Basemap Toggle</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.16/esri/css/esri.css">
  <style>
    html, body, #map {
      padding:0;
      margin:0;
      height:100%;
    }
    #BasemapToggle {
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 50;
    }
  </style>
  <script src="http://js.arcgis.com/3.16/"></script>
  <script>
var map;
    require([
      "esri/map",
      "esri/dijit/BasemapToggle",
      "esri/dijit/Basemap",
      "esri/dijit/BasemapLayer",
      "esri/geometry/Extent",
      "esri/basemaps",
      "dojo/domReady!"
    ], function(
      Map,
      BasemapToggle,
      Basemap,
      BasemapLayer,
      Extent,
      esriBasemaps
    )  {

      map = new Map("map", {
        basemap: 'streets'
      });

      var toggle = new BasemapToggle({
        map: map,
        basemap: "topo",
        basemaps:{
          "streets":{
            "title":"Streets 777",
            "thumbnailUrl":"https://js.arcgis.com/3.16/esri/images/basemap/streets.jpg"
          },
          "topo":{
            "title":"Topography 777",
            "thumbnailUrl":"https://js.arcgis.com/3.16/esri/images/basemap/topo.jpg"
          }
        }
      }, "BasemapToggle");
      toggle.startup();

    });
  </script>
</head>
<body>
  <div id="map" class="map">
    <div id="BasemapToggle"></div>
  </div>
</body>
</html>

Re: Change the togglebasemap title

SteveCole — Fri, 17 Jun 2016 20:55:02 GMT

I think another option is modifying the default string used by the API. This link discusses that topic. If you follow the suggestion at the bottom of that page, you'll notice that there's a "basemaps" object and I think you'd be able to modify the label/string in there.

Steve