javascript – Create popup static in leaflet for set value by document.getElementById(idPopUPImage).innerHTML?-ThrowExceptions

Exception or error:

I have leaflet map – Codpen

I’ve put a button key to display an image in the popup when I click that. but when I close popup and open it again, the picture doesn’t show and I have to click again button key to display the image.

How can I set that until page not refresh display in popup?

Keep in mind that I have to do this with button key and I don’t want to set the photo address in the pop-up when creating markers.

var map = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('//maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', {
			attribution: 'Wikimedia maps beta | Map data &copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
		}).addTo(map);

// Создаем новый pane, который не вложен в mapPane => независимый от transform
var pane = map.createPane('fixed', document.getElementById('mapid'));

var marker = L.marker([51.5, -0.09]).addTo(map);
 
var popup = L.popup({
  pane: 'fixed', // Указываем нужный pane
  className: 'popup-fixed',
  autoPan: false,
}).setContent('<p id="popupid" style="text-align:center;position: inherit;color: #EA2D62;font-size: 15px;">  hiiiii!</p>  ');

 

marker.bindPopup(popup);
 

// Остальное добиваем стилями

function img(){
 
  document.getElementById('popupid').innerHTML='<img src="https://images.unsplash.com/photo-1503356380949-02bb0fb9474c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60"   width="70" height="70">' ;
};
html,
body {
  height: 100%;
}

#mapid {
  height: 100%;
}
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"> </script> 
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" type="text/css" ></link> 

 <button   type="button"  onclick="img()" > <p style="text-align:center;position: inherit;color: #EA2D62;font-size: 32px;">  picture </p> </button>

<div id="mapid"></div>
How to solve:

Set the popup content instead overwriting the html.

function img(){
 popup.setContent('<img src="https://images.unsplash.com/photo-1503356380949-02bb0fb9474c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60"   width="70" height="70">') ;
};

https://jsfiddle.net/falkedesign/y72s3c6x/

Leave a Reply

Your email address will not be published. Required fields are marked *