Help with Creating a map on top of Esri's Basemap Gallery

RichardLafleur · ‎03-30-2016

I need help getting the following map/code to show up, but have the map gallery as the basemap.

My code

arcgisUtils.createMap("511bd0e84f1441edb7bf55167ecddec2", "map").then(function (response) {

//update the app

dom.byId("title").innerHTML = response.itemInfo.item.title;

dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;

map = response.map;

//add the scalebar

scalebar = new Scalebar({

map: map,

scalebarUnit: "english"

});

overviewMapDijit = new OverviewMap({

map: map,

visible: true

});

overviewMapDijit.startup();

//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);

legendDijit = new Legend({

map: map,

layerInfos: legendLayers

}, "legend");

legendDijit.startup();

});

the Map gallery

<!DOCTYPE html>

<html>

<head>

<style>

html, body { height: 100%; width: 100%; margin: 0; padding: 0; }

#map{

padding:0;

}

</style>

var map;

require([

"esri/map", "esri/dijit/BasemapGallery", "esri/arcgis/utils",

"dojo/parser",

"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",

"dojo/domReady!"

], function(

Map, BasemapGallery, arcgisUtils,

parser

) {

parser.parse();

map = new Map("map", {

basemap: "topo",

center: [-105.255, 40.022],

zoom: 13

});

//add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps

var basemapGallery = new BasemapGallery({

showArcGISBasemaps: true,

map: map

}, "basemapGallery");

basemapGallery.startup();

basemapGallery.on("error", function(msg) {

console.log("basemap gallery error: ", msg);

});

</script>

</head>

<div data-dojo-type="dijit/layout/BorderContainer"

data-dojo-props="design:'headline', gutters:false"

style="width:100%;height:100%;margin:0;">

<div id="map"

data-dojo-type="dijit/layout/ContentPane"

data-dojo-props="region:'center'"

style="padding:0;">

<div data-dojo-type="dijit/TitlePane"

data-dojo-props="title:'Switch Basemap', closable:false, open:false">

</div>

</body>

</html>

Also,as you can see in my code i have a legend, scalebar, and overview map that i need as well. Can anyone help with this i dont really care what the layout looks like just as long as my map shows up on top of the basmap gallery and i can change the basemap and yet have my data stay put.

RichardLafleur · ‎04-01-2016

can someone please help with this, or at least direct me to the correct result.

AdrianWelsh · ‎04-02-2016

Richard,

Is there any error being thrown with the basemap error message?

RichardLafleur · ‎04-02-2016

I think i am placing my code in the wrong place and might be missing some code, cause when i run it everything disappears.

RichardLafleur · ‎04-02-2016

Here is an update of what i have been able to figure out, what i can't get now is the "switch basemap" drop down to actually switch the basemap.

<!DOCTYPE html>

<html>

<head>

<title>Create web map from id</title>

<style>

html, body { height: 100%; width: 100%; margin: 0; padding: 0; }

#map{

padding:0;

}

</style>

var map;

require([

"dojo/parser",

"dojo/ready",

"dijit/layout/BorderContainer",

"dijit/layout/ContentPane",

"dijit/TitlePane",

"dojo/dom",

"esri/map",

"esri/dijit/BasemapGallery",

"esri/arcgis/utils",

"esri/dijit/Legend",

"esri/dijit/Scalebar",

"esri/dijit/OverviewMap",

"dojo/domReady!"

], function(

parser,

ready,

BorderContainer,

ContentPane,

TitlePane,

dom,

Map,

BasemapGallery,

arcgisUtils,

Legend,

Scalebar,

OverviewMap

) {

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("511bd0e84f1441edb7bf55167ecddec2", "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 overviewMapDijit = new OverviewMap({

map: map,

visible: true,

attachTo: "bottom-right"

});

overviewMapDijit.startup();

});

var basemapGallery = new BasemapGallery({

showArcGISBasemaps: true,

map: map

}, "basemapGallery");

basemapGallery.startup();

basemapGallery.on("error", function(msg) {

console.log("basemap gallery error: ", msg);

});

</script>

</head>

</div>

<div id="map"

data-dojo-type="dijit/layout/ContentPane"

data-dojo-props="region:'center'"

style="padding:0;">

<div data-dojo-type="dijit/TitlePane"

data-dojo-props="title:'Switch Basemap', closable:false, open:false">

</div>

</div>

</body>

</html>

RichardLafleur · ‎04-02-2016

if you cant get your code the code to work, i am having to building this in a virtual machine, and then within esri's sandbox

located here ArcGIS API for JavaScript Sandbox

AdrianWelsh · ‎04-04-2016

Richard,

I really am at a loss. I tried toying around with this in the sandbox and could not get the basemap to change. I feel like it has something to do with this line:

var map = response.map;

...but I really don't know.

Just some advice, it might help to put your code in the code editor (click on "Usa advanced editor" > double arrows > Syntax > Javascript)