Unable to show layers in ArcGIS map after removing tiled map service layer

2689
2
Jump to solution
12-26-2015 12:36 AM
BryanSng
New Contributor

Hi,

I wish to create a function to change basemap.

To test the concept, I created a map and added a ArcGISTiledMapServiceLayer

var tiled = new ArcGISTiledMapServiceLayer('http://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer'); 

Next, I will remove the layer and add a ArcGISImageServiceLayer to stimulate a change basemap action

var image = new ArcGISImageServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Toronto/ImageServer", { imageServiceParameters: params, opacity: 0.75 }); 

What I realised is after these [adding tiled, removing tiled, adding image] actions, no layers will be rendered

I tested other scenarios and these are the results:

1) If I do not remove the tiled layer, both layers get rendered 
2) If I add only image layer, image layer get rendered 
3) If I add only tiled layer, tiled layer get rendered 

Do you guys have any advice as to why I cannot perform a remove layer action?

To make this question understandable, I created a sample fiddle that can illustrate my case. Simply remove the removeLayer comment in the fiddle and run it. You will notice as mentioned, nothing will be rendered.

https://jsfiddle.net/82qjh0wg/

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Bryan,

The first layer added sets the Maps LODs and you were not giving it enough time to finish. Here is your code revised with a 2 second time out before removing and adding the other layer:

<!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=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="mobile-web-app-capable" content="yes">
  <title>ArcGIS dynamic and tile layers using Popup and InfoTemplates</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.15/dijit/themes/claro/claro.css">
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #map {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="https://js.arcgis.com/3.15/"></script>
  <script>
    var map;
      require([
        "esri/map", "esri/layers/ArcGISImageServiceLayer",
        "esri/layers/ArcGISTiledMapServiceLayer",
        "esri/layers/ImageServiceParameters", "dojo/parser", "dojo/domReady!"
      ], function(
        Map, ArcGISImageServiceLayer, ArcGISTiledMapServiceLayer,
        ImageServiceParameters, parser
      ) {
        parser.parse();

        map = new Map("map", {
          center: [-79.40, 43.64],
          zoom: 12
        });

        var bb = new ArcGISTiledMapServiceLayer('https://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer');

        map.addLayer(bb);

        // Remove the following comment and map will not load!
        setTimeout(function(){
          map.removeLayer(bb);

          var params = new ImageServiceParameters();
          params.noData = 0;
          var imageServiceLayer = new ArcGISImageServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Toronto/ImageServer", {
            imageServiceParameters: params,
            opacity: 0.75
          });
          map.addLayer(imageServiceLayer);
        }, 2000);

      });
  </script>

  <body class="claro">
    <div id="map"> </div>
  </body>
</head>

</html>

View solution in original post

2 Replies
RobertScheitlin__GISP
MVP Emeritus

Bryan,

The first layer added sets the Maps LODs and you were not giving it enough time to finish. Here is your code revised with a 2 second time out before removing and adding the other layer:

<!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=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="mobile-web-app-capable" content="yes">
  <title>ArcGIS dynamic and tile layers using Popup and InfoTemplates</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.15/dijit/themes/claro/claro.css">
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #map {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="https://js.arcgis.com/3.15/"></script>
  <script>
    var map;
      require([
        "esri/map", "esri/layers/ArcGISImageServiceLayer",
        "esri/layers/ArcGISTiledMapServiceLayer",
        "esri/layers/ImageServiceParameters", "dojo/parser", "dojo/domReady!"
      ], function(
        Map, ArcGISImageServiceLayer, ArcGISTiledMapServiceLayer,
        ImageServiceParameters, parser
      ) {
        parser.parse();

        map = new Map("map", {
          center: [-79.40, 43.64],
          zoom: 12
        });

        var bb = new ArcGISTiledMapServiceLayer('https://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer');

        map.addLayer(bb);

        // Remove the following comment and map will not load!
        setTimeout(function(){
          map.removeLayer(bb);

          var params = new ImageServiceParameters();
          params.noData = 0;
          var imageServiceLayer = new ArcGISImageServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Toronto/ImageServer", {
            imageServiceParameters: params,
            opacity: 0.75
          });
          map.addLayer(imageServiceLayer);
        }, 2000);

      });
  </script>

  <body class="claro">
    <div id="map"> </div>
  </body>
</head>

</html>
BryanSng
New Contributor

That works great, thanks robert!

0 Kudos