Enigme avec Javascript et Leaflet dans contexte WordPress/Gutenberg

				// on envoie les données au fichier javascript pour initialisation
				wp_localize_script(
					'events-manage-location-js', 
					'object_map', 
					array(
						'lat' => esc_html($location_data[0]),
						'lng' => esc_html($location_data[1])
					)
				);

	// =======initialisation carte si lieu est défini au chargement
	if (typeof(object_map)!="undefined") {
		let lat = object_map.lat;
		let lng = object_map.lng;

		map.setView([lat, lng], 16);
		marker = L.marker([lat, lng]);
		marker.addTo(map);

		setTimeout(gibiResize, 300);  // pour le bug de refresh
	}

	// =======chargement nouvelle carte sur <select>
	//   création ou mise à jour event
	$("#evt-location-selector").on('change', function(e) {
		let $itemSelected = $("#evt-location-selector option:selected");
		let newName = $itemSelected.data('name');
		let newLat = $itemSelected.data('lat');
		let newLng = $itemSelected.data('lng');
		let newAdr = $itemSelected.data('adr');
		//console.log(`${newName} ${newLat} ${newLng} ${newAdr}`);

		map.setView([newLat, newLng], 16);
		marker.remove();
		marker = L.marker([newLat, newLng]).addTo(map);

		$("#location-address").text(newAdr);
	});

/**
 * Vérifie la présence de la bibliothèque Leaflet.js chargée en asynchrone et exécute le script de configuration si disponible.
 * @param {object} L - Variable globale définie par Leaflet, utilisée pour vérifier l'initialisation de la bibliothèque.
 */
window.addEventListener('load', () => {
  const initializeMaps = () => {
    if (typeof L !== 'undefined') {
      maps()
    }
  }

  // Exécuter lorsque le chargement de la page est terminé
  initializeMaps()

  // Ajouter un listener pour les changements de readyState
  document.addEventListener('readystatechange', () => {
    if (document.readyState === 'complete') {
      initializeMaps()
    }
  })
})

Olivier C a écrit :
Bonsoir,

Ça ressemble à un problème de chargement : la map doit se charger avant d'autres éléments dans la page et le rendu final s'en trouve ainsi cassé. Personnellement je fais ainsi pour charger mes scripts Leaflet (la fonction ici s'appelle "maps") :

/**
 * Vérifie si la bibliothèque Leaflet.js est chargée et exécute le script de configuration.
 */
function initializeMaps() {
  if (window.L) {
    maps()
    return true // Indique que l'initialisation a eu lieu
  }
  return false
}

// Exécuter immédiatement si Leaflet est déjà chargé
if (!initializeMaps()) {
  // Surveiller les mutations du DOM pour détecter l'ajout de Leaflet
  const observer = new MutationObserver(() => {
    if (initializeMaps()) {
      observer.disconnect() // Arrêter l'observation une fois Leaflet détecté
    }
  })

  observer.observe(document.documentElement, { childList: true, subtree: true })
}

if (typeof L !== 'undefined') {
      maps()
    }

let map;
let marker;	

jQuery(document).ready(function($)  {
	// création de la carte commune



	map = L.map('location-map-preview');
	L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
		maxZoom: 19,
		attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
	}).addTo(map);


	// =======initialisation carte si lieu est défini au chargement
	if (typeof(object_map)!="undefined") {
		let lat = object_map.lat;
		let lng = object_map.lng;

		map.setView([lat, lng], 16);
		marker = L.marker([lat, lng]);
		marker.addTo(map);

		//setTimeout(gibiResize, 300);  // pour le bug de refresh

		setTimeout(() => {
			map.invalidateSize();
			}, 300);
	}
	
    // suite du script
    // Opérations sur la carte

});

a écrit :
si L n'est pas définit, on a pas de seconde chance quand il est défini, pour ce que j'ai compris.

function initializeMaps(callback) {
  if (window.L) {
    callback()
    return true
  }
  return false
}

if (!initializeMaps(maps)) {
  const observer = new MutationObserver(() => {
    if (initializeMaps(maps)) {
      observer.disconnect()
    }
  })

  // Observer uniquement le head
  observer.observe(document.head, { childList: true, subtree: true })

  // Arrêter l'observation après 10 secondes
  setTimeout(() => observer.disconnect(), 10000)
}