Tutorials / Add a HERE base map to Leaflet
Last Updated: July 05, 2020

Introduction

HERE map data can be integrated into Leaflet as a raster tile layer with the HERE Map Tile API.

You will need a HERE ApiKey to access the HERE data.

Resources

san juan leaflet

Initialize the Leaflet map

First, set up the html page to include the Leaflet scripts, the proper css, and a div to host the map.

<html>
<head>
   <title>HERE & Leaflet</title>
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
   <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
   <style>
      body, html { border: 0; padding: 0; margin: 0; }
      #map { width: 100vw; height: 100vh; }
   </style>
</head>
<body>
   <div id="map"></div>
   <script>
      /* Javascript from section below goes here */
   </script>
</body>
</html>

Within the <script> tags, initialize the Leaflet map:

const here = {
  apiKey:'YOUR_API_KEY'
}
const style = 'reduced.night';

const hereTileUrl = `https://2.base.maps.ls.hereapi.com/maptile/2.1/maptile/newest/${style}/{z}/{x}/{y}/512/png8?apiKey=${here.apiKey}&ppi=320`;

const map = L.map('map', {
   center: [37.773972, -122.431297],
   zoom: 11,
   layers: [L.tileLayer(hereTileUrl)]
});
map.attributionControl.addAttribution('&copy; HERE 2019');

Be sure to replace YOUR_API_KEY with your HERE Developer credentials.

Your Leaflet map is now working properly with a HERE base map!

Change the map’s style

The HERE Map Tile API comes with a set of default styles.

In order to change between the styles, you can change the style variable in the example to one of the following: - normal.day - normal.day.grey - normal.day.transit - reduced.day - normal.night - reduced.night - pedestrian.day