Search code examples
kmlheremaps

Setting marker style from kml file in Here maps api

I have a kml file:

<?xml version="1.0" encoding="utf-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Placemark>
    <name>Ab Kettleby</name>
    <Icon>
    <href>https://wcsb.nz/wellringers/dove6.bmp</href>
    </Icon>
      <Point>
         <coordinates>-0.92747,52.79858</coordinates>
      </Point>
  </Placemark>
</kml>

I reference this from an html file with a piece of javascript:

let reader = new H.data.kml.Reader('doveshort1.kml');
reader.parse();
kml = reader.getLayer();
map.addLayer(kml);

The file is read because a map is produced with the default bubble marker in the right place. Why is the referenced marker not used?

Solution

  • Your KML is not valid, see the KML Reference.

    <Placemark id="ID">
  <StyleSelector>...</StyleSelector>
</Placemark>

    <StyleSelector> is abstract, extended By <Style>

    <Style id="ID">
<!-- extends StyleSelector -->
<!-- specific to Style -->
  <IconStyle>...</IconStyle>
</Style>

    <IconStyle id="ID">
  <!-- specific to IconStyle -->
  <Icon>
    <href>...</href>
  </Icon>
</IconStyle>

    This works:

    <?xml version="1.0" encoding="utf-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Placemark>
    <name>Ab Kettleby</name>
    <Style id="ID">
<!-- specific to Style -->
     <IconStyle>
      <Icon>
       <href>https://wcsb.nz/wellringers/dove6.bmp</href>
      </Icon>
     </IconStyle>
   </Style>
      <Point>
         <coordinates>-0.92747,52.79858</coordinates>
      </Point>
  </Placemark>
</kml>

    live example

    screenshot of Google JavaScript API v3 map

    code snippet:

    function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: {
      lat: 41.876,
      lng: -87.624
    },
  });
  const ctaLayer = new google.maps.KmlLayer({
    url: "http://www.geocodezip.com/geoxml3_test/kml/SO_20210121_Icon1.kml",
    map: map,
  });
}
    /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
    <!DOCTYPE html>
<html>

<head>
  <title>KML Layers</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>
</body>

</html>