topic Re: bing base in ArcGIS JavaScript Maps SDK Questions

bing base

anjelinaponkerat — Wed, 06 Dec 2017 12:40:55 GMT

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/LocalGovernmentInfrastructureBasemap/MapServer"
});
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/MapServer"
});
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 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);
}

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

Re: bing base

RobertScheitlin__GISP — Wed, 06 Dec 2017 14:05:39 GMT

Anjelina,

Well you have several issues:

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...
You should not mix coding styles. The code you pasted was Legacy style, and you other code was AMD style.
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.

Re: bing base

anjelinaponkerat — Wed, 06 Dec 2017 15:38:15 GMT

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/LocalGovernmentInfrastructureBasemap/MapServer"
});
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/MapServer"
});
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>

Re: bing base

RobertScheitlin__GISP — Wed, 06 Dec 2017 15:43:11 GMT

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.

Re: bing base

anjelinaponkerat — Wed, 06 Dec 2017 15:52:58 GMT

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

Re: bing base

RobertScheitlin__GISP — Wed, 06 Dec 2017 16:02:02 GMT

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

Re: bing base

anjelinaponkerat — Wed, 06 Dec 2017 16:12:24 GMT

I need both of them, please help...

Re: bing base

RobertScheitlin__GISP — Wed, 06 Dec 2017 16:35:33 GMT

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

Re: bing base

anjelinaponkerat — Wed, 06 Dec 2017 16:40:46 GMT

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.

Re: bing base

RobertScheitlin__GISP — Sun, 12 Dec 2021 03:53:42 GMT

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/tempbing_hybrid_manchester2.png"
      });
      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

Re: bing base

anjelinaponkerat — Wed, 06 Dec 2017 16:55:19 GMT

I should try on wab

Re: bing base

RobertScheitlin__GISP — Wed, 06 Dec 2017 17:06:31 GMT

Anjelina,

You need to share your code then (using your basemaps and any other change you made in the code).