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

2399
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 Esteemed Contributor

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

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

BryanSng
New Contributor

That works great, thanks robert!

0 Kudos