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.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/src/ol-layerswitcher.css">
<script src="https://unpkg.com/[email protected]"></script>
<div id="map" class="map"></div>

CSS

body,
html {
  width: 100%;
  heigth: 100%;
}

.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({
    title:"OpenStreetMap",
      source: new ol.source.OSM()
    })
  ]
});
map.addControl(new ol.control.LayerSwitcher());