Community
Select to view content in your preferred language

Add a basemap layer

5600
21
Jump to solution
11-17-2017 08:53 AM
BrandonPrice
by
Frequent Contributor
‎11-17-2017 08:53 AM

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

0 Kudos
21 Replies
BrandonPrice
by
Frequent Contributor
‎12-14-2017 08:42 AM

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/..."){
                  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);
                 }
            },
         });
      });

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

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎12-14-2017 09:15 AM

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?

0 Kudos
BrandonPrice
by
Frequent Contributor
‎12-14-2017 10:14 AM

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.

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎12-14-2017 10:20 AM

Brandon,

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

0 Kudos
BrandonPrice
by
Frequent Contributor
‎12-14-2017 10:38 PM

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/..."){

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/r...");

app.map.addLayer(vectorTileLayer, 0);

  }

});

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

Brandon

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎12-15-2017 05:56 AM

Great, be sure to mark this as answered then.

BrandonPrice
by
Frequent Contributor
‎12-15-2017 12:34 PM

Thanks

0 Kudos
BrandonPrice
by
Frequent Contributor
‎12-15-2017 02:59 PM

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

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎12-15-2017 05:47 PM

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/...") {
        map.removeLayer(baseLyr);
        var vectorTileLayer = new VectorTileLayer("http://www.arcgis.com/sharing/rest/content/items/e19e9330bf08490ca8353d76b5e2e658/resources/styles/r...");
        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/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);
//This is where you would change the button text.
        evt.target.innerHTML = "basemap2";
      }
    },
  });
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
BrandonPrice
by
Frequent Contributor
‎12-19-2017 07:34 AM

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]);
         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);
     app.map.removeLayer(baseLyr);
   app.map.addLayer(vectorTileLayer, 0);
Not sure if this is correct. I used jquery to change the thumbnail onclick.
0 Kudos