Sunday, 11 December 2022

Leaflet - Iframe link in BindPopup refuses loading

I would like to display some external websites in the <iframe> selector in the BindPopup in Leaflet. I have no clue why I am facing a situation such as this: enter image description here

My JavaScript code (embedded in Python folium) looks like this:

 {map}.on("click", addMarker);

  const MarkerInfo = '<iframe src="https://www.wp.pl/" width="300"></iframe><center><button 
  type="button" class="remove">delete marker?</button></center>'

  const markerPlace = document.querySelector('.marker-position');

  function addMarker(e) {
  // ustawiamy aby marker był przesuwalny
  const marker = new L.marker(e.latlng, {
  draggable: true,
  }).addTo({map}).bindPopup(MarkerInfo);
   marker.on("popupopen", removeMarker);
   marker.on('dragend', dragedMarker);
   markerPlace.textContent = `new marker: ${e.latlng.lat}, ${e.latlng.lng}`;
  }

Am I missing something?

UPDATE:

After reading this thread:

Refused to display in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'

I've changed my URL to:

     const MarkerInfo = "<iframe src='https://www.wp.pl/' width='300'&output=embed></iframe><center><button type='button' class='remove'>delete marker?</button></center>"

Unfortunately still the same. It seem like I don't know where the: window.location.replace(url); should come



from Leaflet - Iframe link in BindPopup refuses loading

No comments:

Post a Comment