PC SOFT

FORUMS PROFESSIONNELS
WINDEV, WEBDEV et WINDEV Mobile

|
|
|
FR
Accueil → WINDEV 2025 → OPENSTREETMAP vers Windev : Récupérer latitude et longitude ?
OPENSTREETMAP vers Windev : Récupérer latitude et longitude ?
Débuté par Denis, 04 sep. 2023 06:56 - 11 réponses
#1
Membre enregistré
186 messages
Posté le 04 septembre 2023 - 06:56
Bonjour,
Je travaille actuellement avec OPENSTREETMAP et LEAFLET (calcul de l'azimut pour des panneaux solaires).
J'affiche une carte dans un champ HTML et lorsque je clique sur la carte, je souhaite récupérer les coordonnées Latitude/Longitude pour les mettre dans 2 champs Windev.

Côté HTML, avec un peu de javascript, mes données sont bien là : J'arrive à les envoyer dans le presse-papiers Windows sous la forme LAT,LONG.

Côté WINDEV, j'ai mis mon code de récupération dans l'évènement "BOUTON GAUCHE ENFONCE" du champ HTML.

xCoordest une chaîne=PressePapier()
SAIS_LATITUDE=ExtraitChaîne(xCoord,1,",")
SAIS_LONGITUDE=ExtraitChaîne(xCoord,2,",")


Le souci, c'est que j'ai toujours un décalage entre ce que je récupère dans WINDEV et ce que j'ai cliqué sur la carte.

Exemples
1er clic sur la carte (latitude/longitude = rien)
2nd clic sur la carte (latitude/longitude du 1er clic)
3eme clic sur la carte (latitude/longitude du 2nd clic)
etc...

Si j'utilise l'évènement DOUBLE-CLIC GAUCHE du champ HTML, c'est ok.

>Je rate un truc, mais je ne comprends pas quoi...
#2
Posté le 04 septembre 2023 - 09:13
Bonjour,

Tu dois gérer ça en javascript dans ta page HTML.

Dans ton évènement de clic, tu dois faire appel à une procédure WLanguage (je te laisse gérer tes différents cas)

Exemple :
try {
WL.Execute( 'MAP_Draw_Update' , JSON.stringify( GeoJson_Update ) );
} catch (error) {
console.log( 'WL.Execute( \'MAP_Draw_Update\' );' );
}
>
#3
Membre enregistré
1 009 messages
Posté le 04 septembre 2023 - 15:13
Bonjour,
effectivement, comme l'a écrit julien, il faut passer par une procédure WLanguage.
Comme j'ai ça sous la main, voici un exemple d'une carte toute simple :

ChaineJSest une chaîne
// Remise à zéro du champs html : évite l'erreur du multi clic
HTML1="<html></html>"

ChaineJS= [
<html>
<head>
<title>Carte Leaflet</title>
<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="CarteID" style="height:100%;width:100%;"></div>
<script>
var MaCarte = L.map('CarteID').setView([42.41, 2.58],5);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
minZoom:2,
maxZoom:18
}).addTo(MaCarte);

MaCarte.on('click',FUNCTION(e) {
varCoordonnee=e.latlng.lat+";"+e.latlng.lng;
WL.Execute("ProcCoordFromJS",Coordonnee);
});

</script>
</body>

</html>
]
HTML1=ChaineJS


puis la procédure globale :

ProcedureProcCoordFromJS(t)
VarCoordLatest une chaîne=ExtraitChaîne(t,1,";",DepuisDébut)
VarCoordLonest une chaîne=ExtraitChaîne(t,2,";",DepuisDébut)
ToastAffiche("Latitude : "+VarCoordLat+" - Longitude : "+VarCoordLon,toastCourt,cvMilieu)


Ne pas oublier dans la description du champs HTML1 de décocher "interdit l'exécution des scripts Javascript"
puis de cocher "Autoriser l'appel de WLanguage ..."

>Cdlt
#4
Membre enregistré
186 messages
Posté le 05 septembre 2023 - 01:33
Bonjour,
Désolé pour la réponse tardive (hosto).
Un grand merci à vous deux. Je ne connaissais pas cette fonction du champ HTML.
Voilà le code définitif qui fonctionne à merveille

//--- VARIABLES
ChaineWEBest une chaîne

//--- RàZ CHAMP HTML : Eviter l'erreur du multi clic
HTML_MAP="<html></html>"

// Code HTML-JS
ChaineWEB= [
<html>
<head>
<title>Solar panel position</title>
<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>
<style>
html,body,#CarteID{height:100%;width:100%;padding:0px;margin:0px;}
</style>
</head>
<body>
<div id="CarteID"></div>
<script>
var MaCarte = L.map('CarteID').setView([6.9, 100.4],10);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
minZoom:2,
maxZoom:19
}).addTo(MaCarte);
varMarker;
MaCarte.on('click',FUNCTION(e) {
IF(Marker){MaCarte.removeLayer(Marker);}
Marker=L.marker(e.latlng).addTo(MaCarte);
varCoordonnee=e.latlng.lat.toFixed(6) +";"+e.latlng.lng.toFixed(6);
WL.Execute("ProcCoordFromJS",Coordonnee);
});
</script>
</body>
</html>
]
HTML_MAP=ChaineWEB


La procédure globale où je remplis les champs

ProcedureProcCoordFromJS(xCoord="")
SIxCoord=""ALORS RETOUR
PV_ORIENTATION.SAIS_LATITUDE=ExtraitChaîne(xCoord,1,";",DepuisDébut)
PV_ORIENTATION.SAIS_LONGITUDE=ExtraitChaîne(xCoord,2,";",DepuisDébut)
CALCULS_ORIENTATION_AZIMUT()
>
#5
Membre enregistré
135 messages
Posté le 05 septembre 2024 - 18:24
Bonjour Denis,

J'ai voulu utiliser ton code et vu l absence de résultat, j'a testé à partir de ma page WEBDEV le lien ci_dessous
"https://www.openstreetmap.org/copyright/…"

et j' obtenu le message suivant : OpenstreetMap n'autorise pas la connexion





As tu une explication à me donner ?

Bien cordialement

--
>Dede 110 Windev depuis version 1.5
#6
Membre enregistré
1 009 messages
Posté le 05 septembre 2024 - 21:55
Bonjour,
Vous êtes sur le forum Windev et je ne connais pas les contraintes liées à Webdev.
Ceci dit, votre code permettrait peut-être de déceler une faille.
Eventuellement, essayez ce code épuré pour vérifier si ça fonctionne :

ChaineWEBest une chaîne
ChaineWEB= [
<html>
<head>
<title>Solar panel position</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<style>
html,body,#CarteID{height:100%;width:100%;padding:0px;margin:0px;}
</style>
</head>
<body>
<div id="CarteID"></div>
<script>
var MaCarte = L.map('CarteID').setView([6.9, 100.4],10);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
minZoom:2,
maxZoom:19
}).addTo(MaCarte);
</script>
</body>
</html>
]
HTML1=ChaineWEB


Mais il reste que le forum Webdev serait plus à même de vous orienter concernant les spécificités de Webdev (faites même une recherche "Leaflet" sur ce forum Webdev )
>Cdlt
#7
Posté le 25 octobre 2024 - 12:28
Bonjour, Cédric_34

Voilà. Je fais une petite application dans laquelle j'affiche une carte OSM (grâce à vos conseils. Merci).
J'ai donc une table Webdev avec eb face un champ HTML qui doit afficher une carte OSM. A chaque sélection d'une ligne j'aimerais charger la carte générée en html qui est en local sur le pc.
gpPageHTMLest une chaîne=fChargeTexte(ComplèteRep(fRepExe())+"LeafLet_Carte_000.html")
HTML1=gpPageHTML

Au premier clic sur une ligne de la table, la carte s'affiche sans problème et c'est tout. Sur les autres lignes, plus rien ne s'affiche pourtant la variable gpPageHTML contient bien le code html affiché précédemment.
>Je ne sais plus quoi et je bloque complètement. MERCI D'AVANCE.
#9
Membre enregistré
1 009 messages
Posté le 25 octobre 2024 - 20:58
Désolé, j'ai des soucis en ce moment et pas trop de temps à consacrer au forum.
La difficulté pour vous répondre est que vous développez sur Webdev.
Je ne peux que vous orienter sur le forum Webdev qui sera plus à même de vous aider, mais je soupçonne que votre problème est lié à ceci :

https://forum.pcsoft.fr/fr-FR/pcsoft.fr.webdev/79361-maj-champ-html-avec-leaflet/read.awp

>Cdlt
#10
Membre enregistré
1 009 messages
Posté le 25 octobre 2024 - 22:59
Je vais encore ajouter une information si la solution précédente ne peut être appliquée :
Essayez d'ajouter au début de votre code :

HTML1="<html></html>"


pour libérer le champ HTML, donc la variable.
Ce code apparaît dans le code des liens que je vous ai fourni car l'erreur doit être semblable à l'erreur sur Windev, à savoir que le fait de relancer la procédure pour mettre à jour la carte provoque une erreur.

>Cdlt
Message modifié, 25 octobre 2024 - 23:01
#11
Membre enregistré
186 messages
Posté le 27 octobre 2024 - 09:17
Bonjour,

Cà vaut ce que çà vaut, mais le code ci-dessous fonctionne chez moi.
Dites moi si çà fonctionne pour vous

Une fenêtre Windev contenant :
1 champ HTML nomme HTML_OPENSTREETMAPS
2 champs de saisie numérique SAIS_LATITUDE ET SAIS_LONGITUDE
2 procédures locales : RECUP_OPENSTREETMAPS() et OSM_LAT_LONG_FROM_JS()

//============================================================================
//--- AFFICHER UNE CARTE OPENSTREETMAPS AVEC CLIC ET RECUP LATITUDE/LONGITUDE
//============================================================================
ProcedureRECUP_OPENSTREETMAPS()

//--- VARIABLES
ChaineWEBest une chaîne
Chaine_Finaleest une chaîne

// Construction du code HTML + JAVASCRIPT
ChaineWEB= [
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="crossorigin="" />
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" />
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="crossorigin=""></script>
<script type='text/javascript' src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
<script type='text/javascript' src='https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js'></script>
<style type="text/css">#map{height:100%;width: 100%;}</style>
</head>
<script type="text/javascript">
var theme = 'https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png';
var lat = %1;
var lon = %2;
var zoom = 15;
var macarte = null;
var marker = null;

function initMap(){

// Création de l'objet "macarte" et inserton dans le DIV HTML nommé "map"
macarte = L.map('map').setView([lat, lon],zoom);

// Récupération par Leaflet des cartes sur un serveur : openstreetmap.fr
L.tileLayer(theme, {
attribution: 'Données©OpenStreetMap/ODbL',
minZoom:2,
maxZoom:20
}).addTo(macarte);

// Gestion du clic gauche : Effacement du marqueur existant / Ajout du marqueur / Récupération latitude et longitude pour Windev
macarte.on('click',onMapClick);
}

FUNCTIONonMapClick(e) {
IF(Marker){macarte.removeLayer(Marker);}
Marker=L.marker(e.latlng).addTo(macarte);
varCoordonnee=e.latlng.lat.toFixed(6) +";"+e.latlng.lng.toFixed(6);
WL.Execute("OSM_LAT_LONG_FROM_JS",Coordonnee);
}

$(Document).ready(FUNCTION(){initMap();});
</script>
<div id="map"></div>
</html>
]

//--- REMPLACE LES PARAMETRES %1 et %2 DANS LA CHAINE HTML AVEC DES VALEURS PAR DEFAUT
SISAIS_LATITUDE=0ALORSSAIS_LATITUDE=6.969034
SISAIS_LONGITUDE=0ALORSSAIS_LONGITUDE=100.486703

//--- RECONSTRUCTION DU CODE HTML + JAVASCRIPT
Chaine_Finale=ChaîneConstruit(ChaineWEB,SAIS_LATITUDE,SAIS_LONGITUDE,"/lcompass-overlay.png")

//--- RàZ du CHAMP HTML : Eviter l'erreur du multi clic
HTML_OPENSTREETMAPS="<html></html>"

//--- AFFICHAGE DE LA CARTE AUX BONNES COORDONNEES
HTML_OPENSTREETMAPS=Chaine_Finale


//====================================================
//--- RECUPERATION DE LATITUDE ET LONGITUDE PASSE DEPUIS LE JAVASCRIPT
//====================================================
ProcedureOSM_LAT_LONG_FROM_JS(xCoord="")

SIxCoord=""ALORS RETOUR
OSM1.SAIS_LATITUDE=ExtraitChaîne(xCoord,1,";",DepuisDébut)
OSM1.SAIS_LONGITUDE=ExtraitChaîne(xCoord,2,";",DepuisDébut)
>
#12
Membre enregistré
1 009 messages
Posté le 06 novembre 2024 - 14:35
Bonjour
La balise code du forum modifie le code. Il faut remplacer FUNCTION par function (en minuscule)
Tout comme : ChaineJSest une chaîne (où l'espace est supprimé après ChaineJS)

Le code du Post #3 fonctionnera si vous rectifiez.

>Cdlt
→ Revenir à WINDEV 2025