JSFiddle - React, Tailwind, and code Playground

by grant

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
<div id="map">

</div>

JavaScript

var vectorSources = new ol.source.Vector();
var map = new ol.Map({
  target: map,
  layers: [
    new ol.layer.Tile({
      source: ol.source.OSM()
    }),
    new ol.layer.Vector({
      source: vectorSources
    })
  ],
  view: new ol.View({
    center: [0, 0],
    zoom: 12
  })
});

var feature1 = new ol.Feature({
  geometry: new ol.geom.Point(coords)
});
vectorSources.addFeature(feature1);
var feature2 = new ol.Feature({
  geometry: new ol.geom.Point(coords)
});
vectorSources.addFeature(feature2);
map.getView().fitExtent(vectorSources.getExtent(), map.getSize());