KML | ArcGIS API for JavaScript

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 relevant API module:

dojo.require("esri.layers.KMLLayer");

And then creating a KML layer and adding it to the map:

var kmlUrl = 'http://dl.dropbox.com/u/2654618/kml/Wyoming.kml?breakerbreaker';
var kml = new esri.layers.KMLLayer(kmlUrl); map.addLayer(kml);

Note: The KML layer needs to be publicly accessible.

Code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title></title>

<link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.6/js/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.6/"></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 = "http://dl.dropbox.com/u/2654618/kml/Wyoming.kml";
    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="http://help.arcgis.com/en/webapi/javascript/arcgis/help/jsapi/kmllayer.htm">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 live sample Download as a zip file

Description

Code

View live sample
Download as a zip file