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

basemapGallery map switching issue

MatúšVandák

Hello,

during implementation of basemapGallery for basemaps switching I came to the issue when some basemaps are not loaded after switch on.

I have got 3 maps that have tileInfo and are cached and one that have no tileInfo and it is not cached. When the basemap with no cache is inserted as first into basemapGallery, the others cached maps will not show after switch. Server will not send any images, only OK response for .../MapServer?f=json request.

If I put into basemapGallery as first another basemap with tileInfo and cache, then I am able to switch between all basemaps. If I want to have shown as first the basemap with no cache, the workaround is also to put it as last and after map load event select last basemap in basemapGallery. Then also everything is working fine.

What is the root cause of this issue please. I've got feeling that it could have something with extent or levels of detail or so, because also zoom buttons are not disabled in that case. How to solve it with no workaround? Where is the fail? Am I doing something wrong or should I add some option in map or layer creation?

Many thanks for your answers and help.

It could be reproduced even with slightly modified basemapGallery sample code:

Basemap Gallery - user-defined items | ArcGIS API for JavaScript

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples
    on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Display Multiple ArcGIS Online Services</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
  <style>
    html, body {
      height: 97%;
      width: 98%;
      margin: 1%;
    }

    #map {
      border: solid 1px #B5BCC7;
      padding: 0;
    }

    #paneHeader {
      background: url(images/header.png) repeat-x;
      color: white;
      border-bottom: solid 1px #B5BCC7;
      text-align: center;
      height: 30px;
      margin: 0;
      overflow: hidden;
      font-size: 16px;
      padding: 8px 5px;
    }

    #rightPane {
      width: 150px;
      margin: 0;
      padding: 0;
    }
  </style>

  <script>var dojoConfig = {parseOnLoad:true};</script>
  <script src="http://js.arcgis.com/3.11/"></script>

  <script>
    dojo.require("esri.map");
    dojo.require("dijit.form.Button");
    dojo.require("dijit.layout.BorderContainer");
    dojo.require("dijit.layout.ContentPane");
    dojo.require("esri.dijit.BasemapGallery");
    dojo.require("esri.arcgis.utils");

    var map;

    function init() {
      map = new esri.Map("map");
      createBasemapGallery();
    }

    function createBasemapGallery() {
      //manually create basemaps to add to basemap gallery
      var basemaps = [];

      var waterTemplateLayer = new esri.dijit.BasemapLayer({
        url:"http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/WaterTemplate/LocalGovernmentInfrastructureBasemap/MapServer"
      });
      var waterBasemap = new esri.dijit.Basemap({
        layers      :[waterTemplateLayer],
        title       :"Water Template",
        thumbnailUrl:"images/waterThumb.png"
      });
      basemaps.push(waterBasemap);
      var publicSafetyLayer = new esri.dijit.BasemapLayer({
        url:"http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/PublicSafety/PublicSafetyBasemap/MapServer"
      });
      var publicSafetyBasemap = new esri.dijit.Basemap({
        layers      :[publicSafetyLayer],
        title       :"Public Safety",
        thumbnailUrl:"images/safetyThumb.png"
      });
      basemaps.push(publicSafetyBasemap);
      
      // no cache and tileInfo map. If I put this as first, the other ones won't work
      var dLayer = new esri.dijit.BasemapLayer({
          url:"http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer"
        });
        var dBasemap = new esri.dijit.Basemap({
          layers      :[dLayer],
          title       :"Demographic",
          thumbnailUrl:"images/safetyThumb.png"
        });
        basemaps.push(dBasemap);

      var basemapGallery = new esri.dijit.BasemapGallery({
        showArcGISBasemaps:false,
        basemaps          :basemaps,
        map               :map
      }, "basemapGallery");
      basemapGallery.startup();

      dojo.connect(basemapGallery, "onError", function (error) {
        console.log(error);
      });
    }

    dojo.ready(init);
  </script>

</head>
<body class="claro">
<!--[if IE 7]>
<style>
  html, body {
    margin: 0;
  }
</style>
<![endif]-->
<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>

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

Find more posts tagged with

Accepted answers

rscheitlin

Matúš,

When the basemap with no cache is inserted as first into basemapGallery

The issue you are seeing is that an ArcGISDynamicMapServiceLayer does not have tile info and thus does not have LODs. The first layer that is added to the map sets the maps LODs and because a ArcGISDynamicMapServiceLayer does not have any the map never gets LODs set and thus the other basemaps that are ArcGISTiledMapServiceLayer they will not work.

To resolve this issue you need to load a ArcGISTiledMapServiceLayer as your first basemap.

All comments

MatúšVandák

Now I understand Robert. It worked for me, because I setup the base layer directly using addLayer(). But the scale was not interpreted correctly. If I want to change the scales, I need to request levels change on Map server.

Thank you for explanation.

MatúšVandák

I have all tiled maps with same levels.

But I set to map during instantiating different LODs, that I specified and it works with TiledServiceMapLayer and I am not sure if it displayes images in correct scale. However, the map.getScale() shows me my predefined scale ranges.

rscheitlin

Matúš,

All your ArcGISTiledMapServiceLayer need to be using the same LODs (this is to say that the services need to be cached at the same scales). You can have ArcGISTiledMapServiceLayer that have more or less LODs as long as they are cached at the same scales. If you attempt to add a ArcGISTiledMapServiceLayer that uses different scales then it will not display when the maps LODs are set for another ArcGISTiledMapServiceLayer with different scales.

I hope this answers your question. If not let me know.

MatúšVandák

Thank you both guys. This is what I realized during tests with different maps.

So if I understood it correctly, the solution is to have my dynamic map in Tiled version also or to setup as default another Tiled map.

And additional question please: if I have defined specific LODs for my map and in tiled maps are LODs in slightly different scales, the images returned from server are chosen for my specific scale from ranges for level defined on server? Or to paraphrase, may I define my own scale levels to be displayed on my map if on map server are for maps defined different scale levels? Will it be displayed in my map correctly?

And one more time, many thanks for really fast and reliable answer.

kenbuja

The non-tiled map is setting the spatial reference for the map and essentially negating the need for Levels of Detail (LOD) when it is loaded first. The tiled maps will need the correct spatial reference and LODs set in order for them to show, since a non-tiled map can be shown on maps with a different spatial reference while a tiled map cannot.

You'll have to set the spatial reference and the lods of the map when you initialize it if you want the non-tiled map to load first.

rscheitlin

Matúš,

When the basemap with no cache is inserted as first into basemapGallery

To resolve this issue you need to load a ArcGISTiledMapServiceLayer as your first basemap.

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.