Search code examples
javascriptopenlayerskmlopenlayers-5

OpenLayers 5.3, get PROPERTIES from KML layer placemark

I've got a map with earthquake infos on different KML layers.

There's a tooltip that shows up the infos of a specific place if you "hover" with the mouse on it.

Eg.

I move my mouse over "PUNTA CANA", there should be a tooltip with:

  • NAME: Punta Cana
  • MAGNITUDE: 2.2
  • LATITUDE: xxx
  • LONGITUDE: yyy
  • TIME: dd/mm/YY, hh:ii

NB: In my KML, as you can see, I have all these infos:

<Folder>
<Placemark id="placemark54021">
<name> Punta Cana</name>
<lat>38.89</lat>
<longitudo>15.78</longitudo>
<magnitudo>2.1</magnitudo>
<profondita>109</profondita>
<data_intera>18/01/2019</data_intera>
<orario>09:10</orario>
<styleUrl>#simbolo_last_0_1</styleUrl>
<Point>
<coordinates>15.78,38.89</coordinates>
</Point>
</Placemark>
</Folder>

However, If I try to get the properties, I manage to read only the "name" property:

e.g.

map.on(select, function(event) {

    var feature = map.forEachFeatureAtPixel(event.pixel,
        function(feature, layer) {

        var values = feature.values_;

        var coordinate = event.coordinate;
        var hdms = ol.coordinate.toStringHDMS(ol.proj.toLonLat(coordinate));


        content.innerHTML = '<p style="font-weight: 800">'+ values.name +' - ' + '02/02/2002' + ' - ore 06:00</p>' +
                '<p><span style="font-weight: bold; color: red;">Magnitudo: 2.2</span> - ' +
                '<b>Lat:</b> 42.00 - <b>Long</b>: 32.00 - <b>Profondità</b>: 9km</p>';

        overlay.setPosition(coordinate);


        }, {
            hitTolerance: 5
        });
});

I'm correctly reading the property name using values.name. However, If I try the same way to read other properties. E.g.: - values.lat - values.longitudo etc... it doesn't work!

How can I collect the other properties from the KML? Am I missing something?

Thank you!

Solution

  • Not sure if this is related (since I don't know openlayers well), but your KML structure is not valid KML. You're using custom tags for your data variables directly in the KML, which is not supported. If you want to include attribute data like that in your KML features, it's usually best to use an <ExtendedData> section (with or without a Schema defined). Your KML would end up looking something like:

    <kml>
  <Folder>
    <Placemark id="placemark54021">
      <name>Punta Cana</name>
      <styleUrl>#simbolo_last_0_1</styleUrl>
      <ExtendedData>
        <Data name="lat"><value>38.89</value></Data>
        <Data name="longitudo"><value>15.78</value></Data>
        <Data name="magnitudo"><value>2.1</value></Data>
        <Data name="profondita"><value>109</value></Data>
        <Data name="data_intera"><value>18/01/2019</value></Data>
        <Data name="orario"><value>09:10</value></Data>
      </ExtendedData>
      <Point>
        <coordinates>15.78,38.89</coordinates>
      </Point>
    </Placemark>
  </Folder>
</kml>