Merge pull request #5640 from chrismayer/here-example

Add example for usage of HERE Map Tile API

examples/here-maps.html

@@ -0,0 +1,21 @@
+---
+layout: example.html
+title: HERE Map Tile API
+shortdesc: Example of a map with map tiles from HERE.
+docs: >
+  <p><a href="https://developer.here.com/rest-apis/documentation/enterprise-map-tile">HERE Map Tile API</a> used with <code>ol.source.XYZ</code>.</p>
+  <p>Be sure to respect the <a href="https://legal.here.com/en/terms/serviceterms/us/">HERE Service Terms</a> when using their tile API.</p>
+tags: "here, here-maps, here-tile-api"
+cloak:
+  a2qhegvZZFIuJDkkqjhQ: Your HERE Maps appId from https://developer.here.com/
+  lPJ3iaFLJDhD8fIAyU582A: Your HERE Maps appCode from https://developer.here.com/
+---
+<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>

examples/here-maps.js

@@ -0,0 +1,100 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.XYZ');
+
+var appId = 'a2qhegvZZFIuJDkkqjhQ';
+var appCode = 'lPJ3iaFLJDhD8fIAyU582A';
+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; 2016 ' +
+        '<a href="http://developer.here.com">HERE</a>'
+    })
+  }));
+}
+
+var map = new ol.Map({
+  layers: layers,
+  renderer: common.getRendererFromQueryString(),
+  // 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();