rmill65

KML layer popup defaults to actionList.hidden?

Discussion created by rmill65 on Apr 23, 2012
Latest reply on Apr 24, 2012 by rmill65
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>

Outcomes