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:

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

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.

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.

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.

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();

kml = reader.getLayer();map.addLayer(kml);

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.

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

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.

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

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.

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.

Jayson is a Senior Developer Evangelist with HERE Technologies in Berkeley, CA. He writes about his location technology experiences related to Web, IoT, and Robotics projects using a variety of technologies like ReactJS, Python, and Cloud Foundry. Jayson is an active advocate for maker and open-source communities. You can also find him on Twitter (@jaysondelancey) or LinkedIn (in/jaysondelancey).