JSFiddle - React, Tailwind, and code Playground

by Gabor Farkas

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.4.0/ol.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.4.0/ol.css">
<div id="map"></div>
<div id="map2"></div>

CSS

#map {
    width: 250px;
    height: 400px;
    float: left;
    padding-right: 10px !important;
}
#map2 {
    width: 250px;
    height: 400px;
    overflow: hidden;
}

JavaScript

var mousedown = false;

document.body.onmousedown = function () {
    mousedown = true
};
document.body.onmouseup = function () {
    mousedown = false
};

var map = new ol.Map({
    target: 'map',
    layers: [new ol.layer.Tile({
        source: new ol.source.OSM()
    })],
    view: new ol.View({
        center: [0, 0],
        zoom: 2,
        projection: 'EPSG:3857'
    })
});

var map2 = new ol.Map({
    target: 'map2',
    layers: [new ol.layer.Tile({
        source: new ol.source.OSM()
    })],
    view: new ol.View({
        center: [0, 0],
        zoom: 2,
        projection: 'EPSG:3857'
    })
});

map.getView().on('change:center', function (evt) {
    if (mousedown === true) {
        map2.getView().setCenter(map.getView().getCenter());
    } else {
        map2.beforeRender(ol.animation.pan({
            duration: 450,
            source: map2.getView().getCenter()
        }));
        map2.getView().setCenter(map.getView().getCenter());
    }
});