Display KML Data

Parse a KML file and display the data on a map

by jcorbett

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/display-kml-on-map/" />

<!-- 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 KML Data</h1>
<p>This example shows a map of the continental <b>United States</b>, highlighting the state capitals and borders of each state. The data to display on the map has been read in from a KML file and loaded using the built-in KML parser.</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(355, 0, 0);
  font-size: 100%;
}
b, strong {
  color: blue;
}
code {
  font-weight: 700;
  font-size: 120%;
}

JavaScript

/**
 *  Renders specified a KML file on the map
 *
 *  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
 */
function renderKML(map) {
  // Center map on New York
  map.setCenter({lat: 37.4602, lng: -95.7475});
  map.setZoom(4);

  // Create a reader object passing in the URL of our KML file
  var reader = new H.data.kml.Reader('data/us-states.kml');

  // Parse the document
  reader.parse();

  // Get KML layer from the reader object and add it to the map
  map.addLayer(reader.getLayer());
}


/**
 * Boilerplate map initialization code starts below:
 */

// Step 1: initialize communication with the platform
var platform = new H.service.Platform({
  app_id: 'DemoAppId01082013GAL',
  app_code: 'AJKnXv84fjrb0KIHawS0Tg',
  useCIT: true
});
var defaultLayers = platform.createDefaultLayers();

// Step 2: initialize a map
var map = new H.Map(document.getElementById('map'), defaultLayers.normal.map, {
  zoom: 1
});

// Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// Step 4: create the default UI component, for displaying bubbles
var ui = H.ui.UI.createDefault(map, defaultLayers);

// Step 5: main logic goes here
renderKML(map);

$('head').append('<link rel="stylesheet" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css" type="text/css" />');