Display Interactive KML Objects

Parse a KML file and display and interact with the data on a map

by Brent Coder

HTML

<link rel="stylesheet" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css">
<!-- BASE - this example uses relative URLs -->
<base href="https://raw.githubusercontent.com/heremaps/jsfiddle-github/master/map-with-interactive-kml-objects/" />

<!-- SCRIPTS -->
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-data.js"></script>

<!-- BODY -->
<h1>Display Interactive KML Objects</h1>
<p>This example shows a map highlighting locations around <b>Berlin Schönefeld Airport</b>. The data to display on the map has been read in from a KML file and loaded using the built-in KML parser. The parsed KML objects are interactive - clicking on the airport terminals reveals more information about them.</p>
<hr/>
<div id="map" style="width: 600px; height: 400px; background: grey"></div>

CSS

code, h1, h2, h3{
  color: #124191;
  letter-spacing: -0.03em;
}
body {
  font-family:"Lucida Grande",Tahoma,sans-serif;
  color: rgb(102, 102, 102);
  font-size: 80%;
}
b, strong {
  color: black;
}
code {
  font-weight: 700;
  font-size: 120%;
}

JavaScript

/**
 * Display interactive map with objects loaded from a KML file
 *
 * Note that the maps data module http://js.api.here.com/v3/3.0/mapsjs-data.js
 * must be loaded for KML parsing to occcur
 *
 * @param {H.Map} map A HERE Map instance within the application
 * @param {H.ui.UI} ui Default ui component
 * @param {Function} renderControls Custom non-api function for rendering control buttons
 */
function renderSchoenefeldAirport(map, ui, renderControls) {
  // Create a reader object, that will load data from a KML file
  var reader = new H.data.kml.Reader('data/sxf.kml');

  // Request document parsing. Parsing is an asynchronous operation.
  reader.parse();

  reader.addEventListener('statechange', function () {
    // Wait till the KML document is fully loaded and parsed
    if (this.getState() === H.data.AbstractReader.State.READY) {
      var parsedObjects = reader.getParsedObjects();
      // Create a group from our objects to easily zoom to them
      var container = new H.map.Group({objects: parsedObjects});

      // First loaded object is a group of objects describing terminals.
      // So let's zoom to them by default
      map.setViewBounds(parsedObjects[0].getBounds());

      // Render buttons for zooming into parts of the airport.
      // Function is not a part of API. Scroll to the bottom to see the source.
      renderControls({
        // Key is a button label and value is an click/tap callback
        'Zoom to the terminals': function () {
          // First loaded object is a group of objects describing terminals
          map.setViewBounds(parsedObjects[0].getBounds(), true);
        },
        'Zoom to runway': function () {
          // Second loaded object is a group of objects describing the runway
          map.setViewBounds(parsedObjects[1].getBounds(), true);
        },
        'View All': function () {
          map.setViewBounds(container.getBounds(), true);
        }
      });

      // Let's make kml ballon visible by tap on its...