Updating a Leaflet Marker With Lan & Long Details From an API Request

Question

I'm pulling through the lat & lng data from an API request as below but i'm tring to get the markef to update every time I change the counrty in the dropdown menu (selCountry).


$('#selCountry').on('change', function(){
  $.ajax({
      url: "php/restCountries.php",
      type: 'POST',
      dataType: 'json',
      data: {
          country: $('#selCountry').val()   
      },
      success: function(result) {
        
          console.log('restCountries', result);
          if (result.status.name == "ok") {
              currencyCode = result.currency.code;
              iso2CountryCode = result.data.alpha2Code;
              var countryName2 = result.data.name;
              countryName = countryName2.replace(/\s+/g, '_');
              var latlng = result.data.latlng
              
              $('#countryName').html('<strong> Country: ' + result['data']['nativeName'] + '</strong>');
              $('#txtCurrencyCode').html('<strong> Capital City: ' + result['data']['capital'] + '<br> Currency Symbol: '+ result.currency.symbol + '<br> Currency Name: '  + result.currency.name + '<br> Currency Code: ' + result.currency.code + '</strong>');
              
              console.log(result.data.latlng);

I've tried changing the marker details to the latlng info which updates on selecting a new country but the marker does not update. What am I missing?

I have the marker outside the ajax call and if I move it inside the call, the whole map crashes out and does not load.

L.marker([latlng], {icon: redMarker}).bindPopup(result['data']['capital']).addTo(map);

Any advice would be greatly appriciated.

Thank You

So where are your `setLatLng()` calls? – IvanSanchez Sep 12 '21 at 01:57 — IvanSanchez, Sep 12 '21 at 01:57
Thank you. I'm off to look at setLatLng() options. – SimonJAdams Sep 12 '21 at 08:32 — SimonJAdams, Sep 12 '21 at 08:32

score 0 · Accepted Answer · answered Sep 12 '21 at 09:43

Managed to figure out a way to get the request to work. I separated the latlng data out into variables and fed them into the marker statement.

It now adds a marker on each selected country change.

$('#selCountry').on('change', function(){
  $.ajax({
      url: "php/restCountries.php",
      type: 'POST',
      dataType: 'json',
      data: {
          country: $('#selCountry').val()   
      },
      success: function(result) {
        
          console.log('restCountries', result);
          if (result.status.name == "ok") {
              currencyCode = result.currency.code;
              iso2CountryCode = result.data.alpha2Code;
              var countryName2 = result.data.name;
              countryName = countryName2.replace(/\s+/g, '_');
              
              $('#countryName').html('<strong> Country: ' + result['data']['nativeName'] + '</strong>');
              $('#txtCurrencyCode').html('<strong> Capital City: ' + result['data']['capital'] + '<br> Currency Symbol: '+ result.currency.symbol + '<br> Currency Name: '  + result.currency.name + '<br> Currency Code: ' + result.currency.code + '</strong>');
              
              //console.log(result.data.latlng[0]);
              
              var currentLat = result.data.latlng[0]
              var currentLng = result.data.latlng[1]
              
                marker = L.marker;
              
               L.marker([currentLat, currentLng], {icon: redMarker}).addTo(map);
             
        };

Happy days!

Updating a Leaflet Marker With Lan & Long Details From an API Request

1 Answers1