1 | goog.require('ol.Map');
|
2 | goog.require('ol.View');
|
3 | goog.require('ol.layer.Tile');
|
4 | goog.require('ol.source.BingMaps');
|
5 |
|
6 |
|
7 | var styles = [
|
8 | 'Road',
|
9 | 'RoadOnDemand',
|
10 | 'Aerial',
|
11 | 'AerialWithLabels',
|
12 | 'collinsBart',
|
13 | 'ordnanceSurvey'
|
14 | ];
|
15 | var layers = [];
|
16 | var i, ii;
|
17 | for (i = 0, ii = styles.length; i < ii; ++i) {
|
18 | layers.push(new ol.layer.Tile({
|
19 | visible: false,
|
20 | preload: Infinity,
|
21 | source: new ol.source.BingMaps({
|
22 | key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
|
23 | imagerySet: styles[i]
|
24 |
|
25 |
|
26 |
|
27 | })
|
28 | }));
|
29 | }
|
30 | var map = new ol.Map({
|
31 | layers: layers,
|
32 |
|
33 |
|
34 | loadTilesWhileInteracting: true,
|
35 | target: 'map',
|
36 | view: new ol.View({
|
37 | center: [-6655.5402445057125, 6709968.258934638],
|
38 | zoom: 13
|
39 | })
|
40 | });
|
41 |
|
42 | var select = document.getElementById('layer-select');
|
43 | function onChange() {
|
44 | var style = select.value;
|
45 | for (var i = 0, ii = layers.length; i < ii; ++i) {
|
46 | layers[i].setVisible(styles[i] === style);
|
47 | }
|
48 | }
|
49 | select.addEventListener('change', onChange);
|
50 | onChange();
|