Add a basemap layer

BrandonPrice · ‎11-17-2017

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-a9a...‌

https://community.esri.com/groups/web-app-builder-custom-widgets?sr=search&searchId=2ab0dae4-3629-48...‌

RobertScheitlin__GISP · ‎11-17-2017

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/..."){
                map.removeLayer(baseLyr);
                var vectorTileLayer = new VectorTileLayer("http://www.arcgis.com/sharing/rest/content/items/e19e9330bf08490ca8353d76b5e2e658/resources/styles/r...");
                map.addLayer(vectorTileLayer, 0);
              } else if(baseLyr.url === "http://www.arcgis.com/sharing/rest/content/items/e19e9330bf08490ca8353d76b5e2e658/resources/styles/r..." ||
                "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/r...");
                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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎11-17-2017

Brandon,

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

BrandonPrice · ‎11-17-2017

Hi Robert,

I am not sure.

RobertScheitlin__GISP · ‎11-17-2017

Brandon,

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

RobertScheitlin__GISP · ‎11-17-2017

Portal item id?

BrandonPrice · ‎11-17-2017

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

RobertScheitlin__GISP · ‎11-17-2017

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/..."){
                map.removeLayer(baseLyr);
                var vectorTileLayer = new VectorTileLayer("http://www.arcgis.com/sharing/rest/content/items/e19e9330bf08490ca8353d76b5e2e658/resources/styles/r...");
                map.addLayer(vectorTileLayer, 0);
              } else if(baseLyr.url === "http://www.arcgis.com/sharing/rest/content/items/e19e9330bf08490ca8353d76b5e2e658/resources/styles/r..." ||
                "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/r...");
                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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

BrandonPrice · ‎12-07-2017

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

BrandonPrice · ‎12-08-2017

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

RobertScheitlin__GISP · ‎12-08-2017

Brandon,

Is your story map public?