4. Integrate the Map

Follow the next steps to add a MapboxGL map to the JS web application and display the HERE Maps tiles.


Install mapbox-gl#

Install the mapbox-gl library.

npm install mapbox-gl –save

Include the GL JS CSS file in the <head> of the index.html file.


Add styles#

Create a styles.css file under the \dist folder.

body {
margin: 0;
padding: 0;
#map {
width: 100vw;
height: 100vh;
.title {
font-size: 20px;
font-weight: 500;
.action-sheet {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
z-index: 1;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
left: 20px;
top: 20px;
width: 380px;
height: 600px;

Add a config file#

Create a new .config file to store access tokens.

export default {

Instantiate the map#

Next, add the map container in the index.html file.

<div id="map"></div>

Add the map initialization in the index.js file. Replace YOUR-MAPBOX-TOKEN in the .config file with a valid Mapbox token.

Note Follow this link to learn how you can get a Mapbox access token.

import "regenerator-runtime/runtime";
var mapboxgl = require("mapbox-gl/dist/mapbox-gl.js");
const app = () => {
mapboxgl.accessToken = config.MAPBOX_TOKEN;
new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/streets-v11",
document.getElementById("action-sheet").innerHTML = ActionSheet();
// Init app

Display the HERE Maps tiles#

Update the style property to display the HERE Maps tiles. Replace YOUR-HERE-MAPS-API-KEY in the .config file with a valid HERE Maps API key.

Note Follow these steps to otain a HERE Maps API key.

const map = new mapboxgl.Map({
container: "map",
style: `https://assets.vector.hereapi.com/styles/berlin/base/mapbox/tilezen?apikey=${HERE_MAPS_API_KEY}`,

Now, you should be able to view the map.