PC SOFT

FORUMS PROFESSIONNELS
WINDEV, WEBDEV et WINDEV Mobile

|
|
|
FR
Accueil → WINDEV 2025 → Rendre dynamique l'affichage d'une carte openstreemap avec Leaflet
Rendre dynamique l'affichage d'une carte openstreemap avec Leaflet
Débuté par christophe, 28 mar. 2023 11:47 - 3 réponses
#1
Membre enregistré
30 messages
Posté le 28 mars 2023 - 11:47
Bonjour,
Pour afficher des cartes j'utilise l'api leaflet et openstreetmap.
Ma carte est affichée dans un champ html. Je cherche un moyen de rendre l'affichage dynamique en fonction de la taille de la fenêtre. Dans la documentation de leaflet il y a la méthode qui permet de vérifier si la taille du conteneur de la carte a changé mais je n'arrive pas la faire fonctionner.
Avez-vous une solution à mon problème ?
Merci
#2
Membre enregistré
1 031 messages
Posté le 28 mars 2023 - 18:10
Bonjour christophe,

Perso, je commence le code de ma carte ainsi :

<!DOCTYPE html>
<html>
<head>
<title>Simple Leaflet Map</title>
<meta charset="utf-8"/>

<style>
html, body, #map {
height:100%;
width:100%;
padding:0px;
margin:0px;
}
</style>


Mon champs HTML est ancré à la fenêtre. Donc, si je redimensionne ma fenêtre, le champs HTML suit et la carte s'adapte dynamiquement.
Cordialement
Message modifié, 28 mars 2023 - 18:10
#3
Membre enregistré
1 031 messages
Posté le 29 mars 2023 - 15:13
Bonjour,
Je reviens sur le sujet car je viens de me rendre compte qu'il manque une bonne partie de ma réponse sur le post précédent :
Pour obtenir l'affichage dynamique, je suis obligé ensuite de passer par l'enregistrement du code de la carte dans un fichier (.html) et d'attribuer ce fichier .html au champs HTML nommé HTML1.

voici donc le code complet qui devrait fonctionner :

sLienHTTP est une chaîne UNICODE

HTML1="<html></html>" //mise à blanc du champs HTML1 pour éviter les erreurs lors de multi-clics

sLienHTTP = [
<!DOCTYPE html>
<html>
<head>
<title>Simple Leaflet Map</title>
<meta charset="utf-8"/>

<style>
html, body, #MaCarte {
height:100%;
width:100%;
padding:0px;
margin:0px;
}
</style>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

</head>
<body>

<div id="MaCarte"></div>

<script>

var Carte = L.map('MaCarte').setView([42.41, 2.58], 5);
mapLink =
'<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; ' + mapLink + ' Contributors',
maxZoom: 18,
}).addTo(Carte);

</script>
</body>
</html>
]

fSauveTexte(fRepExe() + "LeafLet_Carte.html", sLienHTTP) //création du fichier HTML dans le répertoire de l'appli
HTML1 = fRepExe() + "LeafLet_Carte.html" //attribution du fichier html au champs HTML1


Pour moi, l'exécution du code de la carte directement depuis un bouton n'est pas dynamique.
#4
Membre enregistré
30 messages
Posté le 30 mars 2023 - 15:23
Bonjour Cédric

Merci pour la réponse. Cela fonctionne parfaitement
→ Revenir à WINDEV 2025