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

NahmLee · ‎09-08-2011

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>

derekswingley1 · ‎09-08-2011

Internally, for vector features, KMLLayers are made up of feature layers. Once your layer loads, you can use the getLayers() method to get to these feature layers (maximum of three feature layers per KML layer, one each for point, line and polygon features). Once you have the feature layers, you can set their opacity.

NahmLee · ‎10-17-2011

Thanks for your tips,
I finally understood with one of other suggestion about KML linkInfo ex. name snippet and this one.
I combined your two suggestions.
I got it and it worked fine.

code is in here
https://s3.amazonaws.com/Nahm/KML/KML_Opacity.html

EjayLai · ‎02-02-2012

Will find it handy. Thanks!!!