10-minute Web Map Application

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.

Step 1: HERE Platform Registration

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.

Step 2: Get API Keys

Create and register an app on HERE platform and create API Keys. I have described this in a previous blog.

Step 3: Load the SDK Library and Style Sheet

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.

Copied

        <!-- 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" />

Step 4: Create a div for the Map

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:

Copied

        <div id="mapContainer"></div>

We’ll add a few attributes to map like width, height, alignment, and background.

Copied

        <div id="mapContainer" style="width: 100vw; height: 50vw; align-self:center;"></div>

Step 5: Create an Instance of the H.service.Platform Object

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:

Copied

          <script>
      // Initialize the platform object 
      var platform = new H.service.Platform({ 
        apikey: 'YOUR_API_KEY_HERE' 
      }); 
  </script>

Step 6: Initialize the Map

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.

Copied

              // 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!

Step 7: Enable Map Interaction

This map is, however, static (you cannot zoom in or pan around). Let’s enable interactions by adding Map Events.

Copied

              // 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 controls (scale bar, zoom control and map selector) as:

Copied

              // Create the default UI 
      var ui = H.ui.UI.createDefault(map, defaultLayers);

Bonus

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:

Copied

              // Resize map 
      window.addEventListener('resize', () => map.getViewPort().resize());

The complete code

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!

Copied

        
<!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.