wedataintelligence/implementing-bigdatacloud-s-free-client-side-reverse-geolocation-client-api.markdown

## implementing-bigdatacloud-s-free-client-side-reverse-geolocation-client-api.markdown

      
    Raw
  

              implementing-bigdatacloud-s-free-client-side-reverse-geolocation-client-api.markdown
            
          
    Implementing BigDataCloud's Free Client-side Reverse GeoLocation Client API

This example implements BigDataCloud's Reverse GeoCoding Client API along with HTML5's Geolocation API.
A Pen by BigDataCloud on CodePen.
License.

  
## index.html
<!DOCTYPE html>
<html>

<body>
    <p>Click the button to get Location.</p>
      <p>Try with and without providing a permission to access your location. </p>
    <button type="button" onclick="getLocation()">Share my Location</button>
    <pre id="json-result"></pre>
</body>
</html>

## script.js
    var result = document.getElementById("json-result");
    const Http = new XMLHttpRequest();
    function getLocation() {
        console.log("getLocation Called");
        var bdcApi = "https://api.bigdatacloud.net/data/reverse-geocode-client"

        navigator.geolocation.getCurrentPosition(
            (position) => {
                bdcApi = bdcApi
                    + "?latitude=" + position.coords.latitude
                    + "&longitude=" + position.coords.longitude
                    + "&localityLanguage=en";
                getApi(bdcApi);

            },
            (err) => { getApi(bdcApi); },
            {
                enableHighAccuracy: true,
                timeout: 5000,
                maximumAge: 0
            });
    }
    function getApi(bdcApi) {
        Http.open("GET", bdcApi);
        Http.send();
        Http.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                result.innerHTML = this.responseText;
            }
        };
    }

## style.css
p {font-family: Arial, Helvetica, sans-serif;}
	<!DOCTYPE html>
	<html>

	<body>
	<p>Click the button to get Location.</p>
	<p>Try with and without providing a permission to access your location. </p>
	<button type="button" onclick="getLocation()">Share my Location</button>
	<pre id="json-result"></pre>
	</body>
	</html>
	var result = document.getElementById("json-result");
	const Http = new XMLHttpRequest();
	function getLocation() {
	console.log("getLocation Called");
	var bdcApi = "https://api.bigdatacloud.net/data/reverse-geocode-client"

	navigator.geolocation.getCurrentPosition(
	(position) => {
	bdcApi = bdcApi
	+ "?latitude=" + position.coords.latitude
	+ "&longitude=" + position.coords.longitude
	+ "&localityLanguage=en";
	getApi(bdcApi);

	},
	(err) => { getApi(bdcApi); },
	{
	enableHighAccuracy: true,
	timeout: 5000,
	maximumAge: 0
	});
	}
	function getApi(bdcApi) {
	Http.open("GET", bdcApi);
	Http.send();
	Http.onreadystatechange = function () {
	if (this.readyState == 4 && this.status == 200) {
	result.innerHTML = this.responseText;
	}
	};
	}