KML Placemarks

CharlesGant · ‎07-24-2015

Hello,

This might have been discussed before but I couldn't find anything doing a search. I'm trying to pull in the following kml and display it using the esri js api.

http://www.wpc.ncep.noaa.gov/kml/qpf/QPF6hr_f00-f06_latest.kml

However, the placemarks are not displayed correctly. Is there a way to remove them altogether, or display them correctly? I tried using the getLayers() method but it just returns an empty array.

Thanks!

ChrisSmith7 · ‎07-24-2015

Charles,

Are you looking to remove the pushpins?

CharlesGant · ‎07-24-2015

Yes sir! All I want are the contours and the shaded graphics.

ChrisSmith7 · ‎07-24-2015

Charles,

hide() does not work as anticipated, for some reason. Maybe it's a bug, maybe I'm not understanding it correctly. Using this sample - ArcGIS API for JavaScript Sandbox - I modified the kml to use the one you posted and here's what I found...

 var layers;
    kml.on("load", function() {
      domStyle.set("loading", "display", "none");
      layers = kml.getLayers();
      dojo.forEach(layers, function(layer){
        layer.hide();
        console.log(layer.visible);
      });
    });

In the console, both layers have visible as false, but they still show. As a workaround, try something like this (using opacity):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title></title>


<link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
<style>
  html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
  #map { height: 100%; 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: 2px solid #666;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-family: arial;
    font-size: 0.9em;
  }
  #meta h3 {
    color: #666;
    font-size: 1.1em;
    padding: 0px;
    margin: 0px;
    display: inline-block;
  }
  #loading {
    float: right;
  }
</style>


<script src="http://js.arcgis.com/3.14/"></script>
<script>
  var map;
  require([
    "esri/map", "esri/layers/KMLLayer",
    "dojo/parser", "dojo/dom-style",


    "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
  ], function(
    Map, KMLLayer,
    parser, domStyle
  ) {
    map = new Map("map", {
      basemap: "topo",
      center: [-108.663, 42.68],
      zoom: 6
    });


    parser.parse();


    var kmlUrl = "http://www.wpc.ncep.noaa.gov/kml/qpf/QPF6hr_f00-f06_latest.kml";
    var kml = new KMLLayer(kmlUrl);
    map.addLayer(kml);
    var layers;
    kml.on("load", function() {
      domStyle.set("loading", "display", "none");
      layers = kml.getLayers();
      layers[1].opacity = 0.0
    });
  });
</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="https://developers.arcgis.com/javascript/jsapi/kmllayer-amd.html">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>

ChrisSmith7 · ‎07-24-2015

Ok, so it looks like hide will work, but you can't key off of the KML load event... it must be too early to call the hide method. It works if I use "update-end":

    kml.on("update-end", function() { 
      layers = kml.getLayers(); 
      layers[1].hide();
      console.log("layer hidden");
    });

It doesn't seem to fire this more than twice. Panning and zooming doesn't cause the "update-end" to fire on a KML.

CharlesGant · ‎07-25-2015

Chris,

I plugged that code snippet in and it didn't work. I printed to console the layers array and it printed the array twice with only one entry. The code you provided should hide the first layer, correct? That said, I'm only getting an one entry array, not two. Its like its creating the array as it loops through the layers, not creating the array once with two layers in it. Any ideas?

I noticed that you were using parser in the top of your code. I'm using ready(function(){.....}, does that make a difference?

Thanks,

Charles