Sending a variable from a function in JS

Question

I have a JS script with a map, which works well:

var lat = 0;
var lng = 0;

function onLocationFound(e) {
  var radius = e.accuracy / 2;
  lat = e.latlng.lat;
  lng = e.latlng.lng;
  console.log(e.latlng);

  L.marker(e.latlng).addTo(map).bindPopup("Tutaj jesteś!!!").openPopup();
  L.circle(e.latlng, radius).addTo(map);
}

function onLocationError(e) {
  //alert(e.message);
}

var map = L.map('mapdiv', {
  editable: true,
  fadeAnimation: false
}).setView([54.35070881441067, 18.641191756395074], 15);

L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors',
  maxZoom: 30,
  zoomControl: true,
  detectRetina: true
}).addTo(map);

map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);
map.locate({
  setView: true,
  maxZoom: 16
});

let myFilter = ['grayscale:100%'];
let myTileLayer = L.tileLayer.colorFilter('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', {
  attribution: '<a href="https://wikimediafoundation.org/wiki/Maps_Terms_of_Use">Wikimedia</a>',
  filter: myFilter,
}).addTo(map);

/*
  lc = L.control.locate({
    strings: {
      title: "Show me where I am, yo!"
    }
  }).addTo(map);
*/

var LeafIcon = L.Icon.extend({
  options: {
    shadowUrl: 'leaf-shadow.png',
    iconSize: [38, 95],
    shadowSize: [50, 64],
    iconAnchor: [22, 94],
    shadowAnchor: [4, 62],
    popupAnchor: [-3, -76]
  }
});

var greenIcon = new LeafIcon({
  iconUrl: 'leaf-green.png'
}),
redIcon = new LeafIcon({
  iconUrl: 'leaf-red.png'
}),
orangeIcon = new LeafIcon({
  iconUrl: 'leaf-orange.png'
});

L.icon = function(options) {
  return new L.Icon(options);
};

L.marker([54.45070881441067, 18.541191756395074], {
  icon: greenIcon
}).addTo(map).bindPopup('yyyyyy.<br> Easily customizable.');
L.marker([54.35070881441367, 18.641191756395774], {
  icon: redIcon
}).addTo(map).bindPopup('xxxxxxx.<br> Easily customizable.').openPopup();

L.marker([54.58273849989086, 18.373226338357547], {
  icon: greenIcon
}).addTo(map).bindPopup('yyyyyy.<br> Easily customizable.');

L.EditControl = L.Control.extend({
  options: {
    position: 'topleft',
    callback: null,
    kind: '',
    html: ''
  },
  onAdd: function(map) {
    var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar'),
      link = L.DomUtil.create('a', '', container);

    link.href = '#';
    link.title = 'Create a new ' + this.options.kind;
    link.innerHTML = this.options.html;
    L.DomEvent.on(link, 'click', L.DomEvent.stop).on(link, 'click', function() {
      window.LAYER = this.options.callback.call(map.editTools);
    }, this);
    return container;
  }
});

var circle = L.circle([lat, lng], {
  radius: 1000
}).addTo(map);

circle.enableEdit();
circle.on('dblclick', L.DomEvent.stop).on('dblclick', circle.toggleEdit);
//circle.on('editable:vertex:drag', function (e) {

map.on('editable:drawing:move', function(e) {
  console.log(circle.getLatLng())
  console.log(circle.getRadius());
});

In the onLocationFound() function I set values for the lat and lng variables. I would like to use those variables in this code:

var circle = L.circle([lat, lng], {
  radius: 1000
}).addTo(map);

However it's not working. I haven't got an error in the console. How can I fix this?

Answer 1

The issue is because the onLocationFound() function is only called when the locationfound event fires on the map, yet you attempt to use the lat and lng values before this happens and hence the values are undefined.

To fix the problem move the var circle = ... line inside the onLocationFound() function:

function onLocationFound(e) {
  var radius = e.accuracy / 2;
  lat = e.latlng.lat;
  lng = e.latlng.lng;
  console.log(e.latlng);

  L.marker(e.latlng).addTo(map).bindPopup("Tutaj jesteś!!!").openPopup();
  L.circle(e.latlng, radius).addTo(map);

  var circle = L.circle([lat, lng], {
    radius: 1000
  }).addTo(map);
}

You can see from this example that your code is already doing similar in this line:

L.circle(e.latlng, radius).addTo(map);

The difference in the code you're trying to get working is simply the radius you define for the circle.

Also note that you can then also remove the global definition for those variables, as globals should be avoided where possible.