How can I ensure that my code properly handles the asynchronous nature of the Geolocation API callback in JavaScript?

Question

I am trying to get the end users location and if they are within a service area (poly) let them know. I have managed to get everything functional except the conditional for the output.

I am grabbing geolocation with the following:

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    console.log(`Latitude: ${latitude}, Longitude: ${longitude}`);
  });
} else {
  console.log("Geolocation is not supported by this browser.");
}

My poly detection is:

polygone=   [
    [43.163834,-84.134153],
    [43.163834,-83.420042],
]

function isPointInPoly(point, vs) {
    var x = point[0], y = point[1];
    var inside = false;
    for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) {
        var xi = vs[i][0], yi = vs[i][1];
        var xj = vs[j][0], yj = vs[j][1];
        var intersect = ((yi > y) != (yj > y))
            && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
        if (intersect) inside = !inside;
    }

    return inside;
};

What I have tried:

if(isPointInPoly([ $latitude, $longitude ], polygone) === true) {
    $("#output").html('Yup');
} else {
    $("#output").html('Nope');
}

I'm not sure if I'm going about this correctly, but I have looked up 'using const in conditionals' and a few other term, to no avail.

I set up a fiddle here as well.

In the end I would just like to show a message to users in the area, and another to users outside the area.

Answer 1

You should have to place the condition inside the function getting the ordinates.

Since const and let are block scoped, you cannot use outside the function.

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    console.log(`Latitude: ${latitude}, Longitude: ${longitude}`);

    if(isPointInPoly([ latitude, longitude ], polygone) === true) {
      $("#output").html('Yup');
    } else {
      $("#output").html('Nope');
    }

  });
} else {
  console.log("Geolocation is not supported by this browser.");
}