JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
<div id="map" class="map"></div>
<div id="log"></div>

CSS

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

.map {
  height: 90%;
  width: 100%;
}

JavaScript

var polyFeature = new ol.Feature({
  geometry: new ol.geom.Point([7.129808, 50.618671]),
  projection: 'EPSG:4326'
});

//Layers
var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [polyFeature]
  })
});
var osmLayer = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var view = new ol.View({
  projection: 'EPSG:4326',
  zoom: 18
});
view.setCenter([7.128499, 50.617803]);


var map = new ol.Map({
  target: 'map',
  view: view,
  layers: [osmLayer, vectorLayer]
});
map.once('postrender', function(event) {
  var geometry = polyFeature.getGeometry();
  var coordinate = geometry.getCoordinates();
  var pixel1 = map.getPixelFromCoordinate(coordinate);

  var element = document.getElementById("log");
  element.innerText = pixel1;
});
map.setView(view);