Hands on

How To Migrate KML to HERE Maps

By Jayson DeLancey | 03 November 2018

If you’ve used Google Maps to store custom places or create a map in the past, you may be wondering what you can do with that data now. The good news is that Google has provided a helpful tool to export your data to KML or KMZ which you can use to Switch to HERE.

KML

Keyhole Markup Language (KML) is an Open Geospatial Consortium (OGC) standard that specifies an XML language focused on geographic visualization, including annotation of maps and images. The (KMZ) extension is just a zip file to compress larger KML data sets.

You can find the option to export your map like this:

export

Looking at the contents of this downloaded file you can find markers represented as Placemark elements with geometry described by its shape (Point) and location (coordinates).

      <Placemark>
        <name>Joe Montana</name>
        <description>Jun 11, 1956 New Eagle, PA</description>
        <styleUrl>#icon-22</styleUrl>
        <Point>
          <coordinates>
            -79.953003,40.20405,0
          </coordinates>
        </Point>
      </Placemark>

Other types of geometry are supported as well so you can learn more about KML from a few of these resources:

 

HERE Map

The HERE Maps API for JavaScript supports reading KML data directly. If you’ve exported your KML data to work with, let’s put it on a HERE map.

Start with some simple boilerplate like you may find in our Getting Started with Maps API examples. The one difference to note is including the mapsjs-core.js library which has the KML functionality we’ll need.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1526040296" />

<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-data.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>

</head>
<body>

   <div id="map" style="width: 100%; height: 400px; background: grey;" />
   <script  type="text/javascript" charset="UTF-8" src="index.js"></script>

</body>
</html>

The index.js is where most of the logic will be written. You’ll find these steps to be a familiar pattern with many of the other tutorials in our documentation.

The first step is to initialize the platform with the app_id and app_code you get when you sign up for an account at https://developer.here.com. You also initialize the layers for instantiating the map that can be centered wherever you like.

const platform = new H.service.Platform({
  app_id: APP_ID_HERE,
  app_code: APP_CODE_HERE,
})

const layers = platform.createDefaultLayers();
const map = new H.Map(
  document.getElementById('map'),
  layers.normal.map,
  {
    center: {lat: 40.4406, lng: -79.9958},
    zoom: 4,
  });

If you stopped there a map would be displayed, but if you want a slippy interactive map like many users might expect you’ll add in some more events and behaviors that you can customize. We won’t do too much customization in this example and just use the defaults, but I encourage you to explore the many options to generate a map that expresses your own brand or design preferences.

const events = new H.mapevents.MapEvents(map);
const behavior = new H.mapevents.Behavior(events);
const ui = H.ui.UI.createDefault(map, layers);

So far this is pretty standard boilerplate for working with HERE interactive maps. Next we’ll look at the Data Reader classes which is what we need for migrating our map.

Data Reader

The JavaScript H.data defines a few classes intended to help you work with different types of geospatial data such as GeoJSON or KML.

The data I exported from Google Maps displayed a marker at the birthplace for all of the National Football League’s Hall of Fame Quarterbacks in the modern era. It was split up into 3 separate layers:

  • Hall of Famers born in Western Pennsylvania represented with star icons
  • Hall of Famers born elsewhere represented with football icons
  • Likely Hall of Famers who are not yet elligible represented with diamond icons

To read the exported KML, I initialize a H.data.kml.Reader object and pass it the filename that is served from the same web server.

let reader = new H.data.kml.Reader('hof-qb.kml');
reader.parse();

That last point about serving from a web server is important. Personally, I run python -m SimpleHTTPServer or python -m http.server while in development but use whatever your preference. If you try to load your index.html as a local file you may run into an error like this:

mapsjs-core.js:164 Access to XMLHttpRequest at ‘file:///Users/delancey/hof-qb.kml’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

After reading in the KML we can add it as a layer on our map. At this point we should be able to render a map with the KML layers displayed.

InfoBubbles

There is one more piece of functionality to add. When clicking on a marker we may want to popup an info bubble to give the details that were exported such as the players name and birthdate.

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

  const info = ev.target.getData();

  let content = '<b>' + info.name + '</b><br/>';
  content += info.description;

  let bubble =  new H.ui.InfoBubble(ev.target.getPosition(), {
    content: content
  });
  ui.addBubble(bubble);
});

We haven’t added any additional styling so the result will look like this:

Dan Marino

 

XYZ Studio

With the beta launch of HERE XYZ we have an alternative path for quickly creating maps in the first place. If you missed the news about HERE XYZ, it is an open, interoperable and real-time location data management service that includes interactive tools to enable anybody to make a map easier and faster.

With the layer editor you can draw on a map to create or edit content.

xyz-studio-edit

The data table allows you to edit metadata directly with whatever useful information you want to display on a card.

kelly

 

Summary

With just a little bit of JavaScript code, you can take any geospatial data you have in a KML format, such as data exported from Google Maps, and display it on a HERE map.  It is also worth considering using HERE XYZ on your next mapping project as a way to quickly edit geospatial data directly on the map.

HOF Distribution 

With the KML exported and rendered on our map, we can see that there is a statistically significant number of Hall of Fame quarterbacks that were born in Western Pennsylvania.

 

Read More

If you want to learn more about how to switch to HERE, there are a number of other articles and tutorials to help you make the change.  

google-places

HERE Topples Google to Become the #1 Location Platform

How to Migrate from Google Maps to HERE on iOS

How to Migrate from Google Map Markers to HERE

How to Migrate from Google Routes to HERE Routing

How to Migrate from Google Places to HERE Geocoder Search

How to Create a HERE Dynamic Map