PC SOFT

FORUMS PROFESSIONNELS
WINDEVWEBDEV et WINDEV Mobile

Accueil → WINDEV 2024 → Windev Openstreetmap et Leaflet
Windev Openstreetmap et Leaflet
Débuté par Cédric_34, 31 mai 2018 18:47 - 13 réponses
Membre enregistré
489 messages
Posté le 31 mai 2018 - 18:47
Bonjour à tous,
* Je suis en windev 15 (je passerai en 23 si je n'ai pas d'autre choix).
* J'ai très peu développé et je n'avais jamais utilisé le champs HTML.
* je souhaite utiliser un champ HTML dans la page d'un projet afin d'afficher une carte OpenStreetMap (à l'aide de LeafLet).
* J'ai donc placé un champs HTML (nommé : HTML_MAP) et un bouton.
* Code du Bouton :

HTML_MAP = "D:\Windev_doc\Leaflet.html"

* puis j'ai créé à l'emplacement indiqué un fichier Leaflet.html contenant ce code récupéré sur le site LeafLet :

------------------------------------
<html>
<head>

<title>Quick Start - Leaflet</title>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>

</head>
<body>

<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('

', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);

</script>

</body>
</html>


------------------------------------

* Pas de problème, mon champs HTML_MAP affiche bien la carte comme prévu.
* Je souhaite maintenant placé le code HTML directement dans le bouton, ce qui donne :


------------------------------------

sLienHTTP est une chaîne
sLienHTTP = [
<html>
<head>

<title>Quick Start - Leaflet</title>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>

</head>
<body>

<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('

', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);

</script>

</body>
</html>
]
HTML_GOOGLE = sLienHTTP


------------------------------------

* et ici, rien n'y fait. j'ai un message <<L>> est indéfini.
* je désespère car ça fait plusieurs jours que je suis bloqué sur cette erreur.
* Je me pose la question de savoir si ceci pourrait être dû à Windev 15, mais je ne pense pas.

Mon objectif est d'afficher la carte avec des marqueurs, puis récupérer le clic pour ouvrir un document associé.
j'ai vu sur le forum le post de Jerome sur ce lien Webdev , qui permet de récupérer le clic sur la carte :

https://forum.pcsoft.fr/fr-FR/pcsoft.fr.webdev/64571-openstreepmaps-dans-webdev-64577/read.awp…

L'un de vous aurait-il un petit bout de code qui fonctionne ou un tutoriel de démarrage sur le sujet?

Merci pour votre aide
salutations
Posté le 04 octobre 2018 - 15:32
Exactement même symptôme ici en version WINDEV 23.

Quelqu'un a-t-il une piste ?
Posté le 07 octobre 2018 - 17:40
Bonjour à tous

Je suis tombé sur cet ancien post
J'espere que je vais obtenir une petite aide !!!

De même que CEDRIC -34 j'ai tenté exactement la même chose le même message d'erreur <<L >> indéfini , je pourrais éventuellement contourné cela plus tard si je parviens à faire comme vous un fichier externe HTML que je charge dans le champ

Je ne sais pas comment vous avez fait que ce soit par une affectation directe au champ HTML_CARTE =.......Html ou par un fchargetexte (...\.HTML) j'obtiens la même chose mon champ HTML m 'affiche que le code HTML du fichier externe et n'exécute rien.

J'ai cependant pris un jeton sur le site Mapbox, lu et relu n fois mon code
Donc si vous y êtes parvenu CEDRIC-34 par une affectation j'aimerais savoir comment votre page a pu s'afficher .
J'ai même repris votre code . La différence j'utilise la version 1.3.4 et je ne fais que recopier leur exemple .
Merci de votre aide , je dois certainement oublié quelque chose ...

RIAD

Mon code ci dessous ...
//
sChaine_carte est une chaîne = [
<html>
<head>

<title>Quick Start - Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>

</head>

<body>

<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('

', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'pk.eyJ1IjoiaG91cmNoYW5pIiwiYSI6ImNqbXhyczE1MDB4bTUza3BoZXZkMnI0emsifQ.AniQEtfLHqxrk1gfZTMrJA'
}).addTo(mymap);
</script>

<body>
<html>
]
HTML_carte=schaine_carte
Membre enregistré
962 messages
Popularité : +183 (185 votes)
Posté le 08 octobre 2018 - 07:39
hello,
il y a des erreurs dans la chaîne de la page HTML ( RC en trop , mauvais caractères).
plutôt (pas le chien) que d'utiliser un champ HTML pour afficher une page HTML, j'utilise le contrôle dotnet WebBrowser :





Avec le code suivant :
Chaine_carte est une chaîne = [
<html>
<head>

<title>Quick Start - Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>

</head>

<body>

<div id="mapid" style="width: 640px; height: 480px;"></div>
<script>
var mymap = L.map('mapid').setView([43.6382, 3.8388], 16);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'pk.eyJ1IjoiaG91cmNoYW5pIiwiYSI6ImNqbXhyczE1MDB4bTUza3BoZXZkMnI0emsifQ.AniQEtfLHqxrk1gfZTMrJA'
}).addTo(mymap);
L.marker([43.639897,3.837748 ],{ draggable: True }).addTo(mymap);
</script>

<body>
<html>
]
WebBrowser1.DocumentText="0";
WebBrowser1.Document.OpenNew(True)
WebBrowser1.Document.Write(Chaine_carte)
WebBrowser1.Refresh()

et cela donne :





PCSOFT est-il à la bonne place ;)

--
Ami calmant, J.P
Posté le 08 octobre 2018 - 14:37
Bonjour à tous

Merci à Jurassik et pour votre réactivité
J'utilise rarement les forums mais la je suis impressionné

Cependant vous aviez raison j ai mis des RC au lieu de retour à la ligne.

J'ai repris votre code pour test après avoir mis le champ .NET recommandé ainsi que la classe (Tout cela est clair et a été fait)


lors de mon test j ai CEPENDANT successivement toujours 2 messages avant que la carte ne s'affiche !!!
(ligne 2, caractere 1 <<L>> est indefini) puis (ligne 24, caractere 1 << True >> est indéfini)

A nouveau mon code je vous remercie pour votre aide
//
Chaine_carte est une chaîne = [
<html>
<head>

<title>Quick Start - Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>

</head>

<body>

<div id="mapid" style="width: 640px; height: 480px;"></div>
<script>
var mymap = L.map('mapid').setView([14.701946, -17.460317], 16);
L.tileLayer('

', {attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'pk.eyJ1IjoiaG91cmNoYW5pIiwiYSI6ImNqbXhyczE1MDB4bTUza3BoZXZkMnI0emsifQ.AniQEtfLHqxrk1gfZTMrJA'
}).addTo(mymap);
L.marker([14.701946, -17.460317],{ draggable: True }).addTo(mymap);
</script>

<body>
<html>
]
WebBrowser1.DocumentText="0";
WebBrowser1.Document.OpenNew(True)
WebBrowser1.Document.Write(Chaine_carte)
WebBrowser1.Refresh()
Membre enregistré
962 messages
Popularité : +183 (185 votes)
Posté le 08 octobre 2018 - 17:50
hello ,
le souci c'est que le formateur de code du forum a tranformé true en True.
il faut remplacer draggable: True par draggable: true et cela devrait marcher

--
Ami calmant, J.P
Posté le 08 octobre 2018 - 20:58
Hello Jurassik,

Je vous remercie encore pour le True en true effectivement c'est cela . J ai bien ma carte et le marqueur
Mais toujours ce caractere <<L>> est indéfini au lancement

Or j'ai scanné à nouveau plus un seul RC , visiblement vous avez l'oeil pouvez vous à nouveau m'accorder de votre temps précieux et me dire si c'est bien une histoire de RC car je n en vois plus .Puis l(igne 2 caractere 1 <<L>> indéfini >> ???

Un lien vers cette image de mon code et ces fameux retour à la ligne , perso je ne vois rien ca fait 2h que je teste en vain.







Merci encore

RIAD
Membre enregistré
962 messages
Popularité : +183 (185 votes)
Posté le 08 octobre 2018 - 22:46
si je copie colle le code qu'il y a dans mon message avec le code en remplaçant le draggable: True par draggable: true, je n'ai pas cette erreur.
premier essai à faire : copier la partie HTML du code dans un fichier leaflet.html et l'ouvrir avec internet explorer.
deuxième essai : lancer ce code :
ChaineTestIE est une chaîne =[
<HTML>
<HEAD>
<TITLE>Navigateur</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<CENTER>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("Navigateur : "+ navigator.appName + "<br>");
document.write("Version : "+ navigator.appVersion + "<br>");
document.write("Mode : "+ document.documentMode + "<br>");
</SCRIPT>
</BODY>
</HTML>
]

WebBrowser1.DocumentText="0";
WebBrowser1.Document.OpenNew(True)
WebBrowser1.Document.Write(ChaineTestIE)
WebBrowser1.Refresh()


si dans ce qui est affiché il y a quelque chose comme cela :
Navigateur : Microsoft Internet Explorer 
Version : 4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/7.0;
Mode : 5

c'est que le webBrowser pointe vers la version 7.0 de I.E (MSIE 7.0)
si c'est ceci :
Navigateur : Netscape
Version : 5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko
Mode : 11

webBrowser pointe vers la version 11.0 de I.E (rv:11.0)

chez moi je pointe vers I.E 11.0 .

[EDIT] Si tu es sous windows 10, il y a moyen de faire pointer webBrowser vers Edge (le nouveau navigateur de Microsoft) ,
il faut mettre ceci
<HTML>
<HEAD>
<!-- Use lastest version of Internet Explorer -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Insert other header tags here -->
<TITLE>Navigateur</TITLE>
</HEAD>


voici ce que j'obtiens :
Navigateur : Netscape
Version : 5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.9200
Mode : 11



--
Ami calmant, J.P
Message modifié, 08 octobre 2018 - 23:16
Posté le 09 octobre 2018 - 19:03
Bonsoir Jurassik

J ai effectivement fait ce que tu as indiqué j ai même téléchargé IE11 (j'étais en 10) regardez toutes les options avancés

mais comme j ai dit tout est OK puisque la carte s'affiche avec plusieurs marqueurs reste ce fichu message non bloquant.

Mais j'ai identifié le message d 'erreur
c'est le L du premier :L.map : var mymap = L.map('mapid').setView([14.701946,-17.460317], 16)

J ai mêmé remplacé par ceci et rien a y faire !!!
var mymap = L.map('mapid', {
center: [14.701946,-17.460317], ...oui je suis basé au Sénégal
zoom: 16
});

Alors que l'objet est par la suite sans problème utilisé par L.tileLayer, L.marker ..

Ma config Windev 18 bientot 24, Win 7 pro +64b

J'ai même cherché à dévalider le message du script mais pas de silent ou autre propriété sur champ .net 2.0

Merci si tu peux encore m'aider

RIAD

Question a 2 francs : Quand tu copies de windev ton code HTML dans word récupères tu des RC alors que tu as bien mis des retour ligne car moi c'est mon cas . aussi je me demande si je n ai pas toujours des RC et retour ligne ne sont pas pris en compte et comme on ne peut les visualiser sous l'éditeur de Windev !!!

//le code concerné
<body>

<div id="mapid" style="width: 640px; height: 640px;"></div>
<script>
var mymap = L.map('mapid', {
center: [14.701946,-17.460317],
zoom: 16
});
L.tileLayer('

', {attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'pk.eyJ1IjoiaG91cmNoYW5pIiwiYSI6ImNqbXhyczE1MDB4bTUza3BoZXZkMnI0emsifQ.AniQEtfLHqxrk1gfZTMrJA'
}).addTo(mymap);
L.marker([14.701946,-17.460317 ],{ draggable: true }).addTo(mymap).bindPopup('riad.');
L.marker([14.700987,-17.468853 ],{ draggable: true }).addTo(mymap).bindPopup('riad.');
</script>
<body>
Membre enregistré
962 messages
Popularité : +183 (185 votes)
Posté le 10 octobre 2018 - 07:14
hello,
essaie de rajouter :
alert('Mon Script');

au début du script juste avant le L.map .
et de remplacer :
webBrowser1.DocumentText="0";
webBrowser1.Document.OpenNew(True)
webBrowser1.Document.Write(Chaine_carte)
webBrowser1.Refresh()

par :
WebBrowser1.DocumentText = Chaine_carte;


--
Ami calmant, J.P
Posté le 10 octobre 2018 - 10:57
Bonjour Jurassik

Je te réponds de suite et merci et encore bravo !!!!!!!
La dernière recommandation est la bonne mettre : WebBrowser1.DocumentText = Chaine_carte;

ET ca a fonctionné pour ne pas finir stupide penses tu que c'est dû à la version 18 et donc mon champ .Net n'implémente pas de la même façon pourtant il lit la même classe que le tien et doit réagir à l'identique !!!!

Dans tous les cas un grand merci ,

RIAD
Posté le 10 octobre 2018 - 11:08
Jurassik,

Pour terminer cette discussion et en sortir un bilan

la personne qui a lancé le sujet a exactement le même code , il était en Windev 15 , idem pour le second en windev 23
ET ils ont eu le même problème que moi , ce L.map avec un champ HTML
Donc comme tu l a recommandé la solution est le champ .Net 2.0
avec les 2 syntaxes possibles pour l'affichage de la carte

ou
WebBrowser1.DocumentText="0";
WebBrowser1.Document.OpenNew(True)
WebBrowser1.Document.Write(Chaine_carte)
WebBrowser1.Refresh()

ou cela quasi sur à 100%

WebBrowser1.DocumentText = sChaine_carte

Merci

RIAD
Posté le 23 août 2019 - 18:10
Bonjour,

j'ai essayé de modifier le code ci-dessus pour ajouter la possibilité de passer en paramètre l'adresse sous forme "rue + NPA +Ville" , mais sans succès ...

Vous savez si cela est possible ?
Posté le 18 octobre 2020 - 11:41
Bonjour,

Très bien votre réponse (de 2018) concernant OSM dans .NET.
Pourriez-vous me donner les modifications pour y inclure un tracé depuis un fichier ou un tableau contenant +/- 20.000 coordonnées (latitude, longitude) et sans afficher les marqueurs.
Comme la copie image jointe.
Merci d'avance et belle journée.

JM.