HELP! JAVASCRIPT API: Switch Basemap

5850
4
11-20-2013 05:49 PM
ErvyGalvez
New Contributor II
How to switch basemap layer to our locally generated basemap layer with different tiling scheme/scale from Esri Basemap Gallery because either our basemap is not displaying or Esri default basemaps are not displaying?

Scenario:
I have customized the Basemap Gallery to create a different list/options. One from our locally generated basemap layer and two from Esri Base map default gallery. Our locally generated map was cached with different tiling scheme/scale (eg: 1:2500, 1:5000) from the default Esri basemaps (eg: 1:1128.497176, 1:2256.994353).

I have checked the ArcGIS Online and other open source api, they are switching even they have different tiling scheme/scale.

Aside from the tiling scheme, our basemap have the same attributes/details with the Esri Basemap Gallery.

Spatial Reference: 102100 (3857)
Single Fused Map Cache: true
Height: 256
Width: 256
DPI: 96
Format: JPEG
Compression Quality: 75
Origin:
X: -20037508.342787
Y: 20037508.342787
Spatial Reference: 102100 (3857)

I already tried using WMSLayer,WMSLayerInfo, TilingInfo but no luck on switching them. 😞

How do i do that, the switching from our basemap to the Esri default basemaps with JavaScript API? Sample code for creating or coding will be highly appreciated.

THANK YOU IN ADVANCE!
0 Kudos
4 Replies
SteveCole
Frequent Contributor
It's possible you just haven't used the correct layer type (BasemapLayer). My organization doesn't have it's own basemap developed yet so we're just using the ESRI basemaps. Here, however, is some example code that I used in a mobile version of one of my apps where I only wanted the user to choose between the ESRI streets or Satellite basemaps:

function createBasemapGallery(){
 var basemaps = [];
 var streetMap = new esri.dijit.Basemap({
   layers: [new esri.dijit.BasemapLayer({
  url: "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
   })],
   id: "StreetMap",
   title: "Street Map View"
 });

 basemaps.push(streetMap);
 var satelliteMap = new esri.dijit.Basemap({
   layers: [new esri.dijit.BasemapLayer({
  url: "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
   })],
   id: "Satellite",
   title: "Satellite View"
 });

 basemaps.push(satelliteMap);       
 basemapGallery = new esri.dijit.BasemapGallery({
   showArcGISBasemaps: false,
   basemaps: basemaps,
   map: map
 });
}


The basemap is switched using a button toggle whose onClick event code is simply:
basemapGallery.select('StreetMap');


Maybe you can add your own basemap using your basemap's URL in place of one in my code example?

Good luck!
Steve
0 Kudos
JeffPace
MVP Alum
if you are using esri's tiled services the are all in the same coordinate system scale/tile schema

If yours is different , you can not overlay them.  I.e. you can not reproject tiled layers on the fly

If you use your own tile schema as a basemap layer ALL layers in the applicatin must either be in that schema, or be dynamic.
0 Kudos
ErvyGalvez
New Contributor II
It's possible you just haven't used the correct layer type (BasemapLayer). My organization doesn't have it's own basemap developed yet so we're just using the ESRI basemaps. Here, however, is some example code that I used in a mobile version of one of my apps where I only wanted the user to choose between the ESRI streets or Satellite basemaps:

function createBasemapGallery(){
 var basemaps = [];
 var streetMap = new esri.dijit.Basemap({
   layers: [new esri.dijit.BasemapLayer({
  url: "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
   })],
   id: "StreetMap",
   title: "Street Map View"
 });

 basemaps.push(streetMap);
 var satelliteMap = new esri.dijit.Basemap({
   layers: [new esri.dijit.BasemapLayer({
  url: "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
   })],
   id: "Satellite",
   title: "Satellite View"
 });

 basemaps.push(satelliteMap);       
 basemapGallery = new esri.dijit.BasemapGallery({
   showArcGISBasemaps: false,
   basemaps: basemaps,
   map: map
 });
}


The basemap is switched using a button toggle whose onClick event code is simply:
basemapGallery.select('StreetMap');


Maybe you can add your own basemap using your basemap's URL in place of one in my code example?

Good luck!
Steve


Hi Steve!
I already have that code. My problem now is how I will used our locally created basemap to switch between ours and Esri default basemaps. Our locally created basemap have different tiling scheme from the Esri default basemaps.
example:
Our:
Levels of Detail: (# Levels: 13)
Level ID: 0 [Start Tile, End Tile]
Resolution: 3968.75793751588
Scale: 15000000
Level ID: 1 [Start Tile, End Tile]
Resolution: 2645.83862501058
Scale: 10000000
Level ID: 2 [Start Tile, End Tile]
Resolution: 1322.91931250529
Scale: 5000000
Level ID: 3 [Start Tile, End Tile]
Resolution: 661.459656252646
Scale: 2500000
Level ID: 4 [Start Tile, End Tile]
Resolution: 264.583862501058
Scale: 1000000
Level ID: 5 [Start Tile, End Tile]
Resolution: 132.291931250529
Scale: 500000
Level ID: 6 [Start Tile, End Tile]
Resolution: 66.1459656252646
Scale: 250000
Level ID: 7 [Start Tile, End Tile]
Resolution: 26.4583862501058
Scale: 100000
Level ID: 8 [Start Tile, End Tile]
Resolution: 13.2291931250529
Scale: 50000
Level ID: 9 [Start Tile, End Tile]
Resolution: 6.61459656252646
Scale: 25000
Level ID: 10 [Start Tile, End Tile]
Resolution: 2.64583862501058
Scale: 10000
Level ID: 11 [Start Tile, End Tile]
Resolution: 1.32291931250529
Scale: 5000
Level ID: 12 [Start Tile, End Tile]
Resolution: 0.661459656252646
Scale: 2500

Esri Default Basemaps
Levels of Detail: (# Levels: 20)
Level ID: 0 [Start Tile, End Tile]
Resolution: 156543.033928
Scale: 591657527.591555
Level ID: 1 [Start Tile, End Tile]
Resolution: 78271.5169639999
Scale: 295828763.795777
Level ID: 2 [Start Tile, End Tile]
Resolution: 39135.7584820001
Scale: 147914381.897889
Level ID: 3 [Start Tile, End Tile]
Resolution: 19567.8792409999
Scale: 73957190.948944
Level ID: 4 [Start Tile, End Tile]
Resolution: 9783.93962049996
Scale: 36978595.474472
Level ID: 5 [Start Tile, End Tile]
Resolution: 4891.96981024998
Scale: 18489297.737236
Level ID: 6 [Start Tile, End Tile]
Resolution: 2445.98490512499
Scale: 9244648.868618
Level ID: 7 [Start Tile, End Tile]
Resolution: 1222.99245256249
Scale: 4622324.434309
Level ID: 8 [Start Tile, End Tile]
Resolution: 611.49622628138
Scale: 2311162.217155
Level ID: 9 [Start Tile, End Tile]
Resolution: 305.748113140558
Scale: 1155581.108577
Level ID: 10 [Start Tile, End Tile]
Resolution: 152.874056570411
Scale: 577790.554289
Level ID: 11 [Start Tile, End Tile]
Resolution: 76.4370282850732
Scale: 288895.277144
Level ID: 12 [Start Tile, End Tile]
Resolution: 38.2185141425366
Scale: 144447.638572
Level ID: 13 [Start Tile, End Tile]
Resolution: 19.1092570712683
Scale: 72223.819286
Level ID: 14 [Start Tile, End Tile]
Resolution: 9.55462853563415
Scale: 36111.909643
Level ID: 15 [Start Tile, End Tile]
Resolution: 4.77731426794937
Scale: 18055.954822
Level ID: 16 [Start Tile, End Tile]
Resolution: 2.38865713397468
Scale: 9027.977411
Level ID: 17 [Start Tile, End Tile]
Resolution: 1.19432856685505
Scale: 4513.988705
Level ID: 18 [Start Tile, End Tile]
Resolution: 0.597164283559817
Scale: 2256.994353
Level ID: 19 [Start Tile, End Tile]
Resolution: 0.298582141647617
Scale: 1128.497176

If our basemap is used separately from the Esri basemaps, it shows up... but when used together and switch from/to Esri default basemap, our locally created map is not displaying...

Thanks anyway.

-Ervy
0 Kudos
JeffPace
MVP Alum
You can't use two basemaps with different tiling schemes in the same application.  Once you set a tiling schema for the application that is the only one you can use.

If you want to use ESRIs basemaps, you are going to have to change your service to match.
0 Kudos