Javascript Function & Variable Scope using geolocation

Question

I'm trying to use geolocation to get my current position, which inserts the lat and lon into the centre point of a map. I know that geolocation is asynchronous, so I have to get that value, then call another function for this to pass forward. I am not getting the object mymap created for some reason.

<script>

function foundLocation(pos) {
    setMyLocation(pos.coords.latitude, pos.coords.longitude)
    };

function noLocation() {
    document.getElementById("warning").innerHTML = "Could not find your location";
    };

function setMyLocation(myLat, myLon) {
    L.marker([ myLat, myLon ], {icon: homeIcon}).bindPopup("You Are Here").addTo(coolPlaces);
    var mymap = L.map('mapid', {
        center: [ myLat, myLon ],
        minZoom: 2,
        maxZoom: 18,
        zoom: 15,
        layers: [mymarkers]
        });
    };

navigator.geolocation.getCurrentPosition(foundLocation, noLocation);

<snip other JS irrelevant stuff>

</script>

Is there a way I can get those two variables out of the function and create the mymap object? I'm not well versed in JS and its restrictions.

The above code results in no map generated. I have to take mymap outside the geolocation functions for this to happen. The issue is that I don't know how to send myLat and myLon outside to that declaration.

restrictions? My guess is not understanding asynchronous calls. https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron The callback method is what you NEED to use to trigger the next steps. So your logic needs to be set up so you can call it. Just like how you wait for the pizza to be delivered to your house, you need to set up your code to wait for the doorbell to ring. — epascarello, Aug 26 '19 at 15:03
What exactly is happening as opposed to what's supposed to happen? Can you create a [mre] that demonstrates the problem? — , Aug 26 '19 at 15:04
@GrafiCode Originally that's what I have, but I couldn't find a way of getting myLat and myLon (sent by foundLocation) variables outside of the function. That's why I brought the mymap declaration inside setMyLocation. — Rich_F, Aug 26 '19 at 15:17
@epascarello The asynchronous call isn't the issue. It's passing the captured variables outside the function to another declaration. — Rich_F, Aug 26 '19 at 15:18
In your current snippet, you called a function `foundLocation()` But not passing any parameter `pos` — Neel Rathod, Aug 26 '19 at 15:21
Yes it is the asynchronous call issue. If you set them to a global variable so it can be referenced elsewhere, you have to wait for the variable to be set. Same logic that is in the link I posted above. — epascarello, Aug 26 '19 at 15:21
@NeelRathod because the api calls the method with the argument — epascarello, Aug 26 '19 at 15:22
@NeelRathod That's how the geolocation method works. __myLat__ and __myLon__ are indeed generated. — Rich_F, Aug 26 '19 at 15:23

Rich_F · Answer 1 · 2019-08-26T15:43:08.223

Kudos to @espascarello: All the map functionality inside the success function foundLocation(pos).

Update: The problem is above. Read it. Putting every map function inside foundLocation(pos) worked fine. There's no use for any map function if these two variables are not found.

myLat = 0
myLon = 0
mymap = ""

function foundLocation(pos) {
    myLat = pos.coords.latitude;
    myLon = pos.coords.longitude;
//  setMyLocation(pos.coords.latitude, pos.coords.longitude)

    var homeIcon = L.icon({
        iconUrl:      '/img/house_marker.png',
        iconSize:     [24, 24],
        iconAnchor:   [12, 24],
        popupAnchor:  [0, -24]
    });


    var mymarkers = L.layerGroup([
        L.marker([ myLat, myLon ], {icon: homeIcon}).bindPopup("You Are Here"),
        <%= @markers %>
        ]);

    var mymap = L.map('mapid', {
        center: [ myLat,myLon ],
        minZoom: 2,
        maxZoom: 18,
        zoom: 15,
        layers: [mymarkers]
        });

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
            attribution: 'Map data &copy; <a href="http://openstreetmap.org" target="_blank">OpenStreetMap</a> Imagery © <a href="http://mapbox.com" target="_blank">Mapbox</a>',
            id: 'mapbox.streets'
        }).addTo(mymap);

    L.control.layers(mymarkers).addTo(mymap);


    };

function noLocation() {
    document.getElementById("warning").innerHTML = "Could not find your location";
    };

function setMyLocation(pushLat, pushLon) {
    alert("inside setMyLocation");
    myLat = pushLat;
    myLon = pushLon;
//      var mymap = L.map('mapid', {
//     center: [ myLat, myLon ],
//     minZoom: 2,
//     maxZoom: 18,
//     zoom: 15,
//     layers: [mymarkers]
//     });
    };

navigator.geolocation.getCurrentPosition(foundLocation, noLocation);

This is not a useful answer. Explain the problem, describe the solution, and post the corrected code. — Barmar, Aug 26 '19 at 15:41

Javascript Function & Variable Scope using geolocation

1 Answers1