JSFiddle - React, Tailwind, and code Playground

by Devendra Mani

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/build/ol.js"></script>
<h2>My Map</h2>
<div id="map" class="map"></div>

CSS

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

JavaScript

var layers = [
 /* new ol.layer.Tile({
    source: new ol.source.OSM()
  }), */
  new ol.layer.Tile({
   // extent: [-13884991, 2870341, -7455066, 6338219],
    source: new ol.source.TileWMS({
      url: 'https://bhuvan-vec1.nrsc.gov.in/bhuvan/gwc/service/wms/',
      params: {'LAYERS': 'india3', 'TILED': false},
      serverType: 'geoserver',
      // Countries have transparency, so do not fade tiles:
      transition: 1
    })
  })
];
var map = new ol.Map({
  layers: layers,
  target: 'map',
  view: new ol.View({
    center: [20.5937, 78.9629],
    zoom: 6
  })
});