Community

bing base

953
11
12-06-2017 04:40 AM
anjelinaponkerat
by
Occasional Contributor II
‎12-06-2017 04:40 AM

Hi

I wrote a sample for load bing map in base, but I have problem:

<!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=yes">
<title>Map</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/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0%;
font-family: Mitra;
}

#map {
border: solid 1px #B5BCC7;
padding: 0;
font-family: Mitra;
}

#paneHeader {
background-color: #ffffff;
color: white;
text-align: center;
height: 30px;
margin: 0;
overflow: hidden;
font-size: 16px;
padding: 8px 5px;
font-family: Mitra;
}

#rightPane {
width: 150px;
margin: 0;
padding: 0;
font-family: Mitra;
font-size: 13px;
}

#HomeButton {
position: absolute;
top: 95px;
left: 20px;
z-index: 50;
}

#bufferDialogBtn {
float: right;
}

.nonModal_underlay {
display: none;
}

h3 {
margin: 0 0 5px 0;
border-bottom: 1px solid #444;
}

.shadow {
box-shadow: 0 0 5px #888;
}

#feedback {
background: #fff;
color: #444;
position: absolute;
font-family: arial;
height: 300px;
left: 55px;
margin: 5px;
padding: 10px;
top: 20px;
width: 300px;
z-index: 40;
}

#note,
#hint {
font-size: 80%;
}

#note {
font-weight: 700;
padding: 0 0 10px 0;
}

#layerList {
width: 200px;
}

.dojoDndItemOver {
background: #ccc;
}
</style>
<script src="https://js.arcgis.com/3.22/"></script>
<script>
var map, infos =[], dndSource, dynamicLayerInfos;
require([
"dojo/dom", "esri/Color", "dojo/keys", "dojo/parser", "esri/config",
"esri/sniff", "esri/map", "esri/SnappingManager", "esri/dijit/Measurement",
"esri/layers/FeatureLayer", "esri/renderers/SimpleRenderer", "esri/tasks/GeometryService",
"esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
"esri/dijit/Scalebar",
"esri/dijit/BasemapGallery",
"esri/dijit/BasemapLayer",
"esri/dijit/Basemap",
"esri/dijit/OverviewMap",
"esri/tasks/locator",
"esri/dijit/Search",
"esri/symbols/PictureMarkerSymbol",
"esri/InfoTemplate",
"esri/dijit/HomeButton",
"esri/geometry/Extent",
"esri/SpatialReference",
"esri/dijit/VisibleScaleRangeSlider",
"esri/geometry/scaleUtils",
"esri/virtualearth/VETiledLayer",
"dijit/form/Button",
"esri/tasks/query",
"esri/geometry/Circle",
"esri/graphic",
"esri/symbols/SimpleMarkerSymbol",
"dojo/on",
"esri/toolbars/draw",
"esri/units",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/DynamicLayerInfo",
"esri/layers/LayerDataSource",
"esri/layers/LayerDrawingOptions",
"esri/layers/TableDataSource",
"dojo/dom",
"dojo/dom-construct",
"dojo/dom-style",
"dojo/query",
"dojo/_base/array",
"dojo/dnd/Source",
"dijit/registry",
"dijit/form/Button",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/TitlePane",
"dijit/Dialog",
"dojo/domReady!"
], function(
dom, Color, keys, parser, esriConfig,
has, Map, SnappingManager, Measurement,
FeatureLayer, SimpleRenderer, GeometryService,
SimpleLineSymbol, SimpleFillSymbol,
Scalebar, BasemapGallery, BasemapLayer, Basemap, OverviewMap, Locator, Search, PictureMarkerSymbol, InfoTemplate, HomeButton, Extent, SpatialReference, VisibleScaleRangeSlider, scaleUtils, VETiledLayer, Button, Query, Circle, Graphic,
SimpleMarkerSymbol, on, Draw, units,
ArcGISDynamicMapServiceLayer,
DynamicLayerInfo, LayerDataSource,
LayerDrawingOptions, TableDataSource, dom, domConstruct, domStyle, query, arrayUtils, Source, registry
) {
parser.parse();

esriConfig.defaults.io.proxyUrl = "/proxy/";
esriConfig.defaults.io.alwaysUseProxy = false;
esriConfig.defaults.geometryService = new GeometryService("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

map = new Map("map");

var basemaps = [];
var waterTemplateLayer = new BasemapLayer({
url: "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/WaterTemplate/LocalGovernmentInfrastruct..."
});
var waterBasemap = new Basemap({
layers: [waterTemplateLayer],
title: "Water Template",
thumbnailUrl: "images/waterThumb.png"
});
basemaps.push(waterBasemap);
var publicSafetyLayer = new BasemapLayer({
url: "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/PublicSafety/PublicSafetyBasemap/MapServ..."
});
var publicSafetyBasemap = new Basemap({
layers: [publicSafetyLayer],
title: "Public Safety",
thumbnailUrl: "images/safetyThumb.png"
});
basemaps.push(publicSafetyBasemap);





var basemapHybrid = new esri.dijit.Basemap({
layers: [new esri.dijit.BasemapLayer({
type: "BingMapsHybrid"
})],
id: "bmHybrid",
title: "Aerial with labels"
});
basemaps.push(basemapHybrid);


basemapGallery = new esri.dijit.BasemapGallery({
showArcGISBasemaps: false,
basemaps: basemaps,
bingMapsKey: prompt("Please enter your bing maps key"),
map: map
});





var basemapGallery = new BasemapGallery({
showArcGISBasemaps: false,
basemaps: basemaps,
map: map
}, "basemapGallery");
basemapGallery.startup();
basemapGallery.on("error", function(error) {
console.log(error);
});

var scalebar = new Scalebar({
map: map,
// "dual" displays both miles and kilometers
// "english" is the default, which displays miles
// use "metric" for kilometers
scalebarUnit: "dual"
});

map.on("load", function(){
dndSource = new Source("layerList");
dndSource.on("DndDrop", reorderLayers);
usaLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer", {
"id": "usa"
});
// only create the layer list the first time update-end fires
on.once(usaLayer, "update-end", buildLayerList);
map.addLayer(usaLayer);
usaLayer.on("load", function(e) {
dynamicLayerInfos = e.target.createDynamicLayerInfosFromLayerInfos();
arrayUtils.forEach(dynamicLayerInfos, function(info) {
var i = {
id: info.id,
name: info.name,
position: info.id
};
if (arrayUtils.indexOf(usaLayer.visibleLayers, info.id) > -1) {
i.visible = true;
} else {
i.visible = false;
}
infos[info.id] = i;
});
infos.total = dynamicLayerInfos.length;
e.target.setDynamicLayerInfos(dynamicLayerInfos, true);
});
});

// add the lakes layer to the existing map service
registry.byId("lakes").on("click", addLakes);

function buildLayerList() {
dndSource.clearItems();
domConstruct.empty(dom.byId("layerList"));
var layerNames = [];
for (var info in infos) {
if (!infos[info].hasOwnProperty("id")) {
continue;
}
// only want the layer's name, don't need the db name and owner name
var nameParts = infos[info].name.split(".");
var layerName = nameParts[nameParts.length - 1];
var layerDiv = createToggle(layerName, infos[info].visible);
layerNames[infos[info].position] = layerDiv;
}
dndSource.insertNodes(false, layerNames);
}

function toggleLayer(e) {
for (var info in infos) {
var i = infos[info];
if (i.name === e.target.name) {
i.visible = !i.visible;
}
}
var visible = getVisibleLayers();
if (visible.length === 0) {
usaLayer.setVisibleLayers([-1]);
} else {
usaLayer.setDynamicLayerInfos(visible);
}
}

function reorderLayers() {
var newOrder = getVisibleLayers();
usaLayer.setDynamicLayerInfos(newOrder);
}

function addLakes() {
var lakes = "Lakes";
registry.byId(lakes.toLowerCase()).set("disabled", true);
// update global object with layer info
infos[infos.total] = {
id: infos.total,
name: lakes,
position: infos.total,
visible: true
};
infos.total += 1;
buildLayerList();
// layer name in the workspace
var layerName = "ss6.gdb." + lakes;
// create a new dynamic layer info object for the lakes layer
var dynamicLayerInfo = new DynamicLayerInfo();
dynamicLayerInfo.id = dynamicLayerInfos.length;
dynamicLayerInfo.name = layerName;
// can also set things like min/max scale
// create a table data source to access the lakes layer
var dataSource = new TableDataSource();
dataSource.workspaceId = "MyDatabaseWorkspaceIDSSR2"; // not exposed via REST 😞
dataSource.dataSourceName = layerName;
// and now a layer source
var layerSource = new LayerDataSource();
layerSource.dataSource = dataSource;
dynamicLayerInfo.source = layerSource;
dynamicLayerInfos.push(dynamicLayerInfo);
// set new infos, but don't refresh
// map will be updated when the drawing options are set
var layers = getVisibleLayers();
usaLayer.setDynamicLayerInfos(layers, true);
var drawingOptions = new LayerDrawingOptions();
drawingOptions.renderer = new SimpleRenderer(
new SimpleFillSymbol("solid", null,
new Color([0, 150, 255, 1])
));
var options = [];
options[4] = drawingOptions;
usaLayer.setLayerDrawingOptions(options);
}

function getVisibleLayers() {
// get layer name nodes, build an array corresponding to new layer order
var layerOrder = [];
query("#layerList .dojoDndItem label").forEach(function(n, idx) {
for (var info in infos) {
var i = infos[info];
if (i.name === n.innerHTML) {
layerOrder[idx] = i.id;
// keep track of a layer's position in the layer list
i.position = idx;
break;
}
}
});
// find the layer IDs for visible layer
var ids = arrayUtils.filter(layerOrder, function(l) {
return infos.visible;
});
// get the dynamicLayerInfos for visible layers
var visible = arrayUtils.map(ids, function(id) {
return dynamicLayerInfos[id];
});
return visible;
}

function createToggle(name, visible) {
var div = domConstruct.create("div");
var layerVis = domConstruct.create("input", {
checked: visible,
id: name,
name: name,
type: "checkbox"
}, div);
on(layerVis, "click", toggleLayer);
var layerSpan = domConstruct.create("label", {
for: name,
innerHTML: name
}, div);
return div;
}
});
</script>
</head>

<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width:100%;height:100%;">
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
<div id="feedback" class="shadow">
<h3>Add and Re-order Layers</h3>
<div id="info">
<div id="note">
Note: This sample requires an ArcGIS Server version 10.1 or later map service.
</div>
<div id="hint">
Click and drag a map layer name below to re-order layers. The first layer in the list will be drawn on top.
</div>
<div><strong>Map Layers</strong></div>
<div id="layerList"></div>
<button id="lakes" data-dojo-type="dijit/form/Button">Add Lakes</button>
</div>
</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" id="rightPane">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;">
<div id="paneHeader" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<span>Select Basemap</span>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
<div id="basemapGallery"></div>
</div>
</div>
</div>
</div>
</body>

</html>

0 Kudos
11 Replies
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎12-06-2017 06:05 AM

Anjelina,

   Well you have several issues:

  1. You can not just copy an paste code without trying to understand that code and how it will affect your existing code. You already had a BasemapGallery object in your code, yet you pasted another one...
  2. You should not mix coding styles. The code you pasted was Legacy style, and you other code was AMD style.
  3. You can not have basemaps what are in different WKIDs and there cached scales need to be the same.

Bottom line is you Can Not use the Bing basemap with the other basemaps you are using.

0 Kudos
anjelinaponkerat
by
Occasional Contributor II
‎12-06-2017 07:38 AM

Please check this new sample. it can load all layers, but I need a sample that can load bing like base map tiled layer from right pane:

<!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=yes">
<title>Map</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/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0%;
font-family: Mitra;
}
#map {
border: solid 1px #B5BCC7;
padding: 0;
font-family: Mitra;
}
#paneHeader {
background-color: #ffffff;
color: white;
text-align: center;
height: 30px;
margin: 0;
overflow: hidden;
font-size: 16px;
padding: 8px 5px;
font-family: Mitra;
}
#rightPane {
width: 150px;
margin: 0;
padding: 0;
font-family: Mitra;
font-size: 13px;
}
#HomeButton {
position: absolute;
top: 95px;
left: 20px;
z-index: 50;
}
#bufferDialogBtn {
float: right;
}
.nonModal_underlay {
display: none;
}
h3 {
margin: 0 0 5px 0;
border-bottom: 1px solid #444;
}
.shadow {
box-shadow: 0 0 5px #888;
}
#feedback {
background: #fff;
color: #444;
position: absolute;
font-family: arial;
height: 300px;
left: 55px;
margin: 5px;
padding: 10px;
top: 20px;
width: 300px;
z-index: 40;
}
#note,
#hint {
font-size: 80%;
}
#note {
font-weight: 700;
padding: 0 0 10px 0;
}
#layerList {
width: 200px;
}
.dojoDndItemOver {
background: #ccc;
}
</style>
<script src="https://js.arcgis.com/3.22/"></script>
<script>
var map, infos =[], dndSource, dynamicLayerInfos;
require([
"dojo/dom", "esri/Color", "dojo/keys", "dojo/parser", "esri/config",
"esri/sniff", "esri/map", "esri/SnappingManager", "esri/dijit/Measurement",
"esri/layers/FeatureLayer", "esri/renderers/SimpleRenderer", "esri/tasks/GeometryService",
"esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
"esri/dijit/Scalebar",
"esri/dijit/BasemapGallery",
"esri/dijit/BasemapLayer",
"esri/dijit/Basemap",
"esri/dijit/OverviewMap",
"esri/tasks/locator",
"esri/dijit/Search",
"esri/symbols/PictureMarkerSymbol",
"esri/InfoTemplate",
"esri/dijit/HomeButton",
"esri/geometry/Extent",
"esri/SpatialReference",
"esri/dijit/VisibleScaleRangeSlider",
"esri/geometry/scaleUtils",
"esri/virtualearth/VETiledLayer",
"dijit/form/Button",
"esri/tasks/query",
"esri/geometry/Circle",
"esri/graphic",
"esri/symbols/SimpleMarkerSymbol",
"dojo/on",
"esri/toolbars/draw",
"esri/units",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/DynamicLayerInfo",
"esri/layers/LayerDataSource",
"esri/layers/LayerDrawingOptions",
"esri/layers/TableDataSource",
"dojo/dom",
"dojo/dom-construct",
"dojo/dom-style",
"dojo/query",
"dojo/_base/array",
"dojo/dnd/Source",
"dijit/registry",
"dijit/form/Button",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/TitlePane",
"dijit/Dialog",
"dojo/domReady!"
], function(
dom, Color, keys, parser, esriConfig,
has, Map, SnappingManager, Measurement,
FeatureLayer, SimpleRenderer, GeometryService,
SimpleLineSymbol, SimpleFillSymbol,
Scalebar, BasemapGallery, BasemapLayer, Basemap, OverviewMap, Locator, Search, PictureMarkerSymbol, InfoTemplate, HomeButton, Extent, SpatialReference, VisibleScaleRangeSlider, scaleUtils, VETiledLayer, Button, Query, Circle, Graphic,
SimpleMarkerSymbol, on, Draw, units,
ArcGISDynamicMapServiceLayer,
DynamicLayerInfo, LayerDataSource,
LayerDrawingOptions, TableDataSource, dom, domConstruct, domStyle, query, arrayUtils, Source, registry
) {
parser.parse();
esriConfig.defaults.io.proxyUrl = "/proxy/";
esriConfig.defaults.io.alwaysUseProxy = false;
esriConfig.defaults.geometryService = new GeometryService("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
map = new Map("map");
var basemaps = [];
var waterTemplateLayer = new BasemapLayer({
url: "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/WaterTemplate/LocalGovernmentInfrastruct..."
});
var waterBasemap = new Basemap({
layers: [waterTemplateLayer],
title: "Water Template",
thumbnailUrl: "images/waterThumb.png"
});
basemaps.push(waterBasemap);
var publicSafetyLayer = new BasemapLayer({
url: "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/PublicSafety/PublicSafetyBasemap/MapServ..."
});
var publicSafetyBasemap = new Basemap({
layers: [publicSafetyLayer],
title: "Public Safety",
thumbnailUrl: "images/safetyThumb.png"
});
basemaps.push(publicSafetyBasemap);

var veTileLayer;

veTileLayer = new esri.virtualearth.VETiledLayer({

bingMapsKey: prompt("please enter bing key"),

mapStyle: esri.virtualearth.VETiledLayer.MAP_STYLE_AERIAL
});


map.addLayer(veTileLayer);


var basemapGallery = new BasemapGallery({
showArcGISBasemaps: false,
basemaps: basemaps,
map: map
}, "basemapGallery");
basemapGallery.startup();
basemapGallery.on("error", function(error) {
console.log(error);
});
var scalebar = new Scalebar({
map: map,
// "dual" displays both miles and kilometers
// "english" is the default, which displays miles
// use "metric" for kilometers
scalebarUnit: "dual"
});
map.on("load", function(){
dndSource = new Source("layerList");
dndSource.on("DndDrop", reorderLayers);
usaLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer", {
"id": "usa"
});
// only create the layer list the first time update-end fires
on.once(usaLayer, "update-end", buildLayerList);
map.addLayer(usaLayer);
usaLayer.on("load", function(e) {
dynamicLayerInfos = e.target.createDynamicLayerInfosFromLayerInfos();
arrayUtils.forEach(dynamicLayerInfos, function(info) {
var i = {
id: info.id,
name: info.name,
position: info.id
};
if (arrayUtils.indexOf(usaLayer.visibleLayers, info.id) > -1) {
i.visible = true;
} else {
i.visible = false;
}
infos[info.id] = i;
});
infos.total = dynamicLayerInfos.length;
e.target.setDynamicLayerInfos(dynamicLayerInfos, true);
});
});
// add the lakes layer to the existing map service
registry.byId("lakes").on("click", addLakes);
function buildLayerList() {
dndSource.clearItems();
domConstruct.empty(dom.byId("layerList"));
var layerNames = [];
for (var info in infos) {
if (!infos[info].hasOwnProperty("id")) {
continue;
}
// only want the layer's name, don't need the db name and owner name
var nameParts = infos[info].name.split(".");
var layerName = nameParts[nameParts.length - 1];
var layerDiv = createToggle(layerName, infos[info].visible);
layerNames[infos[info].position] = layerDiv;
}
dndSource.insertNodes(false, layerNames);
}
function toggleLayer(e) {
for (var info in infos) {
var i = infos[info];
if (i.name === e.target.name) {
i.visible = !i.visible;
}
}
var visible = getVisibleLayers();
if (visible.length === 0) {
usaLayer.setVisibleLayers([-1]);
} else {
usaLayer.setDynamicLayerInfos(visible);
}
}
function reorderLayers() {
var newOrder = getVisibleLayers();
usaLayer.setDynamicLayerInfos(newOrder);
}
function addLakes() {
var lakes = "Lakes";
registry.byId(lakes.toLowerCase()).set("disabled", true);
// update global object with layer info
infos[infos.total] = {
id: infos.total,
name: lakes,
position: infos.total,
visible: true
};
infos.total += 1;
buildLayerList();
// layer name in the workspace
var layerName = "ss6.gdb." + lakes;
// create a new dynamic layer info object for the lakes layer
var dynamicLayerInfo = new DynamicLayerInfo();
dynamicLayerInfo.id = dynamicLayerInfos.length;
dynamicLayerInfo.name = layerName;
// can also set things like min/max scale
// create a table data source to access the lakes layer
var dataSource = new TableDataSource();
dataSource.workspaceId = "MyDatabaseWorkspaceIDSSR2"; // not exposed via REST 😞
dataSource.dataSourceName = layerName;
// and now a layer source
var layerSource = new LayerDataSource();
layerSource.dataSource = dataSource;
dynamicLayerInfo.source = layerSource;
dynamicLayerInfos.push(dynamicLayerInfo);
// set new infos, but don't refresh
// map will be updated when the drawing options are set
var layers = getVisibleLayers();
usaLayer.setDynamicLayerInfos(layers, true);
var drawingOptions = new LayerDrawingOptions();
drawingOptions.renderer = new SimpleRenderer(
new SimpleFillSymbol("solid", null,
new Color([0, 150, 255, 1])
));
var options = [];
options[4] = drawingOptions;
usaLayer.setLayerDrawingOptions(options);
}
function getVisibleLayers() {
// get layer name nodes, build an array corresponding to new layer order
var layerOrder = [];
query("#layerList .dojoDndItem label").forEach(function(n, idx) {
for (var info in infos) {
var i = infos[info];
if (i.name === n.innerHTML) {
layerOrder[idx] = i.id;
// keep track of a layer's position in the layer list
i.position = idx;
break;
}
}
});
// find the layer IDs for visible layer
var ids = arrayUtils.filter(layerOrder, function(l) {
return infos.visible;
});
// get the dynamicLayerInfos for visible layers
var visible = arrayUtils.map(ids, function(id) {
return dynamicLayerInfos[id];
});
return visible;
}
function createToggle(name, visible) {
var div = domConstruct.create("div");
var layerVis = domConstruct.create("input", {
checked: visible,
id: name,
name: name,
type: "checkbox"
}, div);
on(layerVis, "click", toggleLayer);
var layerSpan = domConstruct.create("label", {
for: name,
innerHTML: name
}, div);
return div;
}
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width:100%;height:100%;">
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
<div id="feedback" class="shadow">
<h3>Add and Re-order Layers</h3>
<div id="info">
<div id="note">
Note: This sample requires an ArcGIS Server version 10.1 or later map service.
</div>
<div id="hint">
Click and drag a map layer name below to re-order layers. The first layer in the list will be drawn on top.
</div>
<div><strong>Map Layers</strong></div>
<div id="layerList"></div>
<button id="lakes" data-dojo-type="dijit/form/Button">Add Lakes</button>
</div>
</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" id="rightPane">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;">
<div id="paneHeader" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<span>Select Basemap</span>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
<div id="basemapGallery"></div>
</div>
</div>
</div>
</div>
</body>
</html>

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎12-06-2017 07:43 AM

Anjelina,

  As I already mentioned you can not mix basemaps that do not have the same spatial reference or same scale levels. So again you CAN NOT use the Bing basmap with the other basemaps in your sample.

0 Kudos
anjelinaponkerat
by
Occasional Contributor II
‎12-06-2017 07:52 AM

The basemap in above sample is not important, i use compatible basemap. please help me about adding a new Bing basemap in right pane

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎12-06-2017 08:02 AM

So just remove the other basemaps from your sample code then.

0 Kudos
anjelinaponkerat
by
Occasional Contributor II
‎12-06-2017 08:12 AM

I need both of them, please help...

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎12-06-2017 08:35 AM

Anjelina,

  I am not sure how many ways I can say the same thing... You can not have a basemap with 

Spatial Reference: 4326

and another one with 

Spatial Reference: 102100

which is what Bing basemap is.

Why do you need the 

WaterTemplate/LocalGovernmentInfrastructureBasemap

Which is for Fort Pierce FL

and the 

PublicSafety/PublicSafetyBasemap

which is for Louisville KY

in the same app?...

0 Kudos
anjelinaponkerat
by
Occasional Contributor II
‎12-06-2017 08:40 AM

No no

Those are just a sample for me. I,m using my own services. my services have 102100 wkid . my problem is about how I can adding bing layer as base map like other base maps in right pane of above sample code.

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎12-06-2017 08:45 AM

OK,

      var basemapHybrid = new Basemap({
        layers: [new BasemapLayer({
          type: "BingMapsHybrid"
        })],
        id: "bmHybrid",
        title: "Aerial with labels",
        thumbnailUrl: "http://www.arcgis.com/sharing/rest/content/items/cebcf53409a04f109d309c2befa750e1/info/thumbnail/tem..."
      });
      basemaps.push(basemapHybrid);

      var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: false,
        basemaps: basemaps,
        bingMapsKey: "Your Bing Maps Key here",
        map: map
      }, "basemapGallery");‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

If you don't have a Bing api key yet then:

Getting a Bing Maps Key