Tips & Tricks: Using HERE Maps with Leaflet

17 February 2016 by Richard Süselbeck

Leaflet is a popular JavaScript library for interactive maps. It has a couple of things going for it, but the ability to use a variety of of base maps in your applications is one of the its nicest features. HERE Maps are of course also supported and make a great choice. Not only do they offer some of the highest-quality map data around, they also look great! So let's put two great things together and check out how to use HERE Maps as a tile provider for Leaflet.

Fortunately Leaflet makes this pretty easy. In fact, you only need to change one line of code to configure Leaflet to use the HERE Map Tile API. First, if you haven't built a Leaflet application yet, go and check out the Leaflet Quick Start to set up your map. Once you're done, simply find where you set the Leaflet URL template and replace it with a template for the HERE Map Tile API. Check out this example:

As you can see, all you need to do is use the URL from the HERE Map Tile API and set the parameters to your liking. To make this even easier, let's have a look at some of the parameters from the above example. (And remember, you can always refer to the Map Tile API documentation for more details on all parameters.)

base: This determines the basic background map tiles. The most common choices are "base" for using the map as a background, "aerial" to use satellite images as a background and "traffic" to use the map with a traffic flow overlay as a background.

type: This sets the type of map that you want, in this case the "base" map. Feel free to experiment with other types as well. For example, you can use "blintile" to get the base map without labels, or "trucktile", which includes road signs and info specifically for trucks and fleet providers. Check out the Base Map Tile Resources documentation for more info on your options.

scheme: This allows you to set the specific view scheme. For example, "pedestrian.night" gives you a pedestrian map view in night mode. Make sure to use the right combination of base map and scheme. For example, the "satellite.day" scheme requires use of the "aerial" base map.

Combining these three parameters, you can get some very nice looking basic maps for you Leaflet app. For example, combining "base", "blinetile" and "reduced.night" gives you a very restrained background map, which allows your visualizations to really shine.

Combining the the base, type and scheme parameters allows you to configure the way the map is displayed.

subdomains: The HERE Map Tile API uses prefixes (1-4) in order to ensure proper load balancing. Usually it is on you to make sure these prefixes are used evenly, but Leaflet actually takes care of this for you. All you have to take care of is to keep this parameter set to "1234", so all prefixes are used.

app_id, app_code: In order to use the HERE APIs you need access credentials. You can sign up for a free 90 day trial to get started right away. Make sure you replace {app_id} and {app_code} with your credentials after you've done so.

Here is a complete page with a Leaflet map using HERE Maps as the tile provider and a marker added at the Naturkundemuseum in Berlin.

One final tip: the URL in the above example uses the CIT environment. Make sure to remove ".cit" from the URL once your application goes into production. Check out this blog post on using the CIT for more information.

top