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/
Solved! Go to Solution.
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>
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>
That works great, thanks robert!