Map is not loaded if is not focused

seta59 · 2023-02-23T09:08:02.339Z

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?

Cheers,
Sergio

Vinzenz_Mai · 2023-02-23T15:16:16.003Z

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
Vinzenz

seta59 · 2023-02-23T17:09:02.809Z

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,

Sergio

Vinzenz_Mai · 2023-02-23T18:27:38.687Z

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
Vinzenz

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

<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<meta charset="utf-8" />
	
	<!-- load leaflet-library -->
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
	<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>	
</head>
<body>
	<h1>Example</h1>
	<div>
		<button id="whatever" onclick="show_map();">Show map</button>
	</div>
	<div id="test" display="none">
		<form><div id="mapid" style="width: 800px; height: 700px; display: none"></div></form>
	</div>

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

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

</body>
</html>