topic Re: Managing KML layers. in ArcGIS JavaScript Maps SDK Questions

Managing KML layers.

MaziyarBoustani — Mon, 14 Nov 2011 04:51:14 GMT

I have a feature class has three polygons in it with different name for each polygon. I converted this layer to kml file. I could open on top of a basemap all three polygons at a same time but what I am looking for is to separate the kml file to their three polygon.
I mean I want to write names of polygons and when I move mouse over on each polygon's name, the polygon related to that name is shown on top of base map.
I appreciate it to help me to write it script.

Re: Managing KML layers.

derekswingley1 — Mon, 14 Nov 2011 14:29:19 GMT

I'm not 100% clear on what you'd like to do. Are you saying you'd like to take features from a KML file, add them to a mapp and then show an info window or label when you hover over a feature? Something like this but with the data source from KML: http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/query_hover.html

Re: Managing KML layers.

MaziyarBoustani — Mon, 14 Nov 2011 15:20:47 GMT

Thanks for the example.
But actually I want to write names of all feature on the body part of HTML and when I mouse over the name of each feature it appear on map. Imagine the example you gave ma ate first it shows all features and then when you mouse over the feature you see the pop-up. But I want to have a clear map (just base map) at the first and when I mouse over the name of each feature it appear on map.
For example I attached a photo of what I mean. All three polygons are in one kml file and when I mouse over "polygon A" on left it appear on map.

Re: Managing KML layers.

derekswingley1 — Sat, 11 Dec 2021 15:33:43 GMT

I understand, thanks for posting more info. This is definitely possible, but I'm skeptical of the user experience. I say this because once you mouseover a feature name, it shows up on the map but as you mouse out, it disappears. How is a user supposed to get more info about a feature?

I guess if you just need to show the feature but don't need to let the user interact with it, this would be a valid workflow. Here's a simple implementation:


<!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.5/js/dojo/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/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.5"></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() {
    var initExtent = new esri.geometry.Extent({"xmin":-13787751,"ymin":4476990,"xmax":-10404954,"ymax":6049759,"spatialReference":{"wkid":102100}});
    map = new esri.Map("map",{ extent: initExtent });
    var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
    map.addLayer(basemap);

    var kmlUrl = 'http://dl.dropbox.com/u/2654618/kml/Wyoming.kml';
    var kml = new esri.layers.KMLLayer(kmlUrl, { visible: false }); 
    map.addLayer(kml);
    dojo.connect(kml, 'onLoad', configureMouseOver);
    
    dojo.connect(map, 'onLoad', function() { 
      //resize the map when the browser resizes
      dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
    });
  }

  function configureMouseOver(kml) {
    // get layers
    var lyrs = kml.getLayers();
    var polygons = dojo.filter(lyrs, function(lyr) {
      if ( lyr.geometryType == "esriGeometryPolygon" ) {
        return lyr;
      }
    })[0];
    console.log('polygons: ', polygons);
    dojo.byId("info").innerHTML = "";
    dojo.forEach(polygons.graphics, function(g) {
      // hide the graphic by default
      g.hide();

      var node = dojo.create('div', {
        id: g.attributes.id,
        innerHTML: g.attributes.name
      }, dojo.byId("info"));
      
      // set up an event handlers to show the feature
      dojo.connect(node, "onmouseover", function() {
        g.show();
      });
      dojo.connect(node, "onmouseout", function() {
        g.hide();
      });
    });

    // turn the layer on but no graphics will 
    // show because they were previously hidden
    kml.show();
  }
  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">
      <h3>Display KML Using a <a href="http://help.arcgis.com/en/webapi/javascript/arcgis/help/jsapi/kmllayer.htm">KMLLayer</a></h3>
      <div id="info">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>
</div>
</body>
</html>

JSFiddle: http://jsfiddle.net/swingley/jPTPL/

Re: Managing KML layers.

MaziyarBoustani — Mon, 14 Nov 2011 17:31:15 GMT

Thank you for help. that was exactly what I wanted.
but one more thing I am looking for is in this example to gave me, in the kml file there is just one feature (Wyoming polygon). what if I have three features and I want to call each polygon separately.
I know the method is "kml.getLayers();" but how can I call each feature. With name? ID? and where should add the line of code?
Thanks

Re: Managing KML layers.

derekswingley1 — Sat, 11 Dec 2021 15:33:46 GMT

Having one feature or three shouldn't make a difference with the code I posted. The way the KMLLayer works internally is that points, lines and polygons each get their own feature layer. This code gets the polygon feature layer:

    var polygons = dojo.filter(lyrs, function(lyr) {
      if ( lyr.geometryType == "esriGeometryPolygon" ) {
        return lyr;
      }
    })[0];

And this code creates the HTML and adds event listeners to for each polygon feature:

    dojo.byId("info").innerHTML = "";
    dojo.forEach(polygons.graphics, function(g) {
      // hide the graphic by default
      g.hide();

      var node = dojo.create('div', {
        id: g.attributes.id,
        innerHTML: g.attributes.name
      }, dojo.byId("info"));
      
      // set up an event handlers to show the feature
      dojo.connect(node, "onmouseover", function() {
        g.show();
      });
      dojo.connect(node, "onmouseout", function() {
        g.hide();
      });
    });

Re: Managing KML layers.

MaziyarBoustani — Tue, 15 Nov 2011 02:33:05 GMT

Thank you .
Yes know I could see the name of all layers in the box and when I mouse over them it appear on map.
But how can I sort these feature name by alphabet?

Re: Managing KML layers.

AmmarAssem1 — Tue, 19 Feb 2013 13:14:41 GMT

I have kml in local not in server and i wish to display kml into map how i can do this.

Re: Managing KML layers.

ChadHenningfeld — Wed, 01 May 2013 18:16:12 GMT

I have kml in local not in server and i wish to display kml into map how i can do this.

Please look at the link below it will give explanation for why you can not.

http://forums.arcgis.com/threads/41974-Loading-Dynamic-KML-from-web-service