openlayers-side-by-side

A Openlayers control to add a split screen to compare two map overlays.

!screencast example

Creates a new Openlayers Control for comparing two layers or collections of layers.

$3

| Method | Returns | Description |
| --------------- | ------- | ----------------------------------- |
| setLeftLayer | this | Set the layer(s) for the left side |
| setRightLayer | this | Set the layer(s) for the right side |
| remove | void | Close split screen |
| open | void | Open(Reopen) split screen |

$3

Add the script to the top of your page :

``html


`

Or if you are using browserify:

`js
import SDSControl from 'ol-side-by-side';
`
Then create a map, add two layers to it, and create the SideBySide control and add it to the map:

`js
import Map from 'ol/Map';
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM';
import XYZ from 'ol/source/XYZ'
import View from 'ol/View';

import 'ol/src/ol.css';

let layer1 = new TileLayer({
source: new OSM()
});
let key = 'your key from https://www.maptiler.com';
var attributions = '© MapTiler ' +
'© OpenStreetMap contributors';

let layer2 = new TileLayer({
source: new XYZ({
attributions: attributions,
url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
maxZoom: 20
})
});
let sds = new SDSControl();

let map = new Map({
layers: [layer1, layer2],
target: 'map',
view: new View({
center: [0, 0],
zoom: 0,
}),
controls:[
sds,
]
});

sds.open()
sds.setLeftLayer(layer2);
sds.setRightLayer(layer1);
``

$3

- The divider is not movable with IE.
- Probably won't work in IE8, but what does?

$3

Apache2