Add and Remove KML Layer Repeatedly

3167
5
Jump to solution
12-26-2015 12:29 AM
BryanSng
New Contributor

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

Tags (4)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

View solution in original post

5 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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>

BryanSng
New Contributor

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

View solution in original post

BryanSng
New Contributor

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

0 Kudos
JeffJacobson
Regular Contributor

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.

0 Kudos