PC SOFT

FORUMS PROFESSIONNELS
WINDEVWEBDEV et WINDEV Mobile

Accueil → WEBDEV 23 → OpenStreepMaps dans Webdev
OpenStreepMaps dans Webdev
Débuté par Léa ETIENNE, 09 avr. 2018 09:34 - 11 réponses
Posté le 09 avril 2018 - 09:34
Bonjour

Comment intégrer OpenStreepMaps sans Webdev?
Un retour d'expérience?
Membre enregistré
113 messages
Popularité : +1 (1 vote)
Posté le 09 avril 2018 - 12:06
Bonjour Léa,

une des manières est d'utiliser la librairie Leaflet (http://leafletjs.com/).

Pour l'intégration vous pouvez commencer en mettant ce code dans l’initialisation d'une page :
MaPage..HTMLEntête = [
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
]

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

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

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map Data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-by-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);

L.marker([51.5, -0.09]).addTo(mymap);

L.circle([51.508, -0.11], {
Color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(mymap);

L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]]).addTo(mymap);


</script>
]


Bon dev!

Jérôme
Posté le 10 avril 2018 - 17:13
Bonjour Jérôme,

Un grand merci pour ta contribution : cela fonctionne parfaitement. :)

J'ai intégré différents marqueurs et j'aimerai savoir si tu sais comment récupérer en code javascript les coordonnées d'un marqueur pour déterminer l'action à effectuer. Je pense qu'il faut incorporer une ou deux lignes de code dans l'objet html puis créer une procédure javascript.

J'ai réussi en cliquant sur un point du plan à récupérer la latitude et la longitude mais c'est un peu compliqué de l'associer aux coordonnées géographiques d'un marqueur.

Merci
Léa
Membre enregistré
113 messages
Popularité : +1 (1 vote)
Posté le 10 avril 2018 - 18:55
OK super, bonne nouvelle!

Alors la méthode est correcte, voici un exemple d'implémentation :

Le code d'initialisation de la page :
MaPage..HTMLEntête = [
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
]

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

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map Data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-by-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);

L.marker([51.5, -0.09]).addTo(mymap)
.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup().on('click',clicSurUnObjet);

L.circle([51.508, -0.11], 500, {
Color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(mymap).bindPopup("I am a circle.").on('click',clicSurUnObjet);

L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]]).addTo(mymap).bindPopup("I am a polygon.").on('click',clicSurUnObjet);


var popup = L.popup();



mymap.on('click', clicAilleursSurLaCarte);


</script>
]


Le code de la procédure clicAilleursSurLaCarte en code navigateur (en WLangage, pas besoin de basculer en javascript pur) :
Procedure clicAilleursSurLaCarte()
ToastAffiche("Clic ailleurs sur la carte")


Le code de la procédure en code navigateur clicSurUnObjet :
Procedure clicSurUnObjet(e)
ToastAffiche("clicSurUnObjet"+RC+"Vous avez cliqué sur "+e.latlng.toString())
Posté le 11 avril 2018 - 10:00
Bonjour Jérôme,

Tout ceci fonctionne parfaitement.

Je n'ai pas mis le code html dans la page mais directement dans un champ HTML.
Effectivement, le code navigateur suffit...

Encore merci
C'est une belle alternative à Google Maps

Cordialement
Léa
Membre enregistré
113 messages
Popularité : +1 (1 vote)
Posté le 11 avril 2018 - 11:17
Super, content que tout fonctionne correctement! :)

C'est effectivement une très bonne alternative à Google Maps dans pleins de domaine :
- Plus de détails pour les petits chemins pédestres (les coureurs comme moi adorent!)
- Possibilité de l'utiliser "hors ligne" (parfois intéressant suivant les demandes de client qui veulent héberger toutes leur données chez eux)
- Pas de licence / utilisation limitée (pour autant que l'on héberge les données sur ses propres serveurs)

J'encourage du coup tout le monde qui lit ce post à participer à ce projet et si vous ne désirez pas ou que vous n'avez pas les connaissances utilisez des app comme StreetComplete (https://play.google.com/store/apps/details…) qui via des questions très simples permet d'améliorer la carte et ainsi de contribuer activement à ce magnifique projet!
Membre enregistré
1 115 messages
Popularité : +9 (11 votes)
Posté le 25 avril 2018 - 14:15
Bonjour,

Merci à tous deux et surtout à Jérôme pour son expertise et ses conseils :)

Pour info, les marqueurs doivent être positionnés avec 5 décimales car les valeurs retournées en code navigateur ont 5 décimales.
Je travaille encore sur deux points avec des marqueurs issus d'une base de données : comment permettre le regroupement de marqueurs (cluster de marqueurs) et comment centrer la carte avec tous les marqueurs et le bon zoom, de manière automatique.
Les deux sont réalisables d'après mes recherches.

--
Cordialement
François

http://intra.fr http://intrasoftware.fr
Membre enregistré
113 messages
Popularité : +1 (1 vote)
Posté le 27 avril 2018 - 11:44
Comme ça fait doublon je mets le lien de la réponse que j'ai faite à François ici : https://forum.pcsoft.fr/fr-FR/pcsoft.fr.webdev/64720-regroupement-marqueurs-dans-carte-openstreetmap-64723/read.awp
Membre enregistré
28 messages
Posté le 08 juin 2018 - 12:20
Bonjour,

Un grand merci à Jérôme et à tous pour ces précieuses informations.
Ca fait un moment que je veux trouver le temps pour étudier plusieurs alternatives afin de remplacer Google Maps de mes applications. Ce sont les nouvelles tarifications de Google qui m'ont obligé à prendre le temps ces derniers jours.

J'ai testé l'implémentation de Leaflet et de MapBox.
Les 2 solutions s'avèrent plutôt simples à mettre en place dans un projet WinDev/WebDev, d'autant que des tutos du genre "switch google maps to mapbox" existent.
La base du JS est très sensiblement identique. Il faut retrouver dans les documentations respectives les bonnes fonctions et ça roule.
J'ai également testé avec succès l'implémentation du service "JawgMaps" qui permet d'afficher des fonds de cartes personnalisés.
Il me reste à trouver comment déplacer un marqueur et récupérer les coordonnées du marqueur déplacé, ou encore afficher tous les marqueurs à une distance définie autour d'un marqueur en particulier, et je pourrai me passer à 100% de Google sur mes applis actuelles.

Par contre, je galère beaucoup plus pour mes applications mobiles.
J'ai compris et j'arrive à utiliser Leaflet et MapBox en créant une application avec Android Studio, mais je me prends la tête à trouver où mettre mon code, comment utiliser le champ HTML, quelles procédures utiliser, ... pour mettre ces services en place dans WinDev Mobile pour des applications Android.
Je pense que j'ai des choses à ajouter/modifier dans le manifeste bien sûr, mais pour le reste j'avoue être un peu perdu, la faute au champ carte que j'utilisais précédemment qui m'a permis un développement de fainéant ;-).

Si certains en ont fait l'expérience, je suis preneur de tous vos conseils.

Merci.
Membre enregistré
145 messages
Posté le 13 juin 2018 - 19:55
Merci à Jérôme pour ces informations précieuses ! :merci:

En réponse à Thomas, pour intégrer cela dans WM, j'ai créé un champ HTML, et dans le code d'initialisation de ce champ :

HTM_Mapbox = [
<!DOCTYPE html>
<html>
<head>

ici on copie/colle le code situé après MaPage..HTMLEntête = [
puis :

</head>
<body>

en dessous de quoi on copie/colle tout le code situé après MaPage..HTMLFinPage = [

</body>
</html>

Et ça devrait marcher.

J'ai une question : le token qui est indiqué dans ce post est-il à modifier par chaque utilisateur, ou est-il libre d'emploi sans conditions ni limites (on peut rêver...) ;(

bons dév
Christophe
Membre enregistré
28 messages
Posté le 14 juin 2018 - 11:36
Merci Christophe :merci:

C'est ce que j'ai fait dans une nouvelle fenêtre pour tester sur une application existante, mais lorsque j'exécute, j'ai des erreurs liées au javascript.
Je suis en version 22 et à lire les docs de PcSoft, je crois qu'il faudrait que je sois en VM 23 pour utiliser du javascript.
Je vais quand même faire d'autres tests en simplifiant mon code.
J'ai un peu mis ce sujet de côté pour finaliser le reste du dév sur la partie WinDev de ce projet que je dois livrer dans les prochains jours.

A côté de ça, j'ai réussi à créer une simple fenêtre avec Android Studio pour utiliser Leaflet/MapBox, mais au final, cela n'a pas d'intérêt pour moi aujourd'hui de passer par un autre outil de dév puisque j'utilise une base HFSQL commune avec l'application WinDev sous Windows.
Sinon il faut que je repense totalement mon dév avec utilisation de webservces, mais je n'ai pas le temps nécessaire et des connaissances très limitées en Java.

Pour le token, logiquement il faut créer un compte pour en obtenir un. En utilisant un token d'un autre, ça doit peut-être fonctionner ... et accessoirement passer ton traffic sur son quota ;(
Membre enregistré
28 messages
Posté le 14 juin 2018 - 14:46
Il semble que ma pause déjeuner de ce jour m'ait été bénéfique !
J'ai donc repris mon code JavaScript que j'ai simplifié en éradiquant toutes les fonctionnalités prévues pour être utilisées avec la souris dans un navigateur web.
Premier test plutôt concluant puisque j'ai enfin pu charger une page avec une carte dans mon champ HTML.

J'ai revu 2 ou 3 options de mon code et après un second essai sur une tablette, les fonctionnalités que je souhaite mettre en place sont toutes opérationnelles :D

C'est une très bonne nouvelle pour ma part pour répondre à un besoin de me passer des services de Google très rapidement.
Je vais peaufiner tout ça dans les prochains jours et voir comment je peux interagir avec mon champ HTML pour positionner un marqueur et récupérer les coordonnées GPS de ce dernier.

Encore merci pour vos précieux conseils.