Hide Table of Contents
View KML sample in sandbox
KML

Description

This sample shows how to add a KML file as a layer to an ArcGIS API for JavaScript application. Adding a KML file (.kml or .kmz) is as simple as requiring the esri/layers/KMLLayer module,creating an instance KMLLayer and adding it to a map.

Note: The KML file needs to be publicly accessible.

Code

<!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.46/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.46/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;
    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="https://js.arcgis.com/3.46/"></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-vector",
      center
: [139.69, 0],
      zoom
: 1
   
});

    parser
.parse();

   
var kmlUrl = "https://earthquake.usgs.gov/fdsnws/event/1/query?format=kml&minmagnitude=5.8";
   
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>

 
         
Show Modal