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");
});
*/
});
Solved! Go to Solution.
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>
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>
Thanks, guess it's something conflicting with my existing web app....