OpenLayers - OSM Reverse

by martinsrodrigoaugusto806

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/ol3/3.10.1/ol.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ol3/3.10.1/ol.min.css">
<script src="//cdn.rawgit.com/stefanpenner/es6-promise/master/dist/es6-promise.min.js"></script>
<script src="//cdn.polyfill.io/v2/polyfill.min.js?features=fetch"></script>
<div id="map"></div>
<div id="msg">Click to get Country name.</div>

CSS

html,
body,
#map {
  width: 100%;
  height: 100%;
  margin: 0;
}

#map {
  position: absolute;
  z-index: 5;
}

#msg {
  position: absolute;
  z-index: 10;
  left: 50%;
  transform: translate(-50%, 5px);
  background-color: rgba(40, 40, 40, .8);
  padding: 10px;
  color: #eee;
  width: 350px;
  text-align: center;
}

.ol-control button {
  background-color: rgba(40, 40, 40, 0.85) !important;
}

.ol-control button:hover {
  background-color: rgba(40, 40, 40, 1) !important;
}

JavaScript

var msg_el = document.getElementById('msg');
var url = 'https://nominatim.openstreetmap.org/reverse?format=json&lat={lat}&lon={lon}&addressdetails=1';

console.clear();

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

map.on('click', (evt) => {
  msg_el.innerHTML = 'Searching ...';
  var coord = to4326(evt.coordinate);
  var url_ = url.replace('{lon}', coord[0]).replace('{lat}', coord[1]);
  console.info(evt.coordinate, coord, url_);
  fetch(url_)
    .then(r => r.json())
    .then(json => {
      if (Object.keys(json).length) {
        msg_el.innerHTML = json.address.country;
      } else {
        msg_el.innerHTML = 'Couldn\'t get country name!';
      }
    });
});

function to4326(coord) {
  return ol.proj.transform([
    parseFloat(coord[0]), parseFloat(coord[1])
  ], 'EPSG:3857', 'EPSG:4326');
}