JSFiddle - React, Tailwind, and code Playground

by xerxesnoble

HTML

<link rel="stylesheet" href="http://openlayers.org/en/v3.14.2/css/ol.css">
<script src="http://openlayers.org/en/v3.14.2/build/ol.js"></script>
<div id="map" class="map"></div>

JavaScript

var raster = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var wkt = 'POLYGON((10.689 -25.092, 34.595 ' +
    '-20.170, 38.814 -35.639, 13.502 ' +
    '-39.155, 10.689 -25.092))';

var format = new ol.format.WKT();

var feature = format.readFeature(wkt, {
  dataProjection: 'EPSG:4326',
  featureProjection: 'EPSG:3857'
});

var vector = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [feature]
  })
});

var map = new ol.Map({
  layers: [raster, vector],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 0
  })
});


setTimeout(function(){
	var pan = ol.animation.pan({
    diration: 500,
    source: map.getView().getCenter()
  });
  
  var zoom = ol.animation.zoom({
    duration:500,
    resolution: map.getView().getResolution()
  })
  
  map.beforeRender(pan, zoom)

	var extent = feature.getGeometry().getExtent()
	map.getView().fit(extent, map.getSize(), { 
  	padding:[0,0,0,0]
  })
}, 2000)