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 ='mapid').setView([51.505, -0.09], 13);

L.tileLayer('//{z}/{x}/{y}.png', {
			attribution: 'Wikimedia maps beta | Map data &copy; <a href="">OpenStreetMap contributors</a>'

// Создаем новый 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>  ');



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

function img(){
  document.getElementById('popupid').innerHTML='<img src=""   width="70" height="70">' ;
body {
  height: 100%;

#mapid {
  height: 100%;
<script src=""> </script> 
  <link rel="stylesheet" href="" 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=""   width="70" height="70">') ;

Leave a Reply

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