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: 200px;
    height: 400px;
    float: left;
    padding-right: 10px !important;
}
#map2 {
    width: 200px;
    height: 400px;
    overflow: hidden;
}

JavaScript

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

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

map.getView().on('change:center', function(e){console.log(e)});