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.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…