1 | goog.require('ol.Map');
|
2 | goog.require('ol.View');
|
3 | goog.require('ol.layer.Tile');
|
4 | goog.require('ol.source.XYZ');
|
5 |
|
6 | var appId = 'kDm0Jq1K4Ak7Bwtn8uvk';
|
7 | var appCode = 'xnmvc4dKZrDfGlvQHXSvwQ';
|
8 | var hereLayers = [
|
9 | {
|
10 | base: 'base',
|
11 | type: 'maptile',
|
12 | scheme: 'normal.day',
|
13 | app_id: appId,
|
14 | app_code: appCode
|
15 | },
|
16 | {
|
17 | base: 'base',
|
18 | type: 'maptile',
|
19 | scheme: 'normal.day.transit',
|
20 | app_id: appId,
|
21 | app_code: appCode
|
22 | },
|
23 | {
|
24 | base: 'base',
|
25 | type: 'maptile',
|
26 | scheme: 'pedestrian.day',
|
27 | app_id: appId,
|
28 | app_code: appCode
|
29 | },
|
30 | {
|
31 | base: 'aerial',
|
32 | type: 'maptile',
|
33 | scheme: 'terrain.day',
|
34 | app_id: appId,
|
35 | app_code: appCode
|
36 | },
|
37 | {
|
38 | base: 'aerial',
|
39 | type: 'maptile',
|
40 | scheme: 'satellite.day',
|
41 | app_id: appId,
|
42 | app_code: appCode
|
43 | },
|
44 | {
|
45 | base: 'aerial',
|
46 | type: 'maptile',
|
47 | scheme: 'hybrid.day',
|
48 | app_id: appId,
|
49 | app_code: appCode
|
50 | }
|
51 | ];
|
52 | var urlTpl = 'https://{1-4}.{base}.maps.cit.api.here.com' +
|
53 | '/{type}/2.1/maptile/newest/{scheme}/{z}/{x}/{y}/256/png' +
|
54 | '?app_id={app_id}&app_code={app_code}';
|
55 | var layers = [];
|
56 | var i, ii;
|
57 | for (i = 0, ii = hereLayers.length; i < ii; ++i) {
|
58 | var layerDesc = hereLayers[i];
|
59 | layers.push(new ol.layer.Tile({
|
60 | visible: false,
|
61 | preload: Infinity,
|
62 | source: new ol.source.XYZ({
|
63 | url: createUrl(urlTpl, layerDesc),
|
64 | attributions: 'Map Tiles © ' + new Date().getFullYear() + ' ' +
|
65 | '<a href="http://developer.here.com">HERE</a>'
|
66 | })
|
67 | }));
|
68 | }
|
69 |
|
70 | var map = new ol.Map({
|
71 | layers: layers,
|
72 |
|
73 |
|
74 | loadTilesWhileInteracting: true,
|
75 | target: 'map',
|
76 | view: new ol.View({
|
77 | center: [921371.9389, 6358337.7609],
|
78 | zoom: 10
|
79 | })
|
80 | });
|
81 |
|
82 | function createUrl(tpl, layerDesc) {
|
83 | return tpl
|
84 | .replace('{base}', layerDesc.base)
|
85 | .replace('{type}', layerDesc.type)
|
86 | .replace('{scheme}', layerDesc.scheme)
|
87 | .replace('{app_id}', layerDesc.app_id)
|
88 | .replace('{app_code}', layerDesc.app_code);
|
89 | }
|
90 |
|
91 | var select = document.getElementById('layer-select');
|
92 | function onChange() {
|
93 | var scheme = select.value;
|
94 | for (var i = 0, ii = layers.length; i < ii; ++i) {
|
95 | layers[i].setVisible(hereLayers[i].scheme === scheme);
|
96 | }
|
97 | }
|
98 | select.addEventListener('change', onChange);
|
99 | onChange();
|