ad62739a6e
In addition to using const and let, this also upgrades our linter config and removes lint (mostly whitespace).
52 lines
1.2 KiB
JavaScript
52 lines
1.2 KiB
JavaScript
import Map from '../src/ol/Map.js';
|
|
import View from '../src/ol/View.js';
|
|
import {defaults as defaultControls} from '../src/ol/control.js';
|
|
import TileLayer from '../src/ol/layer/Tile.js';
|
|
import BingMaps from '../src/ol/source/BingMaps.js';
|
|
import OSM from '../src/ol/source/OSM.js';
|
|
|
|
const osm = new TileLayer({
|
|
source: new OSM()
|
|
});
|
|
const bing = new TileLayer({
|
|
source: new BingMaps({
|
|
key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
|
|
imagerySet: 'Aerial'
|
|
})
|
|
});
|
|
|
|
const map = new Map({
|
|
layers: [osm, bing],
|
|
target: 'map',
|
|
controls: defaultControls({
|
|
attributionOptions: {
|
|
collapsible: false
|
|
}
|
|
}),
|
|
view: new View({
|
|
center: [0, 0],
|
|
zoom: 2
|
|
})
|
|
});
|
|
|
|
const swipe = document.getElementById('swipe');
|
|
|
|
bing.on('precompose', function(event) {
|
|
const ctx = event.context;
|
|
const width = ctx.canvas.width * (swipe.value / 100);
|
|
|
|
ctx.save();
|
|
ctx.beginPath();
|
|
ctx.rect(width, 0, ctx.canvas.width - width, ctx.canvas.height);
|
|
ctx.clip();
|
|
});
|
|
|
|
bing.on('postcompose', function(event) {
|
|
const ctx = event.context;
|
|
ctx.restore();
|
|
});
|
|
|
|
swipe.addEventListener('input', function() {
|
|
map.render();
|
|
}, false);
|