topic KML Placemarks in ArcGIS JavaScript Maps SDK Questions

KML Placemarks

CharlesGant — Fri, 24 Jul 2015 14:04:07 GMT

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!

Re: KML Placemarks

ChrisSmith7 — Fri, 24 Jul 2015 17:55:59 GMT

Charles,

Are you looking to remove the pushpins?

Re: KML Placemarks

CharlesGant — Fri, 24 Jul 2015 18:10:59 GMT

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

Re: KML Placemarks

ChrisSmith7 — Sat, 11 Dec 2021 14:22:43 GMT

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>

Re: KML Placemarks

ChrisSmith7 — Sat, 11 Dec 2021 14:22:46 GMT

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.

Re: KML Placemarks

CharlesGant — Sat, 25 Jul 2015 15:57:55 GMT

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