JavaScript Need Help to Debug my Code. My problem is that my longitude and latitude becomes undefined when i call them in position function.

[RedWinter]

  var ref = firebase.database().ref('Location/Lat');
  var latitude;
  var longitude;
    ref.on("value", function(snapshot) {
    console.log(snapshot.val());
[B]    latitude = snapshot.val().Latitude;
    longitude = snapshot.val().Longitude;[/B]
    console.log(latitude, longitude);
    userLocation(latitude, longitude);
    }, function (error) {
   console.log("Error: " + error.code);
    });

// Find user location
function userLocation (latitude, longitude){
    console.log(latitude, longitude)
    try{
    // Get position fn
    function position (c, lt, lg){
        console.log(c.coords);
[B]        let lat = lt.latitude;
        let lng = lg.longitude;[/B]
        let coords = [lng, lat];
        // Show map location
        mapBoxFn(coords);
    };
    // Error fn
    function error (err){
        alert(`ERROR(${err.code}): ${err.message}`);
    };

 

[Johna]

Any errors in the console?

 

[RedWinter]

Any errors in the console?

Yes here is the screenshot.

 

[Johna]

There's no closing bracket for the try block.

 

[RedWinter]

There's no closing bracket for the try block.

i have added the try block still the same problem. here is the complete code.

// Select DOM elements
const mapDiv = document.querySelector('.map');
let coord = [-74.5, 40];
// Mapbox function
function mapBoxFn (coord){
    let map = new mapboxgl.Map({
    container: mapDiv, // container ID
    style: 'mapbox://styles/mapbox/streets-v11', // style URL
    center: coord, // starting position [lng, lat]
    zoom: 12 // starting zoom
    });
    // Popup
    let popup = new mapboxgl.Popup({ closeOnClick: false })
    .setLngLat(coord)
    .setHTML('<h1>You are here!</h1>')
    .addTo(map);

    const marker = new mapboxgl.Marker({
        draggable: false
        })
        .setLngLat(coord)
        .addTo(map);
};
// mapBoxFn(coord);
var firebaseConfig = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
  };
  firebase.initializeApp(firebaseConfig);

  /*let starCountRef = firebase.database().ref('Location/Lat');
  starCountRef.on('value', (snapshot) => {
    var lati = snapshot.val().Latitude;
    var long = snapshot.val().Longitude;
    console.log(lati, long);
    window.lats = lati;
    window.lng = long;
  });*/

  var ref = firebase.database().ref('Location/Lat');
  var latitude;
  var longitude;
    ref.on("value", function(snapshot) {
    console.log(snapshot.val());
    latitude = snapshot.val().Latitude;
    longitude = snapshot.val().Longitude;
    console.log(latitude, longitude);
    userLocation(latitude, longitude);
    }, function (error) {
   console.log("Error: " + error.code);
    });

// Find user location
function userLocation (latitude, longitude){
    console.log(latitude, longitude)
    try{
    // Get position fn
    function position (c, lt, lg){
        console.log(c.coords);
        let lat = lt.latitude;
        let lng = lg.longitude;
        let coords = [lng, lat];
        // Show map location
        mapBoxFn(coords);
    };
    // Error fn
    function error (err){
        alert(`ERROR(${err.code}): ${err.message}`);
    };

    // Navigator
     navigator.geolocation.getCurrentPosition(position, error);

    }catch(error){
        alert(error);
    }
};
userLocation();

 

[Deleted member 2829]

var lati = snapshot.val().Latitude; var long = snapshot.val().Longitude; ... latitude = snapshot.val().Latitude; longitude = snapshot.val().Longitude; ... let lat = lt.latitude; let lng = lg.longitude;

Are you sure latitude and longitude should be spelled differently in these statements ?

 

[RedWinter]

var lati = snapshot.val().Latitude; var long = snapshot.val().Longitude; ... latitude = snapshot.val().Latitude; longitude = snapshot.val().Longitude; ... let lat = lt.latitude; let lng = lg.longitude;

Are you sure latitude and longitude should be spelled differently in these statements ?

Thank you sir for replying. But this thread has been solved by my professor thank you.

 

[Deleted member 2829]

Thank you sir for replying. But this thread has been solved by my professor thank you.

Oh alright, good for you.
There is a possibility, you know, to mark a question solved. Just to avoid people spending needless time on it.

 

[Antero360]

i have added the try block still the same problem. here is the complete code.

// Select DOM elements
const mapDiv = document.querySelector('.map');
let coord = [-74.5, 40];
// Mapbox function
function mapBoxFn (coord){
    let map = new mapboxgl.Map({
    container: mapDiv, // container ID
    style: 'mapbox://styles/mapbox/streets-v11', // style URL
    center: coord, // starting position [lng, lat]
    zoom: 12 // starting zoom
    });
    // Popup
    let popup = new mapboxgl.Popup({ closeOnClick: false })
    .setLngLat(coord)
    .setHTML('<h1>You are here!</h1>')
    .addTo(map);

    const marker = new mapboxgl.Marker({
        draggable: false
        })
        .setLngLat(coord)
        .addTo(map);
};
// mapBoxFn(coord);
var firebaseConfig = {
    apiKey: "AIzaSyDJ3V8DPbjf0ipSUbCBOBd9vpGpOwAPZPk",
    authDomain: "data-storage-f0a72.firebaseapp.com",
    databaseURL: "https://data-storage-f0a72-default-rtdb.firebaseio.com",
    projectId: "data-storage-f0a72",
    storageBucket: "data-storage-f0a72.appspot.com",
    messagingSenderId: "761040075298",
    appId: "1:761040075298:web:1f3c8315b3b6d745a8e87b",
    measurementId: "G-4G3J8DX0QL"
  };
  firebase.initializeApp(firebaseConfig);

  /*let starCountRef = firebase.database().ref('Location/Lat');
  starCountRef.on('value', (snapshot) => {
    var lati = snapshot.val().Latitude;
    var long = snapshot.val().Longitude;
    console.log(lati, long);
    window.lats = lati;
    window.lng = long;
  });*/

  var ref = firebase.database().ref('Location/Lat');
  var latitude;
  var longitude;
    ref.on("value", function(snapshot) {
    console.log(snapshot.val());
    latitude = snapshot.val().Latitude;
    longitude = snapshot.val().Longitude;
    console.log(latitude, longitude);
    userLocation(latitude, longitude);
    }, function (error) {
   console.log("Error: " + error.code);
    });

// Find user location
function userLocation (latitude, longitude){
    console.log(latitude, longitude)
    try{
    // Get position fn
    function position (c, lt, lg){
        console.log(c.coords);
        let lat = lt.latitude;
        let lng = lg.longitude;
        let coords = [lng, lat];
        // Show map location
        mapBoxFn(coords);
    };
    // Error fn
    function error (err){
        alert(`ERROR(${err.code}): ${err.message}`);
    };

    // Navigator
     navigator.geolocation.getCurrentPosition(position, error);

    }catch(error){
        alert(error);
    }
};
userLocation();

PLEASE PLEASE PLEASE REMOVE THAT API TOKEN. I went ahead and removed all token/and ids from your post. For security reasons, please do not post any information that can get your site/software pwned