1 | goog.require('ol.Map');
|
2 | goog.require('ol.View');
|
3 | goog.require('ol.layer.Tile');
|
4 | goog.require('ol.proj');
|
5 | goog.require('ol.source.TileJSON');
|
6 |
|
7 | function transform(extent) {
|
8 | return ol.proj.transformExtent(extent, 'EPSG:4326', 'EPSG:3857');
|
9 | }
|
10 |
|
11 | var extents = {
|
12 | India: transform([68.17665, 7.96553, 97.40256, 35.49401]),
|
13 | Argentina: transform([-73.41544, -55.25, -53.62835, -21.83231]),
|
14 | Nigeria: transform([2.6917, 4.24059, 14.57718, 13.86592]),
|
15 | Sweden: transform([11.02737, 55.36174, 23.90338, 69.10625])
|
16 | };
|
17 |
|
18 | var base = new ol.layer.Tile({
|
19 | source: new ol.source.TileJSON({
|
20 | url: 'https://api.tiles.mapbox.com/v3/mapbox.world-light.json?secure',
|
21 | crossOrigin: 'anonymous'
|
22 | })
|
23 | });
|
24 |
|
25 | var overlay = new ol.layer.Tile({
|
26 | extent: extents.India,
|
27 | source: new ol.source.TileJSON({
|
28 | url: 'https://api.tiles.mapbox.com/v3/mapbox.world-black.json?secure',
|
29 | crossOrigin: 'anonymous'
|
30 | })
|
31 | });
|
32 |
|
33 | var map = new ol.Map({
|
34 | layers: [base, overlay],
|
35 | target: 'map',
|
36 | view: new ol.View({
|
37 | center: [0, 0],
|
38 | zoom: 1
|
39 | })
|
40 | });
|
41 |
|
42 | for (var key in extents) {
|
43 | document.getElementById(key).onclick = function(event) {
|
44 | overlay.setExtent(extents[event.target.id]);
|
45 | };
|
46 | }
|