Add information from kml file to popup bubble in Here Maps

Question

I have a map with an icon marked derived from a kml file. The kml file is:

<?xml version="1.0" encoding="utf-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
    <name>Dove.kml</name>
    <Style id="Dove6">
        <IconStyle id="DoveRIconStyle">
            <Icon>
                <href>https://wcsb.nz/wellringers/dove6.bmp</href>
            </Icon>
        </IconStyle>
        <LabelStyle>
            <color>9fffffff</color>
            <scale>0.67</scale>
        </LabelStyle>
    </Style>
  <Placemark>
    <name>Ab Kettleby</name>
       <styleUrl>#Dove6</styleUrl>
      <Point>
         <coordinates>-0.92747,52.79858</coordinates>
      </Point>
  </Placemark>
  <Placemark>
        <name>Asfordby, Leics, 6, 12cwt, Mon</name>
        <styleUrl>#Dove6</styleUrl>
        <Point>
            <coordinates>-0.95214,52.76339,0</coordinates>
        </Point>
    </Placemark>
  </Document>
</kml>

I want to show the information in in a bubble when the icon is clicked. The code I have written is :

const defaultLayers = platform.createDefaultLayers();
      const map = new H.Map(document.getElementById('map'),
         defaultLayers.vector.normal.map, {
         center: { lat: 52.79858, lng: -0.92747 },
         zoom: 15,
         pixelRatio: window.devicePixelRatio || 1
      });
      window.addEventListener('resize', () => map.getViewPort().resize());
      const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
      const ui = H.ui.UI.createDefault(map, defaultLayers);
      let reader = new H.data.kml.Reader('doveshort1.kml');
reader.parse();
kml = reader.getLayer();
map.addLayer(kml);
      kml.getProvider().addEventListener('tap', function(ev) {
  const info = ev.target.getData();
  let content = '<b>' + info.name + '</b><br/>';
  let bubble =  new H.ui.InfoBubble(ev.target.getPosition(), {
    content: content
  });
  ui.addBubble(bubble);
});

Sadly nothing happens when I click the icon. The page is at https://wcsb.nz/wellringers/kmltest.html. Any help gratefully received.

Answer 1

I can see that you are using ev.target.getPosition() inside the tap event handler. The function you want to use is evt.target.getGeometry() instead. So your code snippet will look something like this.

kml.getProvider().addEventListener('tap', function (ev) {

    if (ev.target instanceof H.map.Marker) {
        const info = ev.target.getData();
        let content = '<b>' + info.name + '</b><br/>';
        let bubble =  new H.ui.InfoBubble(ev.target.getGeometry(), {
            content: content
        });
        ui.addBubble(bubble);
    }
});