topic Re: Add a basemap layer in ArcGIS JavaScript Maps SDK Questions

Add a basemap layer

BrandonPrice — Fri, 10 Dec 2021 20:40:48 GMT

I would like to add a basemap layer to a custom web app made with arcgis api javascript framework syntax. I am using ArcGIS API 3.22 to call an arcgis online web map that has no basemap. I would like to set it using arcgis api for js. Can you add a baselayer with a map that has already been created? I cannot use something like:

var map = new esri.Map("mapDiv", {
        center: [-56.049, 38.485],
        zoom: 3,
        basemap: "streets"
      });

because the map has been created.

Thanks,

Brandon

https://community.esri.com/community/gis/web-gis/storymaps?sr=search&searchId=3ed16340-2d5e-48ee-a9ab-075ba0ffe41c&searchIndex=3‌

https://community.esri.com/groups/web-app-builder-custom-widgets?sr=search&searchId=2ab0dae4-3629-488a-9390-4c26c6a0ea27&searchIndex=0‌

Re: Add a basemap layer

RobertScheitlin__GISP — Fri, 17 Nov 2017 17:00:21 GMT

Brandon,

Is your basemap in the same spatial reference as the existing map?

Re: Add a basemap layer

BrandonPrice — Fri, 17 Nov 2017 17:11:58 GMT

Hi Robert,

I am not sure.

Re: Add a basemap layer

RobertScheitlin__GISP — Fri, 17 Nov 2017 17:34:55 GMT

Brandon,

Hmm.. is it not your base map? What is the url or portal item is?

Re: Add a basemap layer

RobertScheitlin__GISP — Fri, 17 Nov 2017 17:35:34 GMT

Portal item id?

Re: Add a basemap layer

BrandonPrice — Fri, 17 Nov 2017 18:40:40 GMT

Hi Robert,

I am using this web map id: ba7b97b7d6b24c6381eba23062f8aab1

and trying to call or add this basemap: https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer

Brandon

Re: Add a basemap layer

RobertScheitlin__GISP — Fri, 10 Dec 2021 20:40:51 GMT

Brandon,

It sounds like you are attempting to toggle the basemap. If so here is a sample:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Create web map from id</title>

  <link rel="stylesheet" href="https://js.arcgis.com/3.22/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">

  <script src="https://js.arcgis.com/3.22/" data-dojo-config="async:true"></script>
  <script>
    require([
      "dojo/parser",
      "dojo/ready",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dojo/dom",
      "esri/map",
      "esri/urlUtils",
      "esri/arcgis/utils",
      "esri/dijit/Legend",
      "esri/dijit/Scalebar",
      "dijit/form/Button",
      "esri/layers/VectorTileLayer",
      "dojo/domReady!"
    ], function(
      parser,
      ready,
      BorderContainer,
      ContentPane,
      dom,
      Map,
      urlUtils,
      arcgisUtils,
      Legend,
      Scalebar,
      Button,
      VectorTileLayer
    ) {
      ready(function() {

        parser.parse();

        //if accessing webmap from a portal outside of ArcGIS Online, uncomment and replace path with portal URL
        //arcgisUtils.arcgisUrl = "https://pathto/portal/sharing/content/items";
        arcgisUtils.createMap("ba7b97b7d6b24c6381eba23062f8aab1", "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"
          });

          //add the legend. Note that we use the utility method getLegendLayers to get
          //the layers to display in the legend from the createMap response.
          var legendLayers = arcgisUtils.getLegendLayers(response);
          var legendDijit = new Legend({
            map: map,
            layerInfos: legendLayers
          }, "legend");
          legendDijit.startup();

          var myButton = new Button({
            label: "Toggle Basemap",
            onClick: function(){
              var baseLyr = map.getLayer(map.layerIds[0]);
              if(baseLyr.url === "https://www.arcgis.com/sharing/rest/content/items/0e0aa048cb9a42de91ae287fc5632fac/resources/styles/root.json"){
                map.removeLayer(baseLyr);
                var vectorTileLayer = new VectorTileLayer("http://www.arcgis.com/sharing/rest/content/items/e19e9330bf08490ca8353d76b5e2e658/resources/styles/root.json");
                map.addLayer(vectorTileLayer, 0);
              } else if(baseLyr.url === "http://www.arcgis.com/sharing/rest/content/items/e19e9330bf08490ca8353d76b5e2e658/resources/styles/root.json" ||
                "http://public.gis.lacounty.gov/public/rest/services/LACounty_Cache/LACounty_Base/MapServer"){
                map.removeLayer(baseLyr);
                var vectorTileLayer2 = new VectorTileLayer("http://www.arcgis.com/sharing/rest/content/items/0e0aa048cb9a42de91ae287fc5632fac/resources/styles/root.json");
                map.addLayer(vectorTileLayer2, 0);
              }
            },
            style: "position: absolute; top: 20px; right: 20px;"
          }).placeAt(dijit.byId("map").containerNode).startup();
        });
      });

    });
  </script>
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: "Helvetica";
    }

    #header {
      background-color: #E8E8E8;
      height: 65px;
      margin: 5px 5px;
    }

    #mainWindow {
      width: 100%;
      height: 100%;
    }

    #title {
      padding-top: 2px;
      padding-left: 10px;
      font-size: 18pt;
      font-weight: 700;
    }

    #subtitle {
      font-size: small;
      padding-left: 40px;
    }

    #rightPane {
      background-color: #E8E8E8;
      margin: 5px;
      width: 20%;
    }

    #map {
      margin: 5px;
      padding: 0;
    }
  </style>
</head>

<body class="claro">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">
    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
      <div id="title"></div>
      <div id="subtitle"></div>
    </div>
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
    </div>
    <div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
      <div id="legend"></div>
    </div>
  </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Add a basemap layer

BrandonPrice — Thu, 07 Dec 2017 17:09:08 GMT

Hi Robert,

Thanks for the example. However, I am unable to get the button to show in my map. I am using a story map tabbed theme. It uses "app.map" instead of "map". I haven't solved this yet. Let me know if you have any ideas. I will post the script solution when it's solved.

-Brandon

Re: Add a basemap layer

BrandonPrice — Fri, 08 Dec 2017 18:26:01 GMT

Is there a way to declaratively create this button rather than programmatically?

Re: Add a basemap layer

RobertScheitlin__GISP — Fri, 08 Dec 2017 18:39:50 GMT

Brandon,

Is your story map public?

Re: Add a basemap layer

BrandonPrice — Thu, 14 Dec 2017 16:42:22 GMT

Hi Robert,

Unfortunately no. I have used part of your script example. I believe I almost have it.

This is what I have:

AMD: require(["dojo/topic", "dijit/Dialog", "dojo/dom-style",
"dojo/dom", "dijit/form/Button", "dojo/on",
"dijit/registry", "esri/map", "esri/layers/VectorTileLayer", "dojo/domReady!"]

Function: function (topic, Dialog, domStyle,
dom, Button, on,
registry, Map, VectorTileLayer) {

Script: var myButton5 = dom.byId("togglebasemap");
               on(myButton5, "click", function () {
               var baseLyr = map.getLayer(map.layerIds[0]);
                  if(baseLyr.url === "https://www.arcgis.com/sharing/rest/content/items/0e0aa048cb9a42de91ae287fc5632fac/resources/styles/root.json"){
                  map.removeLayer(baseLyr);
                  var vectorTileLayer = new VectorTileLayer("http://www.arcgis.com/sharing/rest/content/items/e19e9330bf08490ca8353d76b5e2e658/resources/styles/root.json");
                  map.addLayer(vectorTileLayer, 0);
                  } else if(baseLyr.url === "http://www.arcgis.com/sharing/rest/content/items/e19e9330bf08490ca8353d76b5e2e658/resources/styles/root.json" ||
                  "http://public.gis.lacounty.gov/public/rest/services/LACounty_Cache/LACounty_Base/MapServer"){
                  map.removeLayer(baseLyr);
                  var vectorTileLayer2 = new VectorTileLayer("http://www.arcgis.com/sharing/rest/content/items/0e0aa048cb9a42de91ae287fc5632fac/resources/styles/root.json");
                  map.addLayer(vectorTileLayer2, 0);
                 }
            },
         });
      });

HTML: <button id="togglebasemap" data-dojo-type="dijit/form/Button" type="button" style="font-size:11px;">Basemap Toggle</button>

Re: Add a basemap layer

RobertScheitlin__GISP — Thu, 14 Dec 2017 17:15:24 GMT

Brandon,

There are to many unknown variable here for me to just be able to look at what you provided be able to tell much. So, does the button show up? Does the click event get fired?

Re: Add a basemap layer

BrandonPrice — Thu, 14 Dec 2017 18:14:35 GMT

Hi Robert,

The button shows up in the map, but the click event does not fire. I tested this yesterday:

var myButton5 = dom.byId("togglebasemap");
on(myButton5, "click", function () {

alert("Hello! I am an alert box!!");

}
});

and got an alert message. The basemap script does not work nor does it fire on the other hand.

Re: Add a basemap layer

RobertScheitlin__GISP — Thu, 14 Dec 2017 18:20:30 GMT

Brandon,

Did you change all occurrences of map to app.map?

Re: Add a basemap layer

BrandonPrice — Fri, 15 Dec 2017 06:38:14 GMT

This is what I have:

var togglebasemap = dom.byId("togglebasemap");

on(togglebasemap, "click", function () {

var baseLyr = app.map.getLayer(app.map.layerIds[0]);

if(baseLyr.url === "https://www.arcgis.com/sharing/rest/content/items/0e0aa048cb9a42de91ae287fc5632fac/resources/styles/root.json"){

app.map.removeLayer(baseLyr);

var tiled = new ArcGISTiledMapServiceLayer("http://public.gis.lacounty.gov/public/rest/services/LACounty_Cache/LACounty_Base/MapServer");

app.map.addLayer(tiled, 0);

} else if(baseLyr.url === "http://public.gis.lacounty.gov/public/rest/services/LACounty_Cache/LACounty_Base/MapServer"){

app.map.removeLayer(baseLyr);

var vectorTileLayer = new VectorTileLayer("http://www.arcgis.com/sharing/rest/content/items/0e0aa048cb9a42de91ae287fc5632fac/resources/styles/root.json");

app.map.addLayer(vectorTileLayer, 0);

}

});

This works for now. I will repost the new script if I make changes.

Brandon

Re: Add a basemap layer

RobertScheitlin__GISP — Fri, 15 Dec 2017 13:56:06 GMT

Great, be sure to mark this as answered then.

Re: Add a basemap layer

BrandonPrice — Fri, 15 Dec 2017 20:34:45 GMT

Thanks

Re: Add a basemap layer

BrandonPrice — Fri, 15 Dec 2017 22:59:40 GMT

Hi Robert,

I would also like to change the text of the button onclick using css. This is what I have:

CSS:

#togglebasemap {
position: absolute;
visibility: visible;
}
#togglebasemap: :after {
content:'Vector';
visibility: visible;
}

HTML:

<button id="togglebasemap" data-dojo-type="dijit/form/Button" type="button">Aerial</button>

It does not work. Is something wrong? Is this the best way if I get it to work or is this not the best way?

Brandon

Re: Add a basemap layer

RobertScheitlin__GISP — Fri, 10 Dec 2021 20:40:54 GMT

No actually css is not the way to handle that. Here is some changes to your code:

require(["dojo/topic", "dijit/Dialog", "dojo/dom-style",
  "dojo/dom", "dijit/form/Button", "dojo/on",
  "dijit/registry", "esri/map", "esri/layers/VectorTileLayer", "dojo/domReady!"
]

Function: function(topic, Dialog, domStyle,
  dom, Button, on,
  registry, Map, VectorTileLayer) {

  var myButton5 = dom.byId("togglebasemap");
  on(myButton5, "click", function(evt) {
      var baseLyr = map.getLayer(map.layerIds[0]);
      if(baseLyr.url === "https://www.arcgis.com/sharing/rest/content/items/0e0aa048cb9a42de91ae287fc5632fac/resources/styles/root.json") {
        map.removeLayer(baseLyr);
        var vectorTileLayer = new VectorTileLayer("http://www.arcgis.com/sharing/rest/content/items/e19e9330bf08490ca8353d76b5e2e658/resources/styles/root.json");
        map.addLayer(vectorTileLayer, 0);
//This is where you would change the button text.
        evt.target.innerHTML = "basemap1";
      } else if(baseLyr.url === "http://www.arcgis.com/sharing/rest/content/items/e19e9330bf08490ca8353d76b5e2e658/resources/styles/root.json" ||
        "http://public.gis.lacounty.gov/public/rest/services/LACounty_Cache/LACounty_Base/MapServer") {
        map.removeLayer(baseLyr);
        var vectorTileLayer2 = new VectorTileLayer("http://www.arcgis.com/sharing/rest/content/items/0e0aa048cb9a42de91ae287fc5632fac/resources/styles/root.json");
        map.addLayer(vectorTileLayer2, 0);
//This is where you would change the button text.
        evt.target.innerHTML = "basemap2";
      }
    },
  });
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Add a basemap layer

BrandonPrice — Tue, 19 Dec 2017 15:34:47 GMT

Hi Robert,

This is what I have:

var togglebasemap = dom.byId("togglebasemap");

on(togglebasemap, "click", function () {

var baseLyr = app.map.getLayer(app.map.layerIds[0]);

if(baseLyr.url === "https://www.arcgis.com/sharing/rest/content/items/0e0aa048cb9a42de91ae287fc5632fac/resources/styles/root.json"){

app.map.removeLayer(baseLyr);

var tiled = new ArcGISTiledMapServiceLayer("http://public.gis.lacounty.gov/public/rest/services/LACounty_Cache/LACounty_Base/MapServer");

app.map.addLayer(tiled, 0);

$('#togglebasemap').css('background-image', 'url(http://caltrans.maps.arcgis.com/sharing/rest/content/items/0e0aa048cb9a42de91ae287fc5632fac/info/thumbnail/ago_downloaded.jp g)');

} else if(baseLyr.url === "http://public.gis.lacounty.gov/public/rest/services/LACounty_Cache/LACounty_Base/MapServer"){

app.map.removeLayer(baseLyr);

var vectorTileLayer = new VectorTileLayer("http://www.arcgis.com/sharing/rest/content/items/0e0aa048cb9a42de91ae287fc5632fac/resources/styles/root.json");

app.map.addLayer(vectorTileLayer, 0);

$('#togglebasemap').css('background-image', 'url(http://caltrans.maps.arcgis.com/sharing/rest/content/items/10df2279f9684e4a9f6a7f08febac2a9/info/thumbnail/ago_downloaded.jpg)');

Not sure if this is correct. I used jquery to change the thumbnail onclick.