mjgarcia

KML layer extents

Discussion created by mjgarcia on Apr 4, 2012
Latest reply on Jun 6, 2014 by Srimathi
I want to set the Extent of the map automatically to focus on the layer shown by the kml, with an appropriate zoom.

I am using the following snippet, which is specified in here: http://help.arcgis.com/en/webapi/javascript/arcgis/help/jsapi_start.htm#jsapi/kmllayer.htm

var kmlExtent, layers = kml.getLayers();
  dojo.forEach(layers, function(lyr) {
    if ( lyr.graphics && lyr.graphics.length > 0 ) {
      var lyrExtent = esri.geometry.geographicToWebMercator(
        esri.graphicsExtent(lyr.graphics)
      );
      if ( globals.kmlExtent ) {
        kmlExtent = kmlExtent.union(lyrExtent);
      } else {
        kmlExtent = lyrExtent;
      }
  });
  map.setExtent(kmlExtent);



However it does not seems to work, the element seems to have no layers.
This is my complete code:

[HTML]
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title></title>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/esri/dijit/css/Popup.css"/>

<style>
  html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
  #map { 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: 5px solid #777;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-family: arial;
    font-size: 0.9em;
  }
  #meta h3 {
    color: #000;
    font-size: 1.1em;
    padding: 0px;
    margin: 0px;
    display: inline-block;
  }
  #loading {
    float: right;
  }
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>
<script>
  dojo.require("dijit.layout.BorderContainer");
  dojo.require("dijit.layout.ContentPane");
  dojo.require("esri.map");
  dojo.require("esri.layers.KMLLayer");
 
  var map;
  function init() {
    map = new esri.Map("map");
    var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
    map.addLayer(basemap);

    var kmlUrl = 'http://dl.dropbox.com/u/21472423/15.kml';
    var kml = new esri.layers.KMLLayer(kmlUrl);
    map.addLayer(kml);
    dojo.connect(kml, 'onLoad', function() {
      dojo.style(dojo.byId('loading'), 'display', 'none');
    });
   
    dojo.connect(map, 'onLoad', function() {
        //resize the map when the browser resizes
        dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
    });


try{
//SNIPPET FOR AUTO EXTENT
    var kmlExtent, layers = kml.getLayers();
    dojo.forEach(layers, function(lyr) {
   if ( lyr.graphics && lyr.graphics.length > 0 ) {
     var lyrExtent = esri.geometry.geographicToWebMercator(esri.graphicsExtent(lyr.graphics) );
     if ( globals.kmlExtent ) {
    kmlExtent = kmlExtent.union(lyrExtent);
     } else {
    kmlExtent = lyrExtent;
     }
   }
    });
    map.setExtent(kmlExtent);
   }catch(err)
   {
  alert(err);
   }
  }
  dojo.ready(init);
</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>
    <div>
  </div>
</div>
</body>
</html>
[/HTML]

Can anyone help me with this?  :S

Thank you.

Outcomes