Создать всплывающее окно stati c в листовке для заданного значения с помощью document.getElementById (idPopUPImage) .inner HTML?

Question

У меня есть листовка с картой - Codpen

Я нажал кнопку для отображения изображения во всплывающем окне, когда я нажимаю на него. но когда я закрываю всплывающее окно и открываю его снова, изображение не отображается, и мне приходится снова нажимать кнопку, чтобы отобразить изображение.

Как установить его, пока страница не обновится sh отобразить во всплывающем окне ?

Имейте в виду, что я должен сделать это с помощью кнопки, и я не хочу устанавливать адрес фотографии во всплывающем окне при создании маркеров.

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>

Answer 1

Установите всплывающее содержимое вместо перезаписи 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/