topic Re: Is it possible to change the basemap of a webmp in ArcGIS JavaScript Maps SDK Questions

Is it possible to change the basemap of a webmp

simoxu — Wed, 12 Jun 2019 01:13:43 GMT

I mean programmatically without using esri dijits (BasemapGallery, BasemapToggle).

I tried something like map.setBaseMap("Satellite") which works for maps other than webmaps built in AGOL /Portal.

It seems unreasonable if no API is available for such a common operation.

Re: Is it possible to change the basemap of a webmp

Egge-Jan_Pollé — Fri, 10 Dec 2021 20:31:59 GMT

Hi simo xu‌,

Maybe this is what you are looking for:

map.basemap = "satellite";

See example below where the basemap changes, depending on the scale of the view.

What do you think?

Cheers,

Egge-Jan

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>Watching property changes</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css" />
    <script src="https://js.arcgis.com/4.11/"></script>
    <script>
      require(["esri/WebMap", "esri/views/MapView"], function(WebMap, MapView) {
        var map = new WebMap({
          basemap: "satellite"
        });

        var view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 4,
          center: [15, 65]
        });

        // watch handler: the callback fires each time the scale of the view changes
        var handle = view.watch('scale', function(newScale) {
            console.log("Scale: ", newScale);
            console.log("Basemap: ", map.basemap.title);
            if (newScale > 10000000) {
                map.basemap = "satellite";
            } else {
                map.basemap = "streets";
            }
        });
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Is it possible to change the basemap of a webmp

simoxu — Fri, 10 Dec 2021 20:32:02 GMT

Thank you Egge-Jan,

Maybe I didn't state my issue clearly. I built the webmap in ArcGIS Online, and I "load" it using ArcgIS JavaScript API 3.28 like the following:

        arcgisUtils.createMap("4abe6a830b8f466dacf8abfde567a781", "map").then(function (response) {
          //update the app
          dom.byId("title").innerHTML = response.itemInfo.item.title;
          dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;

          var map = response.map;

          //add the scalebar
          var scalebar = new Scalebar({
            map: map,
            scalebarUnit: "english"
          });

The above is a code snippet from this ESRI exmaple.

In this case, I found I can't change the basemap of the webmap.

Re: Is it possible to change the basemap of a webmp

RobertScheitlin__GISP — Fri, 10 Dec 2021 20:32:05 GMT

Simo,

You can get the base map by retrieving layer id 0 from the map.

map.removeLayer(map.getLayer(map.layerIds[0]));
//then set the new basemap using
var baseMapLayer = "your basemap layer";
baseMapLayer._basemapGalleryLayerType = "basemap";
map.addLayer(yourbasemap, 0);‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Is it possible to change the basemap of a webmp

simoxu — Fri, 14 Jun 2019 03:25:38 GMT

Hi Robert,

Excellent, It works!

Thanks.