CODEWITHSUNDEEP
javascriptgeocodingreverse-geocoding
Ghuleh
Ghuleh

Reputation: 27

Dynamically changing lat and lon in my LocationIQ url request

I'm working on a website for my internship and I need to reverse geocode the lat and long coordinates of visitors, but I can't integrate those coordinates to my url string who request the reverse goecoding from a service called LocationIQ.

I've already tried to concatenate the plain variables into the string, I also tried to getElementById but it doesn't work either and then I called my callback() function but it still errors. For the notice I'm working with the given examples from http://geoip-db.com/ for the lat and long data and with https://locationiq.com/docs#forward-geocoding for the reverse geocoding. Probably the examples don't like each other but since I'm a newbie in web dev I need a little help :)

<script>

var country = document.getElementById('country');
var latitude = document.getElementById('latitude');
var longitude = document.getElementById('longitude');
var ip = document.getElementById('ipv4');

function callback(data)
{
    country.innerHTML = data.country_name;
    latitude.innerHTML = data.latitude;
    longitude.innerHTML = data.longitude;
    ip.innerHTML = data.IPv4;
}

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://geoip-db.com/jsonp';
var h = document.getElementsByTagName('script')[0];
h.parentNode.insertBefore(script, h);

    var settings = {
    "async": true,
    "crossDomain": true,
    "url": "https://us1.locationiq.com/v1/reverse.php?key=be7dfdc7a8184f&lat=" + callback.latitude() + "&lon=" + callback.longitude() + "&format=json",
    "method": "GET"
     }

    $.ajax(settings).done(function (response) {
    console.log(response);
    });
</script>

Either it errors to the latitude call, or the request returns me "Invalid request". I want it to output all the reversed data into a json file like this:

{ "place_id": "26693344", "licence": "© LocationIQ.com CC BY 4.0, Data © OpenStreetMap contributors, ODbL 1.0", "osm_type": "node", "osm_id": "2525193585", "lat": "-37.870662", "lon": "144.9803321", "display_name": "Imbiss 25, Blessington Street, St Kilda, City of Port Phillip, Greater Melbourne, Victoria, 3182, Australia", "address": { "cafe": "Imbiss 25", "road": "Blessington Street", "suburb": "St Kilda", "county": "City of Port Phillip", "region": "Greater Melbourne", "state": "Victoria", "postcode": "3182", "country": "Australia", "country_code": "au" }, "boundingbox": [ "-37.870762", "-37.870562", "144.9802321", "144.9804321" ] }

Upvotes: 2

Views: 1319

Answers (1)

Eric Chen
Eric Chen

Reputation: 21

I have reviewed your code and found 2 mistakes.

  1. You don't have jquery included so you can't use $.
  2. And you shouldn't make locationiq api call outside of callback function but inside your function.

Here's my full code and it works. Please let me know if you have any questions.

<!DOCTYPE html>
<html>
  <head>
    <title>GEOIP DB - javascript example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body>
    <div>Country: <span id="country"></span></div>
    <div>Latitude: <span id="latitude"></span></div>
    <div>Longitude: <span id="longitude"></span></div>
    <div>IP: <span id="ipv4"></span></div>
    <script>
      var country = document.getElementById("country");
      var latitude = document.getElementById("latitude");
      var longitude = document.getElementById("longitude");
      var ip = document.getElementById("ipv4");

      function callback(data) {
        country.innerHTML = data.country_name;
        latitude.innerHTML = data.latitude;
        longitude.innerHTML = data.longitude;
        ip.innerHTML = data.IPv4;

        // reverse geocoding
        var settings = {
          async: true,
          crossDomain: true,
          url:
            "https://us1.locationiq.com/v1/reverse.php?key=be7dfdc7a8184f&lat=" +
            data.latitude +
            "&lon=" +
            data.longitude +
            "&format=json",
          method: "GET",
        };

        $.ajax(settings).done(function(response) {
          console.log(response);
        });
      }

      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "https://geoip-db.com/jsonp";
      var h = document.getElementsByTagName("script")[0];
      h.parentNode.insertBefore(script, h);
    </script>
  </body>
</html>

Upvotes: 1

Related Questions