Tutorials / Learn How to Create Japanese-market Maps Using HERE JavaScript SDK
Last Updated: October 11, 2020

Introduction

Do you need to create a map for the Japanese market? Then you’re in the right place. In this tutorial, you will learn how to create a map using Maps API for JavaScript.

After going through this tutorial, you will have a working map focused on Japan.

Pre-Reqs.

To complete this tutorial, you will need an account with developer.here.com and access to Japan Market functionality. Please contact us for more information.

Create a HERE Map

Creating a map for the Japanese market is very similar to creating a map for the rest of the world. There are some slight adjustments that you will need to make, but the process is very similar.

The overall process is:

  • Create a HTML page
  • Load the HERE JavaScript Library and Initialize a map

Create an HTML Page with the Following Boilerplate HTML Code

Firstly, open up a new HTML file in your favorite editor. Next, copy and paste the following HTML boilerplate code.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Japan Map</title>
</head>
<body>
  
</body>
</html>

Now, you will need to add a map container with the following code. Place it inside the <body></body tag.

<div style="width: 100vw; height: 100vh;" id="mapContainer"></div>

In the code above, you create a simple div container for the map that will be 100% of the screen width and height.

Load the HERE JavaScript Libraries

To load the HERE libraries, add the following code between the <head> and </head> tags.

<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
<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>

Initialize Map

Now you need to initialize the map object by using your HERE API key:


var platform = new H.service.Platform({
  'apikey': '{YOUR_API_KEY}'
});

You will need a dedicated map style for the Japanese market to render the map.

The following map style is optimized for the display of the Japan data. This is a good starting point for your map. You can also personalize this file to make the map look and feel like your application. This will be covered in a separate tutorial.

https://js.api.here.com/v3/3.1/styles/omv/oslo/japan/normal.day.yaml

To get IPC data in Japan, you need to change the URL of VTS to core like below:

var omvService = platform.getOMVService({ path: "v2/vectortiles/core/mc" });

core includes everything from base and additional data for some countries (for example Japan). Access to this layer is determined by your contract. If you would like to get access to this layer, please contact your sales representative or contact us

Now, with the setup out of the way, load the HERE Map with the following code. Feel free to go through the comments in the below code base for your reference.

  // configure an OMV service to use the `core` endpoint
   var omvService = platform.getOMVService({ path: "v2/vectortiles/core/mc" });
   var baseUrl = "https://js.api.here.com/v3/3.1/styles/omv/oslo/japan/";
  
   // create a Japan specific style
   var style = new H.map.Style(`${baseUrl}normal.day.yaml`, baseUrl);
 
   // instantiate provider and layer for the base map
   var omvProvider = new H.service.omv.Provider(omvService, style);
   var omvlayer = new H.map.layer.TileLayer(omvProvider, { max: 22 ,dark:true});
 
   // instantiate (and display) a map:
   var map = new H.Map(document.getElementById("mapContainer"), omvlayer, {
     zoom: 17,
     center: { lat: 35.68026, lng: 139.76744 },
   });
  

To make the map “clickable” you need to flag it as interactive by adding the following code:

// add a resize listener to make sure that the map occupies the whole container
window.addEventListener("resize", () => map.getViewPort().resize());

// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

The final code should look like the following. If you are having trouble you can just copy and paste the following back into your HTML file and then open it in a browser. Be sure to replace the YOUR_API_KEY.

<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
   <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>
   <title>Japan Map</title>
 </head>
 <body>
   <div style="width: 100vw; height: 100vh;" id="mapContainer"></div>
 </body>
 <script>
   var platform = new H.service.Platform({
       'apikey': '{YOUR_API_KEY}' // Make sure to add your own API KEY
   });
    // configure an OMV service to use the `core` endpoint
   var omvService = platform.getOMVService({ path: "v2/vectortiles/core/mc" });
   var baseUrl = "https://js.api.here.com/v3/3.1/styles/omv/oslo/japan/";
  
   // create a Japan specific style
   var style = new H.map.Style(`${baseUrl}normal.day.yaml`, baseUrl);
 
   // instantiate provider and layer for the base map
   var omvProvider = new H.service.omv.Provider(omvService, style);
   var omvlayer = new H.map.layer.TileLayer(omvProvider, { max: 22 ,dark:true});
 
   // instantiate (and display) a map:
   var map = new H.Map(document.getElementById("mapContainer"), omvlayer, {
     zoom: 17,
     center: { lat: 35.68026, lng: 139.76744 },
   });
  
   // add a resize listener to make sure that the map occupies the whole container
   window.addEventListener("resize", () => map.getViewPort().resize());
 
   // MapEvents enables the event system
   // Behavior implements default interactions for pan/zoom (also on mobile touch environments)
   var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
 
  </script>
</html>

Once you have opened the created html file in the browser you should see a map as shown:

Japan Map

By using HERE Maps API for JavaScript you’re not limited to creating a map for Japan but also other Location Services providing like ‘Geocoding & Search’ (v7), Routing (v8), Fleet Telematics, etc. Explore more from this link for more info

Working Map

You can click on this link to quickly check out a working Japan Map demo.

Conclusion

By going through this tutorial, you have learned how to create a Japan specific map using HERE Maps API for JavaScript.

Next Steps

Are you a Google Map user? Check out our other tutorials to switch to HERE Maps