topic Add and Remove KML Layer Repeatedly in ArcGIS JavaScript Maps SDK Questions

Add and Remove KML Layer Repeatedly

BryanSng — Sat, 26 Dec 2015 08:29:00 GMT

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

Re: Add and Remove KML Layer Repeatedly

RobertScheitlin__GISP — Sat, 11 Dec 2021 22:43:22 GMT

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>

Re: Add and Remove KML Layer Repeatedly

BryanSng — Mon, 28 Dec 2015 10:09:18 GMT

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!

https://jsfiddle.net/L5pyvezt/2

Re: Add and Remove KML Layer Repeatedly

RobertScheitlin__GISP — Mon, 28 Dec 2015 13:00:32 GMT

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.

Re: Add and Remove KML Layer Repeatedly

BryanSng — Mon, 28 Dec 2015 14:10:19 GMT

Hmm ok, I guess I had to rework the component then, but thanks, that's good information to know kmllayer has this limitation

Re: Add and Remove KML Layer Repeatedly

JeffJacobson — Mon, 28 Dec 2015 18:46:03 GMT

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.