Get Started with Japan Data

This section shows how to start using the HERE Maps API for JavaScript with the Japan specific data and map style. Access to this data is determined by the contract of the user. If you would like to get access to this layer, please contact your sales representative or contact us.

Use Case

Sections below follow the steps of the Get Started chapter but additionally describe how to:

  1. Configure the JavaScript API to call the "core" layer of the Vector Tile API
  2. Fetch the map style that works best with the Japan data.
  3. Display a route within Japan.

Load the API Code Libraries

There are no changes in how the JavaScript API is included on the page, here is the complete <head> element that loads the core and service modules and ensures optimum performance on mobile devices.

<!DOCTYPE html>
  <html>
    <head>
      ...
      <meta name="viewport" content="initial-scale=1.0,
        width=device-width" />
      <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"
        type="text/javascript" charset="utf-8"></script>
      <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"
        type="text/javascript" charset="utf-8"></script>
      ...
    </head>
    <body>
      <div style="width: 640px; height: 480px" id="mapContainer"></div>

Initialize Communication with Back-End Services

Initialize the Platform object normally by passing it the API Key:

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

Initialize the Map

  1. Create an instance of the Vector Tile Service object that is pre-configured to use the core endpoint that provides the Japan data.
  2. Create a layer that uses the map style optimised for the display of the Japan data. The style can be adjusted with the help of Map Customization Tool.
  3. Instantiate an H.Map object, specifying:
    • the map container element
    • the layer created in the previous step
    • the zoom level at which to display the map
    • the geographic coordinates of the point on which to center the map

// configure an OMV service to use the `core` enpoint
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 basemap
var omvProvider = new H.service.omv.Provider(omvService, style);
var omvlayer = new H.map.layer.TileLayer(omvProvider, {max: 22});

// instantiate (and display) a map:
var map = new H.Map(
    document.getElementById('mapContainer'),
    omvlayer,
    {
      zoom: 17,
      center: {lat: 35.68026, lng: 139.76744}
    });

The implementation displays the following map image:

A basic non-interactive map
Figure 1. A basic non-interactive map

Geocoding and Routing

In order to use the Geocoding and Search and Routing API v8 with the Japan data no further adjustments needed.

The following example demonstrates how to geocode two points in the Tokyo area and calculate the route between them. The snippet below:

  • geocodes start and finish point of the route.
  • defines the routing parameters and the routing callback that parses the response and displays the route polyline.
  • instantiates the routing service and calculates the route
let origin;
let destination;

let onError = (error) => {
  alert(error.message);
}

// create an instance of the routing service and make a request
let router = platform.getRoutingService(null, 8);

// Define a callback function to process the routing response:
let onResult = function(result) {
  // ensure that at least one route was found
  if (result.routes.length) {
    result.routes[0].sections.forEach((section) => {
         // Create a linestring to use as a point source for the route line
        let linestring = H.geo.LineString.fromFlexiblePolyline(section.polyline);

        // Create a polyline to display the route:
        let routeLine = new H.map.Polyline(linestring, {
          style: { strokeColor: 'blue', lineWidth: 3 }
        });

        // Create a marker for the start point:
        let startMarker = new H.map.Marker(section.departure.place.location);

        // Create a marker for the end point:
        let endMarker = new H.map.Marker(section.arrival.place.location);

        // Add the route polyline and the two markers to the map:
        map.addObjects([routeLine, startMarker, endMarker]);

        // Set the map's viewport to make the whole route visible:
        map.getViewModel().setLookAtData({bounds: routeLine.getBoundingBox()});
    });
  }
};

let routingParameters = {
  'transportMode': 'car',
  // Include the route shape in the response
  'return': 'polyline'
};

// Define a callback that calculates the route
let calculateRoute = () => {
  // Make sure that both destination and origin are present
  if (!origin || !destination) return;

  // Add origin and destination to the routing parameters
  routingParameters.origin = origin;
  routingParameters.destination = destination;

  router.calculateRoute(routingParameters, onResult, onError);
}

// get the instance of the Search service
var service = platform.getSearchService();

// geocode origin point
service.geocode({
  q: '東京都中央区佃１‐１１‐８'
}, (result) => {
  origin = result.items[0].position.lat + ',' + result.items[0].position.lng;
  calculateRoute();
}, onError);

// geocode a destination point
service.geocode({
  q: '東京都千代田区丸の内１‐９'
}, (result) => {
  destination = result.items[0].position.lat + ',' + result.items[0].position.lng;
  calculateRoute();
}, onError)

The picture below demonstrates the result of the routing request from the code above.

Map with the Route
Figure 2. Map with the Route

results matching ""

    No results matching ""