Last Updated: 14th Jan 2020

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.


san juan leaflet
Figure 1. 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.

   <title>HERE & Leaflet</title>
   <link rel="stylesheet" href="" />
   <script src=""></script>
      body, html { border: 0; padding: 0; margin: 0; }
      #map { width: 100vw; height: 100vh; }
   <div id="map"></div>
      /* Javascript from section below goes here */

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

const here = {
const style = 'reduced.night';

const hereTileUrl = `${style}/{z}/{x}/{y}/512/png8?apiKey=${here.apiKey}&ppi=320`;

const 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.night
  • reduced.night

results matching ""

    No results matching ""