topic Re: Add basemap dynamically in ArcGIS JavaScript Maps SDK Questions

Add basemap dynamically

BhavinSanghani — Fri, 01 May 2015 20:55:55 GMT

I want to give users flexibility to add basemap layer after their dynamic service layer is loaded on the map. See following example, I have highlighted code and what works/doesn't work.

I guess basemap must be added as first layer only. basemap's layer id will be always layer0? Is there any workaround if the basemap is not added as a first layer and want to add it after the map is loaded with dynamic service layer?

<!DOCTYPE html>

<html>

<head>

<title>Feature Layer Only Map</title>

<style>

html, body, #map {

height: 100%;

width: 100%;

margin: 0;

padding: 0;

}

</style>

require([

"dojo/dom-construct",

"esri/map",

"esri/layers/FeatureLayer",

"esri/geometry/Extent",

"esri/InfoTemplate",

"dojo/domReady!"

], function(

domConstruct,

Map,

FeatureLayer,

Extent,

InfoTemplate

) {

var bounds = new Extent({

"xmin":-16045622,

"ymin":-811556,

"xmax":7297718,

"ymax":11142818,

"spatialReference":{"wkid":102100}

});

var map = new Map("map", {

extent: bounds

});

var url = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer/2";

var template = new InfoTemplate("World Regions", "Region: ${REGION}");

var fl = new FeatureLayer(url, {

id: "world-regions",

infoTemplate: template

});

//map.setBasemap('streets'); //it works here

map.addLayer(fl);

map.setBasemap('streets'); //it doesn't work here

}

);

</script>

</head>

<body>

</body>

</html>

Re: Add basemap dynamically

ChrisSmith7 — Fri, 01 May 2015 21:23:08 GMT

Try something like:

<!DOCTYPE html>

<html>

<head>

<title>Feature Layer Only Map</title>

<style>

html, body, #map {

height: 100%;

width: 100%;

margin: 0;

padding: 0;

}

</style>

require([

"dojo/dom-construct",

"esri/map",

"esri/layers/FeatureLayer",

"esri/geometry/Extent",

"esri/InfoTemplate",

"dojo/domReady!"

], function(

domConstruct,

Map,

FeatureLayer,

Extent,

InfoTemplate

) {

var bounds = new Extent({

"xmin":-16045622,

"ymin":-811556,

"xmax":7297718,

"ymax":11142818,

"spatialReference":{"wkid":102100}

});

var map = new Map("map", {

extent: bounds,

basemap: "streets"

});

var bm = map.getLayer("layer0");

bm.setVisibility(false);

var url = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer/2";

var template = new InfoTemplate("World Regions", "Region: ${REGION}");

var fl = new FeatureLayer(url, {

id: "world-regions",

infoTemplate: template

});

map.addLayer(fl);

bm.setVisibility(true);

}

);

</script>

</head>

<body>

</body>

</html>

Re: Add basemap dynamically

BhavinSanghani — Fri, 01 May 2015 21:45:38 GMT

Hi Chris,

This is good idea. But why can't we add basemap after adding dynamic layer? Is it not possible to do?

Re: Add basemap dynamically

ChrisSmith7 — Fri, 01 May 2015 23:42:51 GMT

I haven't debugged/tested this, but I think you must set a basemap when you declare "map." After you do that, you may be able to use map.setBasemap("streets");

You would need to hide the layers visibility if you wanted the map to show first without a basemap, Then, you should be able to call "setBaseMap" and change it to something else. I suspect it's not working the way you have it because the first layer you add is at index 0... when you try to add the basemap afterwords, it may be conflicting. I haven't actually tested this, but it seems like it could be possible.

The code I gave before would only work for the initial basemap set-up with the map, but you could try this (untested😞

<!DOCTYPE html>

<html>

<head>

<title>Feature Layer Only Map</title>

<style>

html, body, #map {

height: 100%;

width: 100%;

margin: 0;

padding: 0;

}

</style>

require([

"dojo/dom-construct",

"esri/map",

"esri/layers/FeatureLayer",

"esri/geometry/Extent",

"esri/InfoTemplate",

"dojo/domReady!"

], function(

domConstruct,

Map,

FeatureLayer,

Extent,

InfoTemplate

) {

var bounds = new Extent({

"xmin":-16045622,

"ymin":-811556,

"xmax":7297718,

"ymax":11142818,

"spatialReference":{"wkid":102100}

});

var map = new Map("map", {

extent: bounds,

basemap: "streets"

});

var bm = map.getLayer("layer0");

bm.setVisibility(false);

var url = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer/2";

var template = new InfoTemplate("World Regions", "Region: ${REGION}");

var fl = new FeatureLayer(url, {

id: "world-regions",

infoTemplate: template

});

map.addLayer(fl);

map.setBasemap('topo');

bm.setVisibility(true);

}

);

</script>

</head>

<body>

</body>

</html>

Re: Add basemap dynamically

ChrisSmith7 — Fri, 01 May 2015 23:48:19 GMT

Also, just in case it's helpful, see can the basemap be hidden

Diana has some code in it showing how you can add a basemap as a layer.