KML loading limits in JS API

3639
2
Jump to solution
07-20-2015 05:45 PM
NathanDorman
New Contributor II

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");

    });

*/

});

Tags (3)
0 Kudos
1 Solution

Accepted Solutions
ChrisSmith7
Frequent Contributor

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

0 Kudos
2 Replies
ChrisSmith7
Frequent Contributor

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

0 Kudos
NathanDorman
New Contributor II

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

0 Kudos