nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

WebTiledLayer in BasemapGallery

RaivoAlla

Hello!

My intention is to add custom basemaps (WebTiledLayer) to BasemapGallery, without ArcGISBasemaps, in the following way:

                        var bm1 = BasemapLayer({type: "WebTiledLayer",url:"http://tiles.maaamet.ee/tm/s/1.0.0/kaart/${level}/${col}/${row}.png"});
   var bm2 = BasemapLayer({type: "WebTiledLayer",url:"http://tiles.maaamet.ee/tm/s/1.0.0/hybriid/${level}/${col}/${row}.png"});
   var akaart = new Basemap({
    layers: [ bm1, bm2 ],
    id: "test1",
     title: "MAMT aluskaart 1 "
   });

   var hkaart = new Basemap({
    layers: [ bm2 ],
    id: "test2",
     title: "MAMT aluskaart 2"
   });
   
   basemaps = [akaart, hkaart];

          basemapDijit = new BasemapGallery({
     basemaps: basemaps,
     showArcGISBasemaps: false,
     //basemapsGroup: basemapGroup,
     map: _self.options.map
    },domConstruct.create("div"));

Somehow it is not possible and digging deeper into ArcGIS JSAPI I found that the the function _switchBasemapLayers outputs:
"esri.dijit.BasemapGallery: Unable to switch basemap because new basemap is a tiled service and cannot be loaded as a dynamic layer." (this.map.getNumLevels() returns 0).

Yet the API (https://developers.arcgis.com/en/javascript/jsapi/basemaplayer.html) says that it's possible to add WebTiledLayer as a BasemapLayer and hence I assume it's possible to add as a Basemap to BasemapGallery.

What's the problem here? I would appreciate any help.

Thank you,
Raivo Alla
Estonian Land Board

Find more posts tagged with

Accepted answers

All comments

KevinWells2

I found a way to get WebTileLayers to work in the BasemapGallery widget. It is not an elegant solution but it worked for me.

When creating the "Map" widget I assigned one of ESRI's standard basemaps as the basemap (i.e. basemap: "gray") even though in the BasemapGallery widget the showArcGISBasemaps is set to false. This crazy scenario allowed the WebTileLayers I had in the BasemapGallery to work.

var map = new Map('mapDiv', {

basemap: 'gray'

});

var basemapGallery = new BasemapGallery({

showArcGISBasemaps: false,

basemaps: basemaps, <<< The WebTileLayers added as basemaps.

map: map,

}, 'basemapGallery');

When the map loads I switch the basemap to the WebTileLayer I want to use and set the visibility of ESRI's basemap to false.

map.on('load', function() {

basemapGallery.select('Lite'); < Select the WebTileLayer I wanted all along.

map.getLayer('layer1').setVisibility(false); < Hide the esri basemap.

}

The map and web tile layers all used the Web Mercator projection. The ArcGIS JavaScript version was 3.16.

RaivoAlla

To elaborate the issue once more, the problem seems to be - as it is stated almost 3 years ago in http://forums.arcgis.com/threads/85123-WebTiledLayer-doesn-t-work-with-BasemapGallery-dijit?highlight=custom+basemaps - BasemapGallery does not fully support custom WebTiledLayers, even if it claims so (https://developers.arcgis.com/en/javascript/jsapi/basemaplayer.html : "Must specify either the url or type parameter except for WebTiledLayers where url and type is required. (Added at v3.7)").

However, I will get my basemaps in SocialMedia map when my referenced webmap has some ArcGIS basemap defined. But, as soon asI use my custom basemap (WMS service added with "use as a basemap" option), this functionality vanishes...

So, summing it up - it appears to be a bug (or a businness stragtegy?).

Thank you,
Raivo Alla
Estonian Lond Board

RaivoAlla

Thanks Abhy,

but I have no success here. It doesn't even trigger the onLoad function there:

connect.connect(_self.basemapDijit, "onLoad", function() {
  console.log("im in!");
  ...
}

But as soon as I set "showArcGISBasemaps: true" in BasemapGallery contruction, the onload function fires correctly.

😞

Raivo

AbhijatC

I have been (again) hitting the ArcGIS JS wall... and it seems to be unbreakable at some spots.
Now it seems that I cannot add BaseMapLayer(that "contains" WebTiledLayer) into the BasemapGallery AFTER I have created the mapo object via arcgisUtils.createMap.

I mean, yes I can get the response.map object and work with it, but I seem not to be able to define the LOD since
1. my ArcGIS Online webmap has no cached service (I use custom WMS as a basemap there)
2. I found no way to attach my basemapgallery onto that map object so it can use those BasemapLayers as a basemap.

The esri.Map interface shows setBasemap method that is only possible with Esri-accepted basemap layers.

I feel being locked into small chamber, but I sense out there is lots of space and freedom.

The one and most important question for me: is it possible to use WebTiledLayer in BasemapGallery or not when working with Esri
boilerplate templates?

Thank you,
Raivo Alla
Estonian Land Board

Hey Raivo,

I checked for the "Social Media Template"...Fortunately all worked fine there too. What I changed look at code below:

// create the basemap gallery when active
        createBMGallery: function() {
            var _self = this;
   var basemaps=[];
   var waterTemplateLayer = new esri.dijit.BasemapLayer({type:"WebTiledLayer",
        url:"http://tiles.maaamet.ee/tm/s/1.0.0/hybriid/1/1/1.png"
      });
      var waterBasemap = new esri.dijit.Basemap({
        layers      :[waterTemplateLayer],
        title       :"Water Template"
        
      });
       
      basemaps.push(waterBasemap);
            var basemapGroup = false;
            if (!_self.options.useArcGISOnlineBasemaps) {
                basemapGroup = {
                    title: _self.options.basemapGroupTitle,
                    owner: _self.options.basemapGroupOwner
                };
            }
            // basemap gallery
            _self.basemapDijit = new BasemapGallery({
                showArcGISBasemaps: _self.options.useArcGISOnlineBasemaps,
                basemaps: basemaps,
    //basemapsGroup: basemapGroup,
                map: _self.options.map
            }, domConstruct.create("div"));

In addition to above code, I also changed the options in the config (NOT commonConfig) file as:

"useArcGISOnlineBasemaps": false,

Check out the attachments.

Hope it helps,
Abhy

RaivoAlla

I have been (again) hitting the ArcGIS JS wall... and it seems to be unbreakable at some spots.
Now it seems that I cannot add BaseMapLayer(that "contains" WebTiledLayer) into the BasemapGallery AFTER I have created the mapo object via arcgisUtils.createMap.

I mean, yes I can get the response.map object and work with it, but I seem not to be able to define the LOD since
1. my ArcGIS Online webmap has no cached service (I use custom WMS as a basemap there)
2. I found no way to attach my basemapgallery onto that map object so it can use those BasemapLayers as a basemap.

The esri.Map interface shows setBasemap method that is only possible with Esri-accepted basemap layers.

I feel being locked into small chamber, but I sense out there is lots of space and freedom.

The one and most important question for me: is it possible to use WebTiledLayer in BasemapGallery or not when working with Esri
boilerplate templates?

Thank you,
Raivo Alla
Estonian Land Board

RaivoAlla

Thanks, Abhy!

Actually I had it declared in a "basemaps.push" style before. The thing is, that it is all perfectly working in my own javascript code, but not in the template: neither in the SocialMedia web application template, nor in the application boilerplate template.

Maybe it is a coordinate sytem issue (I have EPSG:3301 defined for the map, tile service is also in EPSG:3301). Maybe it has something to with the "map" object being not referred correctly?

In the boilerplate case, the main code resides in main.js, where, in the _createWebMap I get response.map object to work with. An I have defined my createbasemapgallery code inside the "if(this.map.loaded) {"section. But no luck.
Gallery appears, but when clicking the gallery node, I get to know, that this.map.getNumLevels() in BasemapGallery.js _switchBasemapLayers is 0 and hence can't add basemap layers on the map...

Huh,
Raivo

AbhijatC

Hello!

My intention is to add custom basemaps (WebTiledLayer) to BasemapGallery, without ArcGISBasemaps, in the following way:
                        var bm1 = BasemapLayer({type: "WebTiledLayer",url:"http://tiles.maaamet.ee/tm/s/1.0.0/kaart/${level}/${col}/${row}.png"});
   var bm2 = BasemapLayer({type: "WebTiledLayer",url:"http://tiles.maaamet.ee/tm/s/1.0.0/hybriid/${level}/${col}/${row}.png"});
   var akaart = new Basemap({
    layers: [ bm1, bm2 ],
    id: "test1",
     title: "MAMT aluskaart 1 "
   });

   var hkaart = new Basemap({
    layers: [ bm2 ],
    id: "test2",
     title: "MAMT aluskaart 2"
   });
   
   basemaps = [akaart, hkaart];

          basemapDijit = new BasemapGallery({
     basemaps: basemaps,
     showArcGISBasemaps: false,
     //basemapsGroup: basemapGroup,
     map: _self.options.map
    },domConstruct.create("div"));
Somehow it is not possible and digging deeper into ArcGIS JSAPI I found that the the function _switchBasemapLayers outputs:
"esri.dijit.BasemapGallery: Unable to switch basemap because new basemap is a tiled service and cannot be loaded as a dynamic layer." (this.map.getNumLevels() returns 0).

Yet the API (https://developers.arcgis.com/en/javascript/jsapi/basemaplayer.html) says that it's possible to add WebTiledLayer as a BasemapLayer and hence I assume it's possible to add as a Basemap to BasemapGallery.

What's the problem here? I would appreciate any help.

Thank you,
Raivo Alla
Estonian Land Board

Raivo,

I think you should use "basemaps.push(akaart);" & "basemaps.push(hkaart);" instead of "basemaps = [akaart, hkaart];".
I used the example and feature layer (mentioned by you as http://tiles.maaamet.ee/tm/s/1.0.0/hybriid/1/1/1.png and it worked perfectly.

Look at this edited code:

function createBasemapGallery() {
      //manually create basemaps to add to basemap gallery
      var basemaps = [];
      var waterTemplateLayer = new esri.dijit.BasemapLayer({type:"WebTiledLayer",
        url:"http://tiles.maaamet.ee/tm/s/1.0.0/hybriid/1/1/1.png"
      });
      var waterBasemap = new esri.dijit.Basemap({
        layers      :[waterTemplateLayer],
        title       :"Water Template"
        
      });
      basemaps.push(waterBasemap);

Abhy

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.