PC SOFT

PROFESSIONAL NEWSGROUPS
WINDEVWEBDEV and WINDEV Mobile

Home → WINDEV 2024 → (WD24) Carte et géocodage avec OSM/Leaflet/Nominatim
(WD24) Carte et géocodage avec OSM/Leaflet/Nominatim
Started by Roland C., Mar., 04 2019 10:09 AM - 17 replies
Registered member
4 messages
Popularité : +2 (2 votes)
Posted on March, 04 2019 - 10:09 AM
Bonjour,

Si comme moi, vous n’avez pas envie de confier votre carte bancaire à Google® pour utiliser Google Maps ® dans vos applications développées avec WinDev, je viens de mettre à disposition dans le site "dépôt" de PC-Soft (https://depot.pcsoft.fr/), une collection de procédures qui remplit quelques fonctions de bases en utilisant Open Street Map, Leaflet et Nominatim :

+ Affichage centrée d’une carte
+ Positionnement de marqueurs
+ Affichage d’un texte au clic sur le marqueur
+ Personnalisation de l’image du marqueur
+ Géocodage d’une adresse (adresse vers coordonnées)

Et tout cela avec un simple champ HTML de Windev.

Une mini-application de démonstration est fournie : les sources (WinDev 24) commentées sont incluses et librement réutilisables.

Pour en savoir plus ou compléter ces fonctions de bases :

Openstreetmap : https://www.openstreetmap.fr/
Leaflet : https://leafletjs.com/reference-1.4.0.html
Nominatim : https://wiki.openstreetmap.org/wiki/Nominatim

Bon développement
Roland Cottin roland.cottin@cirad.fr
Posted on March, 04 2019 - 12:47 PM
Bonjour Roland et merci pour ce code.
Il est trop rare de trouver le code des projets et je vois que vous n'avez pas hésité à publier le votre.
J'avais moi-même posté une question sur le forum : Windev Openstreetmap et Leaflet
J'ai donc une question : qu'est ce que Patch_IE ?
Je suis en windev 15, je passerai en 24 si cela me permet de créer l'appli souhaitée.
Salutations
Posted on March, 04 2019 - 2:13 PM
Merci pour le partage !:)
Posted on March, 04 2019 - 2:19 PM
"Cédric_34" avait énoncé :
Bonjour Roland et merci pour ce code.
Il est trop rare de trouver le code des projets et je vois que vous n'avez
pas hésité à publier le votre.
J'avais moi-même posté une question sur le forum : Windev Openstreetmap et
Leaflet
J'ai donc une question : qu'est ce que Patch_IE ?
Je suis en windev 15, je passerai en 24 si cela me permet de créer l'appli
souhaitée.
Salutations


Bonjour Cédric,

Le "Patch_IE" est un bout de code de PC-Soft qui force la compatibilité
du champ HTML de Windev avec les évolutions de IE/Windows

Voici la partie "importante" de ce patch :
<code>
sNomExecutable est une chaîne
nVersionIE est un entier

Clé est une chaîne = "HKEY_CURRENT_USER\Software\Microsoft\Internet
Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION"

//pour l'exécutable en cours
sNomExecutable=fExtraitChemin( ExeInfo(exeNom),fFichier+fExtension)

RegistreCréeClé(Clé)


</code>

Bonne journée
RC

--
Roland Cottin
CRB-T Cirad
34000 Montpellier
Registered member
37 messages
Posted on March, 06 2019 - 12:25 PM
Bonjour,
quelqu'un pourrait-il avoir une version 22 de ce projet
Merci

--
Tout est possible en informatique, il suffit d'avoir le temps et l'argent
Posted on March, 31 2019 - 12:21 PM
Bonjour Roland C et merci pour ce projet qui va certainement mettre utile.

J'essaye d'adapter votre code car j'ai windev20 et j'ai une erreur dont je n'arrive pas à trouver.






a ce niveau MyResult est un JSON //<description="search"> JSON a quoi correspond?

merci pour l'aide.

Amitiés
Posted on March, 31 2019 - 6:56 PM
J'ai essayé ce code
MyResult est un Variant = JSONVersVariant( ?)


mais je ne sais pas quoi mettre entre les parenthèses.

merci
Posted on March, 31 2019 - 9:09 PM
Bonsoir,

merci j'ai trouvé voici le code

Procedure GetLongLat(stMyAdress est une STGeo_Adress)

sMyRequest est une chaîne
sAdressToFind est une chaîne
//MyResult est un JSON //<description="search">
MyResult est un Variant = JSONVersVariant(MyResult)
vMyData est un Variant
stGeoResult est un STGeo_Point

SI stMyAdress.sGeo_Street<>"" ALORS
sAdressToFind=stMyAdress.sGeo_Street+"+"
FIN
SI stMyAdress.sGeo_city<>"" ALORS
sAdressToFind=sAdressToFind+stMyAdress.sGeo_City+"+"
FIN
SI stMyAdress.sGeo_County<>"" ALORS
sAdressToFind=sAdressToFind+stMyAdress.sGeo_County+"+"
FIN
SI stMyAdress.sGeo_state<>"" ALORS
sAdressToFind=sAdressToFind+stMyAdress.sGeo_state+"+"
FIN
SI stMyAdress.sGeo_Country<>"" ALORS
sAdressToFind=sAdressToFind+stMyAdress.sGeo_Country
FIN

SI Droite(sAdressToFind,1)="+" ALORS
sAdressToFind=Gauche(sAdressToFind,Taille(sAdressToFind)-1)
FIN

SI sAdressToFind<>"" ALORS
sMyRequest = ChaîneVersUTF8("https://nominatim.openstreetmap.org/search?q="+sAdressToFind+"&limit=1&format=json")
HTTPRequête(sMyRequest)
MyResult=HTTPDonneRésultat()
vMyData=JSONVersVariant(MyResult)
stGeoResult.sGeo_Lib=vMyData[1].display_name
stGeoResult.rGeo_Lat=vMyData[1].lat
stGeoResult.rGeo_Lon=vMyData[1].lon
stGeoResult.rGeo_Trust=vMyData[1].importance
FIN

RENVOYER stGeoResult





Procedure InitMarker(sPathIcon est une chaîne)

sTmpIcon est une chaîne
SI sPathIcon="" ALORS
RENVOYER ""
SINON
sTmpIcon=[
var myIcon = L.icon({
iconUrl: '%1',
});
]
RENVOYER ChaîneConstruit(sTmpIcon,sPathIcon)
FIN




Procedure InitCarte(sMonTitre est une chaîne,nMapLargeur est un entier, nMapHauteur est un entier, nZoomInit est un entier,tabCurPoints est un tableau de STPosition)

sTmpHTM est une chaîne
sTmpPoint est une chaîne
stCurPoint est une STPosition
rMoyLat est un réel
rMoyLon est un réel
nBPoint est un entier

// Exécutez Patch_IE avant d'appeller InitCarte pour éviter un bug IE à l'exécution de l'Exe compilé !!!


sTmpHTM=[
<html>
<head>
<title>%1</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>
</head>
<body>

<div id="mapid" style="width: %2; height: %3px;"></div>

<script>
var mymap = L.map('mapid').setView([%5, %6], %4);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
minZoom: 1,
maxZoom: 20
})
.addTo(mymap);

]

POUR TOUT stCurPoint de tabCurPoints
sTmpPoint=SetPoint(stCurPoint)
sTmpHTM=sTmpHTM+sTmpPoint
SI stCurPoint.rLatitude<>0 ET stCurPoint.rLongitude<>0 ALORS
rMoyLat=rMoyLat+stCurPoint.rLatitude
rMoyLon=rMoyLon+stCurPoint.rLongitude
nBPoint=nBPoint+1
FIN
FIN

SI nBPoint>0 ALORS
rMoyLat=rMoyLat/nBPoint
rMoyLon=rMoyLon/nBPoint


Bonne soirée
Registered member
33 messages
Popularité : +2 (2 votes)
Posted on April, 08 2019 - 9:36 PM
Bonsoir à tous,

petite question est-il possible d'afficher la cartographie en relief ? et si oui comment faut il faire?

Cordialement.
Registered member
21 messages
Posted on July, 25 2019 - 1:27 PM
Bonjour Roland,
Merci de ce code.
J'ai un souci, à chaque exécution de votre code (comme des miens que j'avais développés précédemment).
J'ai une erreur systématique Javascript (voir image ci-dessous).
Dans le registre j'ai dans \HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION une clé OSM24.exe - REG_DWORD - 0x00002af9
Auriez-vous une explication ?
Bien cordialement.




--
Martin
Wx 24 (Windev+Mobile+Web)
Posted on June, 30 2020 - 2:22 PM
il suffit de mettre le code suivant avant d'initialiser la carte pour régler les problèmes JS (initcarte de la col de proc)

HTM_carte = "<html><head><head></head><body></body></body></html>>"
HTM_carte = initcart(...)
Registered member
179 messages
Popularité : +2 (4 votes)
Posted on May, 07 2021 - 10:33 AM
Bonjour Roland C.

Super ton code, bien écrit, propre...bravo.

J'utilise ton code pour afficher des markeurs avec Leaflet et cela fonctionne à merveille.

Dans mon application, j'ai 4000 points GPS pour un département.
Du coup, j'ai modifié ton code en y ajoutant des clusters car si l'utilisateur affiche les 4000points, c'est illisible.

J'ai modifié ainsi la procédure PROCÉDURE InitCarte():
*************************************************************
sTmpHTM=[
<html>
<head>
<title>%1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin="">
</script>
<script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js"></script>
</head>
<body">
<style>body { padding: 0; margin: 0; } html, body, #mapid { height: 100%; width: 100%; }</style>
<div id="mapid"</div>
<script>
var markers = []; // Nous initialisons la liste des marqueurs pour centrage après
var mymap = L.map('mapid', {zoomSnap: 0.25}).setView([46.90296, 1.90925], 6);
L.tileLayer('

', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
minZoom: 1,
maxZoom: 18
})
.addTo(mymap);
var clusters = L.markerClusterGroup();
]
POUR TOUT stCurPoint DE tabCurPoints
sTmpPoint = SetPoint(stCurPoint)
sTmpHTM = sTmpHTM+sTmpPoint
SI stCurPoint.rLatitude<>0 ET stCurPoint.rLongitude<>0 ALORS
rMoyLat = rMoyLat+stCurPoint.rLatitude
rMoyLon = rMoyLon+stCurPoint.rLongitude
nBPoint = nBPoint+1
FIN
FIN
*************************************************************

Et dans la procédure SetPoint(stCurPoint est STPosition) j'ai modifié ainsi :
*************************************************************
sTmpPos=[
var marker = L.marker([%1, %2])
.bindPopup('%3')
.addTo(clusters);
markers.push(marker); // Nous ajoutons le marqueur à la liste des marqueurs
]
*************************************************************

En terme de temps de réponse, cela fonctionne bien si j'ai mois de 1000 points (selon le filtre en amont de l'utilisateur).
Mais pour afficher la totalité de mes 4000 points dans des clusters c'est super long (sur IPhone il faut compter 2 secondes mais sur Android il faut compter 30 voire 40secondes).

Aurais-tu une idée pour optimiser le temps de réponse pour afficher tous ces points dans des clusters ?

Merci pour ton aide éventuelle.

Cdlt,
Pat
Registered member
32 messages
Posted on September, 23 2021 - 8:54 AM
Bonjour et merci pour ce code.
Je cherche aussi le moyen d'avoir le kilométrage entre les deux points par la route. Est-ce que quelqu'un a la solution.
Merci d'avance,

Stéphane.
Posted on September, 23 2021 - 10:05 AM
bonjour,
tu as les api de openrouteservice.org

https://api.openrouteservice.org/v2/matrix/driving-car

curl -X POST \
'https://api.openrouteservice.org/v2/matrix/driving-car' \
-H 'Content-Type: application/json; charset=utf-8' \
-H 'Accept: application/json, application/geo+json, application/gpx+xml, img/png; charset=utf-8' \
-H 'Authorization: your-api-key' \
-d '{"locations":[[9.70093,48.477473],[9.207916,49.153868]],"metrics":["distance"],"units":"km"}'
Registered member
32 messages
Posted on October, 10 2021 - 4:21 PM
Merci.je vais tester cela.
Registered member
32 messages
Posted on October, 11 2021 - 12:07 PM
Merci ça fonctionne super la commande CURL, par contre j'ai encore un peu de mal à le mettre en commande Windev.
Registered member
32 messages
Posted on October, 11 2021 - 2:58 PM
OK j'ai trouvé pour le coder en WINDEV . Merci.
Registered member
37 messages
Popularité : +4 (4 votes)
Posted on October, 11 2021 - 3:25 PM
curl est une librairie pour, à l'origine, automatiser des récupérations d'IRC (le début d'internet).
tu as la meme chose et en mieux dans Windev : httpenvoie ou restenvoie.

--
Windev is coming !

https://www.devlgr.ovh