Hi,
I'm trying to make a layer list with checkboxes to turn on/off layers (TOC).
My layer list need to support KML layer.
I make a very simple example to add and remove kml layer using the online example
https://developers.arcgis.com/javascript/jssamples/layers_kml.html
However I realise only the initial adding and removing of layer works.
The 2nd time I add the kml layer, it will not be rendered.
To make things easy, I created a jsfiddle @ https://jsfiddle.net/L5pyvezt/1/
In this fiddle, there are 2 buttons on top.
When you click on add, realise that an orange box will be rendered
When you click on remove, the orange box will be removed
When you click on add again, it is expected that the orange box will be re-rendered but alas, it did not.
(Warning: do not add, remove, add, remove too many time, for some unknown reason, although the codes are so minimal, it will crash your browser)
Does anyone have any advice to this strange behavior?
Some extra information:
1) The same code works for feature layer
2) Calling kmllayer.refresh() works
Solved! Go to Solution.
Bryan,
No you can not reuse a KMLLayer once it has been removed from the map. For some reason the layer becomes inoperable once removed and needs to recreated. That was the reason I had it that way in my code.
You can use KMLLayer | API Reference | ArcGIS API for JavaScript | suspend if you want to stop the layer from drawing on the map if setting the visibility to false is not good enough. Otherwise you will need to re-create the layer each time.
Bryan,
Here is your code re-worked and working:
<!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"> <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; var kml; require([ "esri/map", "esri/layers/KMLLayer", "dojo/parser", "dojo/on", "dijit/layout/ContentPane", "dojo/domReady!" ], function ( Map, KMLLayer, parser, on ) { map = new Map("map", { basemap: "topo" }); parser.parse(); on(dojo.byId("addBtn"), "click", kmladd); on(dojo.byId("removeBtn"), "click", kmlremove); var kmlUrl = "https://dl.dropboxusercontent.com/u/2654618/kml/Wyoming.kml"; function kmladd() { kml = new KMLLayer(kmlUrl); map.addLayer(kml); console.log('added'); } function kmlremove() { map.removeLayer(kml); kml = null; console.log('removed'); } }); </script> <body class="tundra"> <button id="addBtn">add</button> <button id="removeBtn">remove</button> <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"> </div> </body> </head> </html>
Hello Robert, super thanks for the rework solution!
Hmm while it is working, however I'm working on a component that will create and store the layer instance instead of creating each time the layer is shown. This mean new KMLLayer(...) will only be executed once during startup.
I tried modifying the rework solution such that new KMLLayer(...) is executed only once but alas the problem returns.
Is there anyway I can get a KMLLayer to be created only once and used in subsequent add / remove operations? FeatureLayer does work great though (no such problem).
To make things simple, I updated the fiddle, thanks!
Bryan,
No you can not reuse a KMLLayer once it has been removed from the map. For some reason the layer becomes inoperable once removed and needs to recreated. That was the reason I had it that way in my code.
You can use KMLLayer | API Reference | ArcGIS API for JavaScript | suspend if you want to stop the layer from drawing on the map if setting the visibility to false is not good enough. Otherwise you will need to re-create the layer each time.
Hmm ok, I guess I had to rework the component then, but thanks, that's good information to know kmllayer has this limitation
Another thing you might want to try is parsing the KML inside of your JavaScript code to create a feature layer.
This will get you from KML to GeoJSON: mapbox/togeojson · GitHub.
From there, you can use Terraformer to get from GeoJSON to ArcGIS format.