JSFiddle - React, Tailwind, and code Playground

by jipexu

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol-geocoder@latest/dist/ol-geocoder.min.css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ol-geocoder"></script>
<div id="map"></div>

CSS

html, body, #map {
    width:100%;
    height:100%;
    overflow:hidden;
}
body {
    font: 1em/1.5 BlinkMacSystemFont,-apple-system,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif;
    color: #222;
    font-weight: 400;
}

#map {
    position:absolute;
    z-index:1;
    top:0; bottom:0;
}
.ol-control button { 
    background-color: rgba(40, 40, 40, 0.8) !important;
}
.ol-control button:hover { 
    background-color: rgba(40, 40, 40, 1) !important;
}

JavaScript

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

var vectorSource = new ol.source.Vector();
var vectorLayer = new ol.layer.Vector({	source: vectorSource });
map.addLayer(vectorLayer);

var geocoder = new Geocoder('nominatim', {
  provider: 'osm',
  lang: 'fr-FR', //en-US, fr-F
  placeholder: 'Search for ...',
  targetType: 'text-input',
  limit: 5,
  keepOpen: false
});
map.addControl(geocoder);
geocoder.on('addresschosen', function(evt){
  var feature = evt.feature,
      coord = evt.coordinate,
      address = evt.address;
  // some popup solution
  content.innerHTML = '<p>'+ address.formatted +'</p>';
  overlay.setPosition(coord);
});