open layer 4 find address from onclick coordinates - openlayers-3

Question

i am new to open layers, i need to know that is it good to use openstreetmap link to get country Name from given lat,long(for commercial purpose) although it is free but is it a good practice. This is the link which provides country Name in JSON format when latitude and longitude passed as parameters. :-
https://nominatim.openstreetmap.org/reverse?format=json&lat=22.3444&lon=74.123123&limit=1

Answer 1

The div element where is your map: (must be placed into the of the html file)
<div id="id_map" style="height: 100%;"></div>
OpenLayers Javascript code of the map:
// URL of the TILE SERVER
const url_carto_cdn = 'http://{1-4}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png';
// Our map
const map = new ol.Map({
target: document.getElementById('id_map'),
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({url: url_carto_cdn})
})
],
view: new ol.View({
// Centered in Europe
center: ol.proj.fromLonLat([0, 30]),
zoom: 4
})
});
The Javascript function who sends the request Nominatim to get the address when you click on the map:
function httpGet(url, callback_function) {
const getRequest = new XMLHttpRequest();
getRequest.open("get", url, true);
getRequest.addEventListener("readystatechange", function () {
// IF RESPONSE is GOOD
if (getRequest.readyState === 4 && getRequest.status === 200) {
// Callback for making stuff with the Nominatim response address
callback_function(getRequest.responseText);
}
});
// Send the request
getRequest.send();
}
The Javascript of the Mouse-Click event:
// EVENT ON MOUSE CLICK
map.on('click', function (evt) {
// Coords of click is evt.coordinate
console.log("evt.coordinate: " + evt.coordinate);
// You must transform the coordinates because evt.coordinate
// is by default Web Mercator (EPSG:3857)
// and not "usual coords" (EPSG:4326)
const coords_click = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
console.log("Mouse Click coordinates: " + coords_click);
// MOUSE CLICK: Longitude
const lon = coords_click[0];
// MOUSE CLICK: Latitude
const lat = coords_click[1];
// DATA to put in NOMINATIM URL to find address of mouse click location
const data_for_url = {lon: lon, lat: lat, format: "json", limit: 1};
// ENCODED DATA for URL
const encoded_data = Object.keys(data_for_url).map(function (k) {
return encodeURIComponent(k) + '=' + encodeURIComponent(data_for_url[k])
}).join('&');
// FULL URL for searching address of mouse click
const url_nominatim = 'https://nominatim.openstreetmap.org/reverse?' + encoded_data;
console.log("URL Request NOMINATIM-Reverse: " + url_nominatim);
// GET URL REQUEST for ADDRESS
httpGet(url_nominatim, function (response_text) {
// JSON Data of the response to the request Nominatim
const data_json = JSON.parse(response_text);
// Longitude and latitude
const res_lon = data_json.lon;
const res_lat = data_json.lat;
// All the informations of the address are here
const res_address = data_json.address;
// Details depends on the location, country and places
// For example: in the desert, road or pedestrian is
// probably set to undefined because of none...
const address_display_name = data_json.display_name;
const address_country = res_address.country;
const address_country_code = res_address.country_code;
const address_postcode = res_address.postcode;
const address_state = res_address.state;
const address_town = res_address.town;
const address_city = res_address.city;
const address_city_district = res_address.city_district;
const address_suburb = res_address.suburb;
const address_neighbourhood = res_address.neighbourhood;
const address_footway = res_address.footway;
const address_house_number = res_address.house_number;
const address_pedestrian = res_address.pedestrian;
const address_road = res_address.road;
console.log("Longitude : " + res_lon);
console.log("Longitude : " + res_lat);
console.log("Name : " + address_display_name);
console.log("Country : " + address_country);
console.log("Count. Code : " + address_country_code);
console.log("Postcode : " + address_postcode);
console.log("State : " + address_state);
console.log("Town : " + address_town);
console.log("City : " + address_city);
console.log("City District: " + address_city_district);
console.log("Suburb : " + address_suburb);
console.log("Neighbourhood: " + address_neighbourhood);
console.log("Road : " + address_road);
console.log("Footway : " + address_footway);
console.log("Pedestrian : " + address_pedestrian);
console.log("House Number : " + address_house_number);
});
});
All the informations relative to the address near to the mouse click appears in the console log (F12 in Firefox).