Introduction

Last Updated: 05/09/2019

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

You will need a HERE App ID and Code to access the HERE data.

Resources

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.

<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 = {
   id: 'YOUR-APP-ID',
   code: 'YOUR-APP-CODE'
}
const style = 'reduced.night';

const hereTileUrl = `https://2.base.maps.api.here.com/maptile/2.1/maptile/newest/${style}/{z}/{x}/{y}/512/png8?app_id=${here.id}&app_code=${here.code}&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-APP-ID and YOUR-APP-CODE 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

results matching ""

    No results matching ""