How LINK Transport Powers Just-In-Time Logistics with HERE WeGo Pro
Mohini Todkari — 11 June 2025
5 min read
14 April 2022
In this blog post, we will create a very simple mapping application with the HERE Maps API for JavaScript. Start the timer, you should have a working map app in the next 10 minutes.
If you don’t have a HERE platform account, follow the Registration process to create a new one. For additional information about getting started with HERE platform, check out the blog from my colleague Erwin.
Create and register an app on HERE platform and create API Keys. I have described this in a previous blog.
Next, we move to Visual Studio Code, or your preferred JavaScript Editor. Create a working folder for this app, and create an index.html file within.
In the <head> tag of html, we’ll load the SDK library and Style Sheets for UI components.
<!-- STEP 3: Load the SDK Library and Style Sheet --> <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script><script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script><script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script><script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script><link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
Now, we’ll add a <div> tag in the body of html code. This is where the map will live. Basic div tag can have just an id as:
<div id="mapContainer"></div>
We’ll add a few attributes to map like width, height, alignment, and background.
<div id="mapContainer" style="width: 100vw; height: 50vw; align-self:center;"></div>
Create a <script> tag in HTML body to start adding the JavaScript code.
H.service.Platform is the central class of the HERE JavaScript API. Among other things it holds the credentials, which we generated in Step 2. Add the apiKey and create an instance of Platform as follows:
<script> // Initialize the platform object var platform = new H.service.Platform({ apikey: 'YOUR_API_KEY_HERE' }); </script>
To initialize the map, we need to create a set of default layers, like satellite imagery and traffic information. We initialize a map by creating an instance of H.Map with the div element we created in Step 4.
// Obtain the default map types from the platform object var maptypes = platform.createDefaultLayers();
// Instantiate (and display) a map object var map = new H.Map( document.getElementById('mapContainer'), maptypes.vector.normal.map, { zoom: 12, center: {lat:34.05, lng:-118.24} });
Run your app, and you can see the map. That’s it!
This map is, however, static (you cannot zoom in or pan around). Let’s enable interactions by adding Map Events.
// Enable the event system on the map instance var mapEvents = new H.mapevents.MapEvents(map); // Instantiate the default behavior with mapEvents object var behavior = new H.mapevents.Behavior(mapEvents);
Create the default UI controls (scale bar, zoom control and map selector) as:
// Create the default UI var ui = H.ui.UI.createDefault(map, defaultLayers);
If you change the browser size, notice the map size does not change automatically. You can add the following line to ensure the map resizes properly:
// Resize map window.addEventListener('resize', () => map.getViewPort().resize());
Here’s the full code for a simple web app displaying a full-size map. Copy-paste this code, add your apiKey to the Platform object, and your mapping app is ready!
<!DOCTYPE html><html>
<head> <title>10-Min Map App</title>
<!-- Step 3: Load the SDK Library and Style Sheet --> <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script> <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script> <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script> <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script> <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" /></head>
<body><!-- Step 4: Create a div for the Map --><div id="mapContainer" style="width: 100vw; height: 50vw; align-self: center;"></div>
<script> // Step 5: Create an Instance of the H.service.Platform Object // Initialize the platform object var platform = new H.service.Platform({ apikey: 'YOUR_API_KEY_HERE' });
// Step 6: Initialize the Map // Obtain the default map types from the platform object var defaultLayers = platform.createDefaultLayers();
// Instantiate (and display) a map object var map = new H.Map( document.getElementById('mapContainer'), defaultLayers.vector.normal.map, { zoom: 12, center: {lat:34.05, lng:-118.24} }); // Step 7: Enable Map Interaction // Enable the event system on the map instance var mapEvents = new H.mapevents.MapEvents(map); // Instantiate the default behavior with mapEvents object var behavior = new H.mapevents.Behavior(mapEvents);
// Step 8: Add UI components // Create the default UI var ui = H.ui.UI.createDefault(map, defaultLayers);
// Bonus: Resize map window.addEventListener('resize', () => map.getViewPort().resize());
</script> </body></html>
Finally, this is how my map looks.
Create your map centered at your favorite location, and explore more possibilities with the Maps API for JavaScript. Happy Coding!
Mohini Todkari
Sr. Developer Evangelist
Share article
Why sign up:
Latest offers and discounts
Tailored content delivered weekly
Exclusive events
One click to unsubscribe