KML layer popup defaults to actionList.hidden?

RonMiller · ‎04-23-2012

Hoping someone can steer me in the right direction here. New to ESRI Javascript API and I'm working on a JSAPI project with KML layers. Need to have a popup window that shows "Zoom to" link, some content text, etc.

I've changed the infoWindow in the code to the Popup, but neither the original infoWindow or the Popup versions shows the "Zoom to" at the bottom of the popup, as seems to be the default in every sample I've looked at. I've searched through forum archives and the API references here but can't seem to find anything that works when I try it.

I am able to Inspect Element in Firefox 11 and I can see the div.actionList.hidden, but can't seem to make it visible in my code. I tried to do it in CSS - I did find a thread here that showed how to turn off the titleButton.maximize and that worked and I assumed it would be a matter of something similar with CSS for the .actionList (i.e. visibility: visible) but that didn't work and I'm at the extent of my API/CSS knowledge.

I also find that I can't even change/add to the Title or Content as described here in the JSAPI Samples and References.

Here below I've taken the KML Layer Sample and put in the Popup lines to demonstrate what's going on. This is what I'd like. Any ideas are appreciated!

<!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");

  dojo.require("esri.dijit.Popup");
 
  var map;

  function init() {

    var initExtent = new esri.geometry.Extent({"xmin":-13787751,"ymin":4476990,"xmax":-10404954,"ymax":6049759,"spatialReference":{"wkid":102100}});


   var popup= new esri.dijit.Popup(null,dojo.create("div")); 

    map = new esri.Map("map",{ infoWindow: popup, extent: initExtent });
    //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);
    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);
    });
  }
  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>
      <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>

derekswingley1 · ‎04-24-2012

To get the Zoom To link, you need to use the popup's setFeatures method. Try this:

<!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;
  }
</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");

  dojo.require("esri.dijit.Popup");
 
  var map;

  function init() {
    var initExtent = new esri.geometry.Extent({"xmin":-13787751,"ymin":4476990,"xmax":-10404954,"ymax":6049759,"spatialReference":{"wkid":102100}});
    var popup= new esri.dijit.Popup(null,dojo.create("div")); 
    map = new esri.Map("map",{ infoWindow: popup, extent: initExtent });
    //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);
    map.addLayer(kml);
    dojo.connect(kml, 'onLoad', function() {
      console.log("kml loaded: ");
      var polyLayer = dojo.filter(kml.getLayers(), function(lyr) {
        return lyr.geometryType = "esriGeometryPolygon";
      });
      console.log("poly layer: ", polyLayer);
      if ( polyLayer.length ) {
        dojo.connect(polyLayer[0], "onClick", function(e) {
          console.log("clicked poly layer: ", e);
          map.infoWindow.setFeatures([e.graphic]);
        });
      }
    });
   
    dojo.connect(map, 'onLoad', function() {
      //resize the map when the browser resizes
      dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
    });
  }
  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>
      <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>

RonMiller · ‎04-24-2012

Derek,

Thanks, the code you provided does exactly what I was looking for - the "Zoom to" link appears in the KML Popup!

I see the section of code that you've inserted, but I don't understand how it is related to the Set Features link you've provided. That Set Features code snippet looks like this:

var deferred = featureLayer.selectFeatures(query);
popup.setFeatures([deferred]);

While your inserted code is this:

    dojo.connect(kml, 'onLoad', function() {
      console.log("kml loaded: ");
      var polyLayer = dojo.filter(kml.getLayers(), function(lyr) {
        return lyr.geometryType = "esriGeometryPolygon";
      });
      console.log("poly layer: ", polyLayer);
      if ( polyLayer.length ) {
        dojo.connect(polyLayer[0], "onClick", function(e) {
          console.log("clicked poly layer: ", e);
          map.infoWindow.setFeatures([e.graphic]);
        });
      }
    });

I assume this is a "work around" due to the KML data?

My project actually has KML points rather than polygons. I've been trying to modify the piece of code you've inserted into the KML Sample so that it works on my point data, but w/o success. Unfortunately I don't understand exactly how your code is generating the Zoom to (or how I'd add other Content into the Popup, change the title, etc.).

Is there similar method for KML point data, and adding other text content?

Thanks!

- Ron

To get the Zoom To link, you need to use the popup's setFeatures method. Try this:

<!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;
  }
</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");

  dojo.require("esri.dijit.Popup");
 
  var map;

  function init() {
    var initExtent = new esri.geometry.Extent({"xmin":-13787751,"ymin":4476990,"xmax":-10404954,"ymax":6049759,"spatialReference":{"wkid":102100}});
    var popup= new esri.dijit.Popup(null,dojo.create("div")); 
    map = new esri.Map("map",{ infoWindow: popup, extent: initExtent });
    //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);
    map.addLayer(kml);
    dojo.connect(kml, 'onLoad', function() {
      console.log("kml loaded: ");
      var polyLayer = dojo.filter(kml.getLayers(), function(lyr) {
        return lyr.geometryType = "esriGeometryPolygon";
      });
      console.log("poly layer: ", polyLayer);
      if ( polyLayer.length ) {
        dojo.connect(polyLayer[0], "onClick", function(e) {
          console.log("clicked poly layer: ", e);
          map.infoWindow.setFeatures([e.graphic]);
        });
      }
    });
   
    dojo.connect(map, 'onLoad', function() {
      //resize the map when the browser resizes
      dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
    });
  }
  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>
      <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>