smiledongwook

Anybody knows how to control transparency in KML file? I know how add/clear KML file.

Discussion created by smiledongwook on Sep 8, 2011
Latest reply on Feb 2, 2012 by EJAY_L
Anybody knows how to control transparency in KML file?
I know how add/clear KML file....

<!doctype html>
<html lang="en">
<head>
<title>Add/Clear KML file ex.</title>
<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.4/js/dojo/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/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: 60px;
    Top: 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.4"></script>
<script>
//original source
//http://help.arcgis.com/en/webapi/javascript/arcgis/demos/layers/layers_kml.html
//Nahm Lee(nlee@valleywater.org) added clear KML file function
//
  dojo.require("dijit.layout.BorderContainer");
  dojo.require("dijit.layout.ContentPane");
  dojo.require("esri.map");
  dojo.require("esri.layers.KMLLayer");

  var map, resizeTimer;
  var kmlUrl, kml;
  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);
//    map.addLayer(kml);
//    dojo.connect(kml, 'onLoad', function() {
//      dojo.style(dojo.byId('loading'), 'display', 'none');
//    });
  
    dojo.connect(map, 'onLoad', function() {
      dojo.connect(dijit.byId('map'), 'resize', function() { 
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout( function() {
          map.resize();
          map.reposition();
        }, 500);
      });
    });
  }
function addKMLMap(){
  kmlUrl='http://dl.dropbox.com/u/2654618/kml/Wyoming.kml';
  kml = new esri.layers.KMLLayer(kmlUrl);
  map.addLayer(kml);

}

//clearKML
function clearKML(){
  var folders = kml.folders;
  dojo.forEach(folders,function(folder){
    kml.setFolderVisibility(folder,false);
  });

}
 
  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 />
<input type="button" value="Add KML" onclick="addKMLMap();" /><br />
<input type="button" value="Clear KML" onclick="clearKML();" /><br />
   <div>
  </div>
</div>
</body>
</html>

Outcomes