JSFiddle - React, Tailwind, and code Playground

by oterral

HTML

<link rel="stylesheet" href="http://openlayers.org/en/v3.4.0/css/ol.css">
<script src="http://openlayers.org/en/v3.4.0/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4-src.js"></script>
<h2>My Map</h2>
<div id="map" class="map"></div>
<button onclick="window.to()"> Pan</button>

CSS

.map {
      height: 400px;
      width: 100%;
    }

JavaScript

var polyCoords = [], coords = "95.61,38.60 95.22,37.98 95.60,37.66 94.97,37.65".split(' ');
for (var i in coords) {
  polyCoords.push(ol.proj.transform(coords[i].split(','), 'EPSG:4326', 'EPSG:3857'));
}
var feature = new ol.Feature({geometry: new ol.geom.Polygon(polyCoords)})

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

var view = new ol.View({
          center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
          zoom: 4
        });
var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.MapQuest({layer: 'sat'})
          }), layer            
        ],
        view: view
      });
window.to = function() {
  var pan = ol.animation.pan({
    duration: 2000,
    source: /** @type {ol.Coordinate} */ (view.getCenter())
  });
  map.beforeRender(pan);

  var utm = "+proj=utm +zone=30";
  var wgs84 = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs";
  var coorx = 728404.43590;
  var coory = 4371594.36768;
  var lonlat= proj4(utm,wgs84,[coorx, coory]);        
  var center_pozo = ol.proj.transform([lonlat[0], lonlat[1]], 'EPSG:4326', 'EPSG:3857');
  view.setCenter(center_pozo);
}