Reverse Geocoding with OpenLayers

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://unpkg.com/ol@10.10.0/ol.css" />
<script src="https://unpkg.com/ol@10.10.0/dist/ol.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100%; height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<div id="popup" style="background:#fff;padding:10px;border-radius:4px;border:1px solid #ccc;max-width:250px;font-size:13px;display:none;"></div>

<script>
var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', attributions: '&copy; <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) })
  ],
  view: new ol.View({ center: ol.proj.fromLonLat([2.3522, 48.8566]), zoom: 13 })
});
var popupEl = document.getElementById('popup');
var overlay = new ol.Overlay({ element: popupEl, positioning: 'bottom-center', offset: [0, -5] });
map.addOverlay(overlay);
map.on('click', function(evt) {
  var lonlat = ol.proj.toLonLat(evt.coordinate);
  popupEl.style.display = 'block';
  popupEl.textContent = 'Loading...';
  overlay.setPosition(evt.coordinate);
  fetch('https://api.maptiler.com/geocoding/' + lonlat[0].toFixed(6) + ',' + lonlat[1].toFixed(6) + '.json?key=YOUR_MAPTILER_KEY')
    .then(function(r) { return r.json(); })
    .then(function(data) {
      popupEl.textContent = data.features.length ? data.features[0].place_name : 'No address found';
    })
    .catch(function() { popupEl.textContent = 'Error fetching address'; });
});

</script>
</body>
</html>

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { fromLonLat } from 'ol/proj';
import 'ol/ol.css';

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', attributions: '&copy; <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) })
  ],
  view: new ol.View({ center: ol.proj.fromLonLat([2.3522, 48.8566]), zoom: 13 })
});
var popupEl = document.getElementById('popup');
var overlay = new ol.Overlay({ element: popupEl, positioning: 'bottom-center', offset: [0, -5] });
map.addOverlay(overlay);
map.on('click', function(evt) {
  var lonlat = ol.proj.toLonLat(evt.coordinate);
  popupEl.style.display = 'block';
  popupEl.textContent = 'Loading...';
  overlay.setPosition(evt.coordinate);
  fetch('https://api.maptiler.com/geocoding/' + lonlat[0].toFixed(6) + ',' + lonlat[1].toFixed(6) + '.json?key=YOUR_MAPTILER_KEY')
    .then(function(r) { return r.json(); })
    .then(function(data) {
      popupEl.textContent = data.features.length ? data.features[0].place_name : 'No address found';
    })
    .catch(function() { popupEl.textContent = 'Error fetching address'; });
});