@@ -1,21 +0,0 @@
|
||||
---
|
||||
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" target="_blank">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/" target="_blank">HERE Service Terms</a> when using their tile API.</p>
|
||||
tags: "here, here-maps, here-tile-api"
|
||||
cloak:
|
||||
- key: x13yMxvFSo8FIKFDDTnQaJ57Gakt11ZaIyqIctoSD3Y
|
||||
value: Your HERE Maps API key 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>
|
||||
@@ -1,94 +0,0 @@
|
||||
import Map from '../src/ol/Map.js';
|
||||
import TileLayer from '../src/ol/layer/Tile.js';
|
||||
import View from '../src/ol/View.js';
|
||||
import XYZ from '../src/ol/source/XYZ.js';
|
||||
|
||||
const apiKey = 'x13yMxvFSo8FIKFDDTnQaJ57Gakt11ZaIyqIctoSD3Y';
|
||||
const hereLayers = [
|
||||
{
|
||||
base: 'base',
|
||||
type: 'maptile',
|
||||
scheme: 'normal.day',
|
||||
apiKey: apiKey,
|
||||
},
|
||||
{
|
||||
base: 'base',
|
||||
type: 'maptile',
|
||||
scheme: 'normal.day.transit',
|
||||
apiKey: apiKey,
|
||||
},
|
||||
{
|
||||
base: 'base',
|
||||
type: 'maptile',
|
||||
scheme: 'pedestrian.day',
|
||||
apiKey: apiKey,
|
||||
},
|
||||
{
|
||||
base: 'aerial',
|
||||
type: 'maptile',
|
||||
scheme: 'terrain.day',
|
||||
apiKey: apiKey,
|
||||
},
|
||||
{
|
||||
base: 'aerial',
|
||||
type: 'maptile',
|
||||
scheme: 'satellite.day',
|
||||
apiKey: apiKey,
|
||||
},
|
||||
{
|
||||
base: 'aerial',
|
||||
type: 'maptile',
|
||||
scheme: 'hybrid.day',
|
||||
apiKey: apiKey,
|
||||
},
|
||||
];
|
||||
const urlTpl =
|
||||
'https://{1-4}.{base}.maps.ls.hereapi.com' +
|
||||
'/{type}/2.1/maptile/newest/{scheme}/{z}/{x}/{y}/256/png' +
|
||||
'?apiKey={apiKey}';
|
||||
const layers = [];
|
||||
let i, ii;
|
||||
for (i = 0, ii = hereLayers.length; i < ii; ++i) {
|
||||
const layerDesc = hereLayers[i];
|
||||
layers.push(
|
||||
new TileLayer({
|
||||
visible: false,
|
||||
preload: Infinity,
|
||||
source: new XYZ({
|
||||
url: createUrl(urlTpl, layerDesc),
|
||||
attributions:
|
||||
'Map Tiles © ' +
|
||||
new Date().getFullYear() +
|
||||
' ' +
|
||||
'<a href="https://developer.here.com/" target="_blank">HERE</a>',
|
||||
}),
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
const map = new Map({
|
||||
layers: layers,
|
||||
target: 'map',
|
||||
view: new 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('{apiKey}', layerDesc.apiKey);
|
||||
}
|
||||
|
||||
const select = document.getElementById('layer-select');
|
||||
function onChange() {
|
||||
const scheme = select.value;
|
||||
for (let i = 0, ii = layers.length; i < ii; ++i) {
|
||||
layers[i].setVisible(hereLayers[i].scheme === scheme);
|
||||
}
|
||||
}
|
||||
select.addEventListener('change', onChange);
|
||||
onChange();
|
||||
Reference in New Issue
Block a user