HERE Map Tile API

here-map-tile-api.markdown

HERE Map Tile API

Example of a map with map tiles from HERE.

A Pen by ims123 on CodePen.

License.

index.html

<div id="map" class="map"></div>
<select id="layer-select">
  <option value="normal.day" selected>Normal Day</option>
  <option value="normal.day.transit">Normal Day Transit</option>
  <option value="pedestrian.day">Pedestrian Day</option>
  <option value="terrain.day">Terrain Day</option>
  <option value="satellite.day">Satellite Day</option>
  <option value="hybrid.day">Hybrid Day</option>
</select>

script.js

var appId = 'Your HERE Maps appId from https://developer.here.com/';
var appCode = 'Your HERE Maps appCode from https://developer.here.com/';
var hereLayers = [
  {
    base: 'base',
    type: 'maptile',
    scheme: 'normal.day',
    app_id: appId,
    app_code: appCode
  },
  {
    base: 'base',
    type: 'maptile',
    scheme: 'normal.day.transit',
    app_id: appId,
    app_code: appCode
  },
  {
    base: 'base',
    type: 'maptile',
    scheme: 'pedestrian.day',
    app_id: appId,
    app_code: appCode
  },
  {
    base: 'aerial',
    type: 'maptile',
    scheme: 'terrain.day',
    app_id: appId,
    app_code: appCode
  },
  {
    base: 'aerial',
    type: 'maptile',
    scheme: 'satellite.day',
    app_id: appId,
    app_code: appCode
  },
  {
    base: 'aerial',
    type: 'maptile',
    scheme: 'hybrid.day',
    app_id: appId,
    app_code: appCode
  }
];
var urlTpl = 'https://{1-4}.{base}.maps.cit.api.here.com' +
  '/{type}/2.1/maptile/newest/{scheme}/{z}/{x}/{y}/256/png' +
  '?app_id={app_id}&app_code={app_code}';
var layers = [];
var i, ii;
for (i = 0, ii = hereLayers.length; i < ii; ++i) {
  var layerDesc = hereLayers[i];
  layers.push(new ol.layer.Tile({
    visible: false,
    preload: Infinity,
    source: new ol.source.XYZ({
      url: createUrl(urlTpl, layerDesc),
      attributions: 'Map Tiles &copy; ' + new Date().getFullYear() + ' ' +
        '<a href="http://developer.here.com">HERE</a>'
    })
  }));
}

var map = new ol.Map({
  layers: layers,
  // Improve user experience by loading tiles while dragging/zooming. Will make
  // zooming choppy on mobile or slow devices.
  loadTilesWhileInteracting: true,
  target: 'map',
  view: new ol.View({
    center: [921371.9389, 6358337.7609],
    zoom: 10
  })
});

function createUrl(tpl, layerDesc) {
  return tpl
    .replace('{base}', layerDesc.base)
    .replace('{type}', layerDesc.type)
    .replace('{scheme}', layerDesc.scheme)
    .replace('{app_id}', layerDesc.app_id)
    .replace('{app_code}', layerDesc.app_code);
}

var select = document.getElementById('layer-select');
function onChange() {
  var scheme = select.value;
  for (var i = 0, ii = layers.length; i < ii; ++i) {
    layers[i].setVisible(hereLayers[i].scheme === scheme);
  }
}
select.addEventListener('change', onChange);
onChange();

scripts

<script src="https://openlayers.org/en/v4.0.0/build/ol.js"></script>

styles

<link href="https://openlayers.org/en/v4.0.0/css/ol.css" rel="stylesheet" />