topic Re: add kml file to the map in ArcGIS JavaScript Maps SDK Questions

add kml file to the map

mahmoudezeldien — Wed, 11 Jul 2018 08:57:56 GMT

I used an example KML | ArcGIS API for JavaScript 3.25 to add kml file to the map but when trying to use the kml file published on my iis server(http://localhost/conus_latest_viirs.kml) it didn't loaded on the map *i can download the file by cliking the url http://localhost/conus_latest_viirs.kml .

Re: add kml file to the map

RobertScheitlin__GISP — Wed, 11 Jul 2018 12:32:47 GMT

Mahmoud,

What is the WKID of your KML data? Does it support 4326 or 102100 WKIDs?

Re: add kml file to the map

mahmoudezeldien — Wed, 11 Jul 2018 15:25:59 GMT

i used that kml file fromthe URL :https://fsapps.nwcg.gov/data_viirs/kml/canada_latest_viirs.kml and the data appears fine,

then i downloaded it and copy it to my iis but after changing the URL in the code to :http://localhost/conus_latest_viirs.kml it didn't appear on the map

although i tested downloading the file using the url from local host:http://localhost/conus_latest_viirs.kml

Re: add kml file to the map

RobertScheitlin__GISP — Wed, 11 Jul 2018 15:30:18 GMT

Can you share your code then?

Re: add kml file to the map

mahmoudezeldien — Wed, 11 Jul 2018 15:59:36 GMT

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>KML</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.25/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.25/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>

"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://fsapps.nwcg.gov/data_viirs/kml/canada_latest_viirs.kml";
// var kmlUrl = "http://localhost/z/Wyoming.kml";//not working
var kml = new KMLLayer(kmlUrl);
map.addLayer(kml);
kml.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/3/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>

Re: add kml file to the map

RobertScheitlin__GISP — Wed, 11 Jul 2018 16:19:06 GMT

Mahmoud,

The KMLLayer in the JS API requires the KML file to be publicly accessible.

Note: The KMLLayer uses a utility service from ArcGIS.com, therefore your kml/kmz must be publicly accessible on the internet.

So have the layer on your localhost is not going to work.

Re: add kml file to the map

mahmoudezeldien — Wed, 11 Jul 2018 16:26:36 GMT

so what i need to add my own kml file?

Re: add kml file to the map

RobertScheitlin__GISP — Wed, 11 Jul 2018 17:44:23 GMT

You need to put the file on a web server that is publicly accessible.

Re: add kml file to the map

mahmoudezeldien — Thu, 12 Jul 2018 06:54:50 GMT

Robert ,

thanks, it works now.

Re: add kml file to the map

RobertScheitlin__GISP — Thu, 12 Jul 2018 12:41:15 GMT

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.