[GIS] How to make focus on Leaflet marker with a click from another window

leaflet

I am making a project using Leaflet. I made a script which creates a map with one marker. A click on the map creates a window with the marker coordinates and I would like to be able to click on coordinates in the new window and having a focus on the marker linked to this coordinates on the map. But I have no idea on how to do it or if there is a better way to do this even after searching on Internet. You can easily launch the code. 

<!DOCTYPE html>
<html>
<head>

    <title>Leaflet</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
   integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
   crossorigin=""></script>

</head>
<body>



<div  <div id="map" style="width: 1800px; height: 1000px;"></div>
<script>

    var mymap = L.map('map').setView([51.505, -0.09], 13);
    var marker = L.marker([51.5, -0.09]).addTo(mymap);
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?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>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox.streets',
        accessToken: 'pk.eyJ1IjoibWFyY2R1cnJlbm1hdHQiLCJhIjoiY2p4MmFmY21yMGgxZzQ5cWYzYzN5YnA3NSJ9.XAT5P6nD3KEOwvcZHEb6Kw'
    }).addTo(mymap);

    function onMapClick(e) {

        var popup = L.popup()
        .setLatLng(e.latlng)
        .setContent("<table><tr><td>Cell 1</td><td>Cell 2</td></tr></table>")
        .openOn(mymap);

        var myWindow = window.open("", "MsgWindow", "width=200,height=100");
        myWindow.document.write("<p>This is 'MsgWindow'ty for helping</p>");
        myWindow.document.write(marker.getLatLng());    
        }

mymap.on('click', onMapClick);



</script>



</body>
</html>

Best Answer

Since you want your child window to communicate with parent window, it will need some Java Script code, which is simpler to implement if you create separate page for child window.

Parent window will send lat,lng coordinates as arguments to child window. Child window will on click call Java Script function in parent window, with lat,lng parameters. This function will then flyTo to desired coordinates.

Parent window Java Script code modification:

function onMapClick(e) {
    var popup = L.popup()
    .setLatLng(e.latlng)
    .setContent("<table><tr><td>Cell 1</td><td>Cell 2</td></tr></table>")
    .openOn(mymap);
    var lat = marker.getLatLng().lat;
    var lng = marker.getLatLng().lng;
    var myWindow = window.open('child.html?lat=' + lat + '&lng=' + lng, "MsgWindow", "width=200,height=100");
};

 function flyToLatLng(lat, lng) {
    mymap.flyTo([lat, lng], 15);
 };

Child page child.html:

<!DOCTYPE html>
<html>
<head>
  <title>MsgWindow</title>
   <meta charset="utf-8" />
</head>
<body>
<p>This is 'MsgWindow'ty for helping</p>
<p id="latlng" style="background-color: #E5E5E5; cursor: pointer"></p>

<script>
  // quick dirty solution to get arguments lat and lng
  var lat = location.search.match(/lat=([^&]+)/)[1]; 
  var lng = location.search.match(/lng=([^&]+)/)[1];

  document.getElementById('latlng').innerHTML = lat + ', ' + lng;

  document.getElementById('latlng').addEventListener('click', function() {
    window.opener.flyToLatLng(lat, lng);
  });

</script>

</body>
</html>
Related Question