Map is not loaded if is not focused

Hi all,
I’m new in this forum and I do not know if is the appropiate category.
This is my problem.
I have create a map in an hiden form and the right procedure to load all, but when I show the form it is fulled only a little part of this form and I have to reload it. After that I can see all.
What can I do?


Hi @seta59 and welcome here!

There is not one single way to create a map in a form, there are hundreds of possibilities.
Without knowing your code it’s nearly impossible to help you.

Best regards


Hello Vinzenz,
thanks for your answer,
I have understand that is not caused by openstreetmap but from the form that is closed and every sets are 0. I have planed to create the map at push button event.
Regards again,


Hi Sergio,

I’ve reduced some code of mine to the bare minimum and added a button to show the map. It works like expected, the map doesn’t need a reload.

By the way I’m using the leaflet-library.

Best regards

Edit: changed the code to the CDN of leaflet, so that no local leaflet library is needed.

<!DOCTYPE html>
	<meta charset="utf-8" />
	<!-- load leaflet-library -->
	<link rel="stylesheet" href="" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
	<script src="" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>	
		<button id="whatever" onclick="show_map();">Show map</button>
	<div id="test" display="none">
		<form><div id="mapid" style="width: 800px; height: 700px; display: none"></div></form>

	<script type="text/javascript">
		function show_map() {
			// positioning my map (French departement Moselle)
			var mymap = new'mapid').setView([49.10, 6.60], 9);

			L.tileLayer('https://{s}{z}/{x}/{y}.png', {
				maxZoom: 19,
				attribution: '&copy; Openstreetmap France | &copy; <a href="">OpenStreetMap</a> contributors'
			// show something interesting like some markers or the boundaries of some town
			// and the GPS-trace of my last bike ride :-)