Maps API for Javascript

China specific
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 and terrain), each containing a set of named layers (map, base, xbase, traffic, 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 terrain
transit N/A

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().

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. 
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(
  { 'style': 'fleet' });
// Set the new fleet style layer as a base layer on the map:

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


The image below shows the result.

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