JSFiddle - React, Tailwind, and code Playground

by Ömür Bilgili

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.4/ol-debug.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.4/ol-debug.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<html>

  <head>

  </head>

  <body>
    <div id=”map” class=”map”></div>
  </body>

</html>

CSS

.map {
  width: 100%;
  heigth: 100%;
}

JavaScript

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