Managing KML layers.

2658
8
11-13-2011 08:51 PM
New Contributor
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.
Reply
0 Kudos
8 Replies
Frequent Contributor II
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
Reply
0 Kudos
New Contributor
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.
Reply
0 Kudos
Frequent Contributor II
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/
Reply
0 Kudos
New Contributor
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
Reply
0 Kudos
Frequent Contributor II
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();
      });
    });
Reply
0 Kudos
New Contributor
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?
Reply
0 Kudos
New Contributor
I have kml in local not in server and i wish to display kml into map how i can do this.
Reply
0 Kudos
New Contributor
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
Reply
0 Kudos