Maps API for JavaScript Developer's Guide

Map Types

The underlying service to the HERE Maps API for JavaScript is the HERE Map Tile API, which provides map images in a large choice of styles. In this respect, the Maps API for JavaScript acts as a flexible access facilitator, giving you, as a developer, not only a means to retrieve the basic map tile sets, but also the full selection of all the possible map styles provided by the HERE Map Tile API.

Basic map types

To set the map style for a map easily, you can use the method createDefaultLayers() defined on the Platform class. The method returns an object that holds three different map types (normal, satellite and terrain), each containing a set of named layers (map, base, xbase, traffic, panorama, labels). The named layers represent different styles of the map type and can be directly assigned as base layers to the map.

The table below shows a list of the default map layers for each map type:

Table 1. Default map types provided by the HERE Maps API for JavaScript
  <---------------------------------------------- Map Type ---------------------------------------------->
Layer normal satellite terrain
map
traffic
panorama
transit N/A N/A
xbase
base
labels

Additionally the default map types object holds venues and traffic incidents overlays shown below

Table 2. Additional overlays provided by the HERE Maps API for JavaScript
incidents venues

A map type layer can be referenced, using the standard JavaScript dot notation. For example, to indicate a transit map (layer) on a terrain map (type), you can write layers.terrain.transit, where layers is the name of a variable holding the return value from Platform.createDefaultLayers().

The following example brings together what we have said about map types. It first obtains an object holding the default (map types and) layers, uses them to initialize a Map instance and, finally, changes the map base layer by calling the method setBaseLayer() on the map object.

// Create a Platform object (one per application):
var platform = new H.service.Platform({ 'app_id': '{YOUR_APP_ID}',
        'app_code': '{YOUR_APP_CODE}' });

// Get an object containing the default map layers:
var defaultLayers = platform.createDefaultLayers();

// Instantiate the map using the normal map as the base layer:
var map = new H.Map(document.getElementById('mapContainer',
      defaultLayers.normal.map);

// Change the map base layer to the satellite map with traffic information:
map.setBaseLayer(defaultLayers.satellite.traffic);

The image below shows the effect of executing this code.

Figure 1. The map after changing the base layer

Custom Map Styles

In addition to the basic map styles/layers, the HERE Map Tile API provides a number of styles that were created to meet the requirements of specific customers. These include:

  • alps (the legacy map style used before July 2014)
  • fleet (a map style optimized for fleet tracking display)

To obtain a map tile in any one of these styles, you need to access the HERE Map Tile API via an instance of MapTileService, specifying the custom style.

The code below is an example that demonstrates how to get a fleet map. It creates a layer object and uses that object to request a map tile (layer) in fleet style. The last line sets the newly obtained map layer as the base layer on the map object.

// Create a MapTileService instance to request base tiles (i.e. 
// base.map.api.here.com):
var mapTileService = platform.getMapTileService({ 'type': 'base' });

// Create a tile layer which requests map tiles with an additional 'style'
// URL parameter set to 'fleet':
var fleetStyleLayer = mapTileService.createTileLayer(
  'maptile', 
  'normal.day', 
  256, 
  'png8', 
  { 'style': 'fleet' });
  
// Set the new fleet style layer as a base layer on the map:
map.setBaseLayer(fleetStyleLayer);

The equivalent direct request to the Map Tile API, looks like this:

http://[1-4].base.map.api.here.com/maptile/2.1/maptile/newest/normal.day/[z]/[x]/[y]/256/png8?style=fleet

The image below shows the result.

Figure 2. The map after changing the base layer to the fleet style layer

You cannot use this account to purchase a commercial plan on Developer Portal, as it is already associated to plans with different payment methods.

To purchase a commercial plan on Developer Portal, please register for or sign in with a different HERE Account.

Something took longer than expected.

The project should be available soon under your projects page.

Sorry, our services are not available in this region.

Something seems to have gone wrong. Please try again later.

We've detected that your account is set to Australian Dollars (AUD).
Unfortunately, we do not offer checkouts in AUD anymore.
You can continue using your current plan as normal, but to subscribe to one of our new plans,
please register for a new HERE account or contact us for billing questions on selfservesupport@here.com.