Leaflet map reload onclick

Question

I have a gallery of image thumbnails and a image viewer. Each image has different #id has lat and long attached to it. I am triggering series of onclick events on clicking the thumbnail. The imagename, lat and long info is stored in a mysql table. The following are the functions I have written sofar.

function clickedImage(clicked_id) {
//series of functions
  $.post("getLatLong.php",{"clickedimag":clickedImg},function(data){
    var ll = JSON.parse(data);
    var lat = parseFloat(ll[0]);
    var long = parseFloat(ll[1]);
    var pname = ll[2];
    localStorage.setItem('lat',lat);
    localStorage.setItem('long',long);
    localStorage.setItem('cpname',pname);
    //alert([lat,long]);
  });
//Series of functions    
}

All my other functions are working including I am able to save lat, long info into localStorage. The alert in the above function, clearly pops up with the lat and long attached to the image. To render the map, I am using the template given in the leaflet page.

$(function(){
  var la = localStorage.getItem('lat');
  var lon = localStorage.getItem('long');
  var cpname = localStorage.getItem('cpname');
  var mymap = L.map('mapid').setView([la,lon], 13);
  L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Ima$
  maxZoom: 18,
  id: 'mapbox/streets-v11',
  tileSize: 512,
  zoomOffset: -1,
  accessToken: 'my.access.token'
  }).addTo(mymap);
  var marker = L.marker([la, lon]).addTo(mymap);
  marker.bindPopup("<b>" + cpname +"</b>").openPopup();  
});

The above code works and renders the map correctly, however, only when I refresh the page. It is not changing the map asynchronously. I have tried this function too:

function getMyMap(la,lon) {  
  var la = localStorage.getItem('lat');
  var lon = localStorage.getItem('long');
  var mymap = L.map('mapid').setView([la,lon], 13);
  L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Ima$
  maxZoom: 18,
  id: 'mapbox/streets-v11',
  tileSize: 512,
  zoomOffset: -1,
  accessToken: 'myaccesstoken'
  }).addTo(mymap);
}

and called this function inside my onClick event. I am getting the same result.

HTML

<div class="rhsbar" id="rhsbar"  style="overflow:hidden;display:flex;flex-direction:column;">
<div id="mapid" >Loading map</div>
</div>

var h = $("#rhsbar").height();
var w = $("#rhsbar").width()+100;

document.getElementById("mapid").style.height=h+"px";
document.getElementById("mapid").style.width=w+"px";

How do I update the map with new coordinates without refreshing the page.

Answer 1

What you need is:

your_mapid.fitBounds(your_mapid.getBounds());

It will do a soft refresh of the map whenever something changes.