Skip to content

Instantly share code, notes, and snippets.

Last active May 10, 2022 11:45
  • Star 7 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Simple OpenLayers Reverse Geocoding sample with Nominatim
<!DOCTYPE html>
<meta charset=utf-8>
<meta name=description content="">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Reverse geocoding</title>
<link rel="stylesheet" href="" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src=",Element.prototype.classList,URL,fetch"></script>
<script src=""></script>
<style type="text/css">
#map {
height: 600px;
<div id="map" class="map"></div>
<input id="lon" type="number" step="0.000001">
<input id="lat" type="number" step="0.000001">
<button id="reversegeocoding" type=button name="button">Reverse geocode manually</button>
<span id="address">
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
function simpleReverseGeocoding(lon, lat) {
fetch('' + lon + '&lat=' + lat).then(function(response) {
return response.json();
}).then(function(json) {
document.getElementById('address').innerHTML = json.display_name;
map.on('click', function(e) {
var coordinate = ol.proj.toLonLat(e.coordinate).map(function(val) {
return val.toFixed(6);
var lon = document.getElementById('lon').value = coordinate[0];
var lat = document.getElementById('lat').value = coordinate[1];
simpleReverseGeocoding(lon, lat);
document.getElementById('reversegeocoding').addEventListener('click', function(e) {
if (document.getElementById('lon').value && document.getElementById('lat').value) {
simpleReverseGeocoding(document.getElementById('lon').value, document.getElementById('lat').value);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment