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
Solved! Go to Solution.
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>
Brandon,
Is your basemap in the same spatial reference as the existing map?
Hi Robert,
I am not sure.
Brandon,
Hmm.. is it not your base map? What is the url or portal item is?
Portal item id?
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
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>
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
Is there a way to declaratively create this button rather than programmatically?
Brandon,
Is your story map public?