0

I am trying to bind leaflet popup to external html file and pass object to external file. This is what i did so far:

index.html

<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>  <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<body>
    <script src="scriptspl.js" type="text/javascript" ></script>

<div id="mapid" style="width: 600px; height: 600px;">
    <script>
        var mymap = L.map('mapid').setView([51.505, -0.09], 13);
        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
            maxZoom: 18,
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
                'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            id: 'mapbox/streets-v11',
            tileSize: 512,
            zoomOffset: -1
        }).addTo(mymap);
        var markerx=L.marker([51.5, -0.09]).addTo(mymap);
        //drawLines()
        markerx.bindPopup('<iframe src="wp_popup.html"></iframe>',{minWidth : 800})
        .on('popupopen', function (e) {
            drawLines()
        })

    </script>
</body>
</html>

This bassicaly loads map, creates marker and binds popup of a marker to wp_popup.html.

wp_popup:

<body>
<div class="tab">
  <button class="tablinks" onclick="">T1</button>
  <button class="tablinks" onclick="">T2</button>
  <button class="tablinks" onclick="">T3</button>
</div>

<div id="T1" class="tabcontent">
<div> <div id='myDiv'></div> </div>
</div>

<div id="T2" class="tabcontent">
  <p>T2 </p> 
</div>

<div id="T3" class="tabcontent">
  <p>T3</p>
</div>
</body>

Function drawLines is in scriptspl.js file:

function drawLines() {
var one = {
   x: [1,2,3],
   y: [1,2,3],
   mode: 'lines+markers',
   name: 'Sample Data'
};
var data = [one];
var layout = { title: 'Sample Graph' };
Plotly.newPlot('myDiv', data, layout);
}

When I run all above, I get error Uncaught Error: No DOM element with id 'myDiv' exists on the page.. Following this answer, I added var myDiv = document.getElementById('myDiv'); on top of scriptspl.js and changed last code line to Plotly.newPlot(myDiv, data, layout); but then I get error that object myDiv is Null. Any help in resolving this is highly appreceated. Thanks in advance.

user2727167
  • 330
  • 2
  • 15
  • Chances are that `scriptspl.js` is being run *before* the `
    ` HTML code has been parsed, and said `div` does not exist in the DOM tree when the code is running.
     – IvanSanchez Apr 25 '21 at 13:49

0 Answers0