1 | goog.require('ol.Map');
|
2 | goog.require('ol.View');
|
3 | goog.require('ol.control');
|
4 | goog.require('ol.control.OverviewMap');
|
5 | goog.require('ol.interaction');
|
6 | goog.require('ol.interaction.DragRotateAndZoom');
|
7 | goog.require('ol.layer.Tile');
|
8 | goog.require('ol.source.OSM');
|
9 |
|
10 |
|
11 | var overviewMapControl = new ol.control.OverviewMap({
|
12 |
|
13 | className: 'ol-overviewmap ol-custom-overviewmap',
|
14 | layers: [
|
15 | new ol.layer.Tile({
|
16 | source: new ol.source.OSM({
|
17 | 'url': 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' +
|
18 | '?apikey=0e6fc415256d4fbb9b5166a718591d71'
|
19 | })
|
20 | })
|
21 | ],
|
22 | collapseLabel: '\u00BB',
|
23 | label: '\u00AB',
|
24 | collapsed: false
|
25 | });
|
26 |
|
27 | var map = new ol.Map({
|
28 | controls: ol.control.defaults().extend([
|
29 | overviewMapControl
|
30 | ]),
|
31 | interactions: ol.interaction.defaults().extend([
|
32 | new ol.interaction.DragRotateAndZoom()
|
33 | ]),
|
34 | layers: [
|
35 | new ol.layer.Tile({
|
36 | source: new ol.source.OSM()
|
37 | })
|
38 | ],
|
39 | target: 'map',
|
40 | view: new ol.View({
|
41 | center: [500000, 6000000],
|
42 | zoom: 7
|
43 | })
|
44 | });
|