KML loading limits in JS API

NathanDorman · ‎07-20-2015

The following block of code seems to work fine, but when I code to add a second kml layer, only the second layer loads

This is based off of the kml sample in the js api documentation https://developers.arcgis.com/javascript/jssamples/layers_kml.html

Anyone know why I can only load a single layer? Is there some limits beyond what's stated in the documentation on loading KML layers?

require([

"esri/map", "esri/layers/KMLLayer",

"dojo/parser", "dojo/dom-style",

"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"

], function(

Map, KMLLayer,

parser, domStyle

) {

var map = new Map("map", {

center: [-108.663, 42.68],

zoom: 8,

basemap: "topo",

showAttribution: false,

logo: false

});

parser.parse();

var kmlUrl = "https://dl.dropboxusercontent.com/u/2654618/kml/Wyoming.kml";

var kml = new KMLLayer(kmlUrl);

map.addLayer(kml);

kml.on("load", function() {

domStyle.set("loading", "display", "none");

});

/*

var kml2 = new KMLLayer("https://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml");

map.addLayer(kml2);

kml2.on("load", function() {

domStyle.set("loading", "display", "none");

});

*/

});

ChrisSmith7 · ‎07-21-2015

This is working ok for me in the sandbox of the sample you mentioned:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title></title>


<link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
<style>
  html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
  #map { height: 100%; margin: 0; padding: 0; }
  #meta {
    position: absolute;
    left: 20px;
    bottom: 20px;
    width: 300px;
    height: 100px;
    z-index: 40;
    background: #fff;
    color: #777;
    padding: 5px;
    border: 2px solid #666;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-family: arial;
    font-size: 0.9em;
  }
  #meta h3 {
    color: #666;
    font-size: 1.1em;
    padding: 0px;
    margin: 0px;
    display: inline-block;
  }
  #loading {
    float: right;
  }
</style>


<script src="http://js.arcgis.com/3.14/"></script>
<script>
  var map;
  require([
    "esri/map", "esri/layers/KMLLayer",
    "dojo/parser", "dojo/dom-style",


    "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
  ], function(
    Map, KMLLayer,
    parser, domStyle
  ) {
    map = new Map("map", {
      basemap: "topo",
      center: [-108.663, 42.68],
      zoom: 6
    });


    parser.parse();


    var kmlUrl = "https://dl.dropboxusercontent.com/u/2654618/kml/Wyoming.kml";
    var kml = new KMLLayer(kmlUrl);
    map.addLayer(kml);
    kml.on("load", function() {
      domStyle.set("loading", "display", "none");
    });
   
    var kmlUrl2 = "https://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml";
    var kml2 = new KMLLayer(kmlUrl2);
    map.addLayer(kml2);
    kml2.on("load", function() {
      domStyle.set("loading", "display", "none");
    });
  });
</script>
</head>


<body class="tundra">
<div data-dojo-type="dijit/layout/BorderContainer"
     data-dojo-props="design:'headline',gutters:false"
     style="width: 100%; height: 100%; margin: 0;">
  <div id="map"
       data-dojo-type="dijit/layout/ContentPane"
       data-dojo-props="region:'center'">
    <div id="meta">
      <span id="loading"><img src="images/loading_black.gif" /></span>
      <h3>Display KML Using a <a href="https://developers.arcgis.com/javascript/jsapi/kmllayer-amd.html">KMLLayer</a></h3>
      <br />
      The map displays a simple KML file that was created using Google Earth and
      is hosted on an Esri server. Symbology and attributes are honored.
    <div>
  </div>
</div>
</body>
</html>

View solution in original post

ChrisSmith7 · ‎07-21-2015

This is working ok for me in the sandbox of the sample you mentioned:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title></title>


<link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
<style>
  html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
  #map { height: 100%; margin: 0; padding: 0; }
  #meta {
    position: absolute;
    left: 20px;
    bottom: 20px;
    width: 300px;
    height: 100px;
    z-index: 40;
    background: #fff;
    color: #777;
    padding: 5px;
    border: 2px solid #666;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-family: arial;
    font-size: 0.9em;
  }
  #meta h3 {
    color: #666;
    font-size: 1.1em;
    padding: 0px;
    margin: 0px;
    display: inline-block;
  }
  #loading {
    float: right;
  }
</style>


<script src="http://js.arcgis.com/3.14/"></script>
<script>
  var map;
  require([
    "esri/map", "esri/layers/KMLLayer",
    "dojo/parser", "dojo/dom-style",


    "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
  ], function(
    Map, KMLLayer,
    parser, domStyle
  ) {
    map = new Map("map", {
      basemap: "topo",
      center: [-108.663, 42.68],
      zoom: 6
    });


    parser.parse();


    var kmlUrl = "https://dl.dropboxusercontent.com/u/2654618/kml/Wyoming.kml";
    var kml = new KMLLayer(kmlUrl);
    map.addLayer(kml);
    kml.on("load", function() {
      domStyle.set("loading", "display", "none");
    });
   
    var kmlUrl2 = "https://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml";
    var kml2 = new KMLLayer(kmlUrl2);
    map.addLayer(kml2);
    kml2.on("load", function() {
      domStyle.set("loading", "display", "none");
    });
  });
</script>
</head>


<body class="tundra">
<div data-dojo-type="dijit/layout/BorderContainer"
     data-dojo-props="design:'headline',gutters:false"
     style="width: 100%; height: 100%; margin: 0;">
  <div id="map"
       data-dojo-type="dijit/layout/ContentPane"
       data-dojo-props="region:'center'">
    <div id="meta">
      <span id="loading"><img src="images/loading_black.gif" /></span>
      <h3>Display KML Using a <a href="https://developers.arcgis.com/javascript/jsapi/kmllayer-amd.html">KMLLayer</a></h3>
      <br />
      The map displays a simple KML file that was created using Google Earth and
      is hosted on an Esri server. Symbology and attributes are honored.
    <div>
  </div>
</div>
</body>
</html>

NathanDorman · ‎07-21-2015

Thanks, guess it's something conflicting with my existing web app....