4. Integrate the Map

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

MapboxGL#

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.

<link
href="https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css"
rel="stylesheet"
/>

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 {
MAPBOX_TOKEN: "YOUR-MAPBOX-TOKEN",
HERE_MAPS_API_KEY = "YOUR-HERE-MAPS-API-KEY"
}

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
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 HERE_MAPS_API_KEY = config.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.