PC SOFT

FORUMS PROFESSIONNELS
WINDEVWEBDEV et WINDEV Mobile

Accueil → WINDEV Mobile 24 → OpenStreepMaps dans Android (Leaflet?)
OpenStreepMaps dans Android (Leaflet?)
Débuté par François SCHAAL, 17 juil. 2018 17:15 - 21 réponses
Membre enregistré
1 239 messages
Popularité : +9 (11 votes)
Posté le 17 juillet 2018 - 17:15
Bonjour,

Quelqu'un a t'il déjà intégré une carte OpenStreepMaps dans Android éventuellement avec la librairie Leaflet ?

Faut-il passer par un champ HTML ?

Mes premiers essais sur l'émulateur ne sont guère concluants...

--
Cordialement
François

http://intra.fr http://intrasoftware.fr
Membre enregistré
138 messages
Popularité : +1 (1 vote)
Posté le 18 juillet 2018 - 09:23
Bonjour François,

la démarche est correcte, utiliser Leaflet fonctionne sous Android et iOS.

Ensuite il faut affecter dans l'initialisation du champ HTML ce code (exemple, à adapter selon le besoin) :

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

<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>

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

<div id="mapid"></div>
<script>


var redIcon = L.icon({
iconUrl: 'https://www.openstreetmap.org/assets/marker-red-172ef4ff60a0826f89e4acde3df7bef3087ad15c71ab545337828d9ad57be162.png',
iconSize: [24, 41], // size of the icon
shadowSize: [41, 41], // size of the shadow
iconAnchor: [12, 41], // point of the icon which will correspond to marker's location
shadowAnchor: [14, 41], // the same for the shadow
popupAnchor: [0, -41] // point from which the popup should open relative to the iconAnchor
});



var mymap = L.map('mapid').setView([46.44493, 6.97472], 11);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(mymap);



L.marker([46.44493, 6.97472], {icon: redIcon, zIndexOffset: 0}).addTo(mymap)
.bindPopup("Sommet de la Dent de Jaman");

var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent(e.latlng.toString())
.openOn(mymap);

}
mymap.on('click', onMapClick);
</script>


Et ça fonctionne ! ;)
Membre enregistré
1 239 messages
Popularité : +9 (11 votes)
Posté le 18 juillet 2018 - 10:14
Bonjour Jérôme,

Merci pour ton code que je vais tester.

J'ai solutionné ce matin mon souci par l'affectation au champ HTML de l'URL paramétrée d'une page AWP en HTML 5 qui va afficher ma carte OpenStreepMaps avec Leaflet et pour mon besoin avec un marqueur : cela fonctionne aussi :)

C'est peut-être ensuite moins compliqué pour les codes Javascript - je n'ai pas encore approfondi la question mais je pense que son intégration dans WM n'est certainement pas évidente.

L'objectif à terme est de désengager des cartes Google Maps. Google m'a demandé les coordonnées de ma carte bancaire et je n'arrive pas encore (depuis hier) à utiliser le champ carte dans WM.

Excellents développements "libres"...

--
Cordialement
François

http://intra.fr http://intrasoftware.fr
Membre enregistré
1 648 messages
Posté le 18 juillet 2018 - 10:47
Bonjour,

Je n'ai pas encore fait les tests, mais je vais me pencher sur ce problème d'ici peu. Je veux moi aussi sortir du giron de Google et OSM me semble un bon compromis avec Leaflet.

Il faut aussi que je vois comment héberger les cartes OSM et les mettre à jour régulièrement pour être complètement indépendant.

Je cherche aussi à enregistrer une partie de carte sur le mobile pour pouvoir fonctionner en déconnecté. Je ne sais pas si c'est possible avec OSM, à voir !!!

--
Cordialement,

Philippe SAINT-BERTIN
Membre enregistré
138 messages
Popularité : +1 (1 vote)
Posté le 19 juillet 2018 - 11:55
@François
J'utilises sous iOS et Android des marqueurs, cercles, polygones et polylignes. Tout fonctionne très bien et l'avantage est d'avoir le même rendu sous des OS différents. Ce n'est pas si compliqué une fois ce premier test réussi, ça prend juste un peu de temps pour bien mettre en place ce que l'on veut.

Oui je trouve aussi que c'est un projet libre incroyable, j'encourage toujours les personnes à y contribuer (même ceux qui n'ont aucunes connaissances techniques particulières) avec des App mobiles comme StreetComplete (https://play.google.com/store/apps/details…).

@Philippe
Un très bon site pour débuter avec l'hébergement de ses propres tuiles est celui-ci : https://switch2osm.org/fr/

Le fonctionnement en déconnecté est possible en mobile avec OSM (OsmAnd le fait très bien), maintenant comment le faire est une autre question ! ;)
Membre enregistré
1 648 messages
Posté le 19 juillet 2018 - 12:45
@Jérôme: J'ai lu ce site un peu ça ce matin mais je dois avouer que ça m'intéresse fortement. Il faut que je fasse ça entre 2 projets, c'est pas toujours simple.

On se tient au courant pour la suite...:merci:

--
Cordialement,

Philippe SAINT-BERTIN
Membre enregistré
92 messages
Posté le 22 juillet 2018 - 11:58
Salut,
Pour le moment je n'ai fait que survoler ce sujet, mais apriori vous ne parlez que de l'affichage des maps.
Est-ce qu'il y a aussi moyen de faire des recherches de géolocalisation soit "automatique" soit à partir d'une adresse saisie par l'utilisateur (cf. l'API Google Place) ?
Cordialement
DC
Posté le 22 juillet 2018 - 14:50
Dav. wrote:
Salut,
Pour le moment je n'ai fait que survoler ce sujet, mais apriori vous ne parlez que de l'affichage des maps.
Est-ce qu'il y a aussi moyen de faire des recherches de géolocalisation soit "automatique" soit à partir d'une adresse saisie par l'utilisateur (cf. l'API Google Place) ?
Cordialement
DC


Y a-t-il un moyen? oui c'est, pouvez-vous reproduire la fonctionnalité google. NON. les adresses ne sont pas précises et ne s'afficheront jamais de la même manière que google les afficher. Donc, pour avoir de bons résultats, vous devez continuer à faire ce côté de l'application avec Google malheureusement.
Membre enregistré
138 messages
Popularité : +1 (1 vote)
Posté le 23 juillet 2018 - 11:29
@Dav.

Il y a le service Nominatim d'OSM qui fait ça :
- pour le tester : https://nominatim.openstreetmap.org
- pour la doc : https://wiki.openstreetmap.org/wiki/Nominatim

En gros il faut faire un appel de webservice sur l'URL : https://nominatim.openstreetmap.org/search/Le%20Mol%C3%A9son…

(ici avec les 10 résultats les plus pertinents demandés, en format JSON et avec un polygon "entourant" le lieu recherché).
Membre enregistré
92 messages
Posté le 23 juillet 2018 - 12:23
Super !!
C'est exactement ce que je cherchais.
merci Jérôme !!
Je vais faire des tests mais ca semble plutôt fiable.
Au passage, Google est loin de renvoyer toujours de bons résultats...
Encore merci Jérôme
Membre enregistré
138 messages
Popularité : +1 (1 vote)
Posté le 23 juillet 2018 - 14:07
Content d'avoir pu vous aider ! ;)

Faites attention de respecter les conditions d'usage si c'est pour une grosse application : https://operations.osmfoundation.org/policies/nominatim/
Membre enregistré
1 239 messages
Popularité : +9 (11 votes)
Posté le 24 juillet 2018 - 08:12
Merci Jérôme je ne connaissais pas ! :merci:

--
Cordialement
François

http://intra.fr http://intrasoftware.fr
Posté le 26 juillet 2018 - 19:30
Bonjour Jérôme,
je recherche également une solution de remplacement au couple WL/Google maps et cette discussion m’intéresse particulièrement et je vous remercie d'y participer. :merci:
Actuellement je travaille sur une appli windev mobile 23 pour une utilisation sous Android et iOS. L'appli intègre une fenêtre carto avec un affichage de plusieurs couches marqueurs selon le zoom. Je dois dire que je pense avoir atteint les limites du possible en n'utilisant que les fonctions natives du WL. C'est pour cette raison que j'ai depuis un moment un oeil braqué sur Leaflet, sans jamais avoir osé m'y attaquer. Le moment est venue et je viens donc d'essayer ton bout de code que j'ai du mal à le mettre en œuvre.
Sans vouloir exagérer de votre temps, pourriez-vous créer un mini projet Windev mobile d'exemple fonctionnel d'intégration de Leaflet et le mettre à la dispo de la communauté. Je suppose que cette contribution en intéresserait plus d'un et moi en premier.

Bien cordialement,
Claude
Membre enregistré
92 messages
Posté le 27 juillet 2018 - 13:24
Salut, voici ce code WindevMobile23 qui fonctionne sous Android et en partie sous Universal :
// VIDAGE DU CHAMP HTML
HTM_SansNom1 = [
<div></div>
]

// LISTING DES MARQUEURS
sListeMarqueurs est une chaîne = ""
tabLatitudes, tabLongitudes est un tableau de réels
HLitPremier(donnees)
nCompteur est un entier = 1
TANTQUE HTrouve(donnees) ET nCompteur<HNbEnr()
TableauAjoute(tabLatitudes,donnees.latitude)
TableauAjoute(tabLongitudes,donnees.longitude)
sListeMarqueurs = sListeMarqueurs+[
var marker = L.marker([
]+donnees.latitude+", "+donnees.longitude+[
], {icon: redIcon, zIndexOffset: 0}).addTo(mymap)
.bindPopup("
]+donnees.Titre+[
");

function onMarkerClick(marker) {
latlong.innerHTML=marker.latlng;
WL.Execute("marqueur",latlong.innerHTML);
latlong.innerHTML="";
}
marker.on('click', onMarkerClick);
]+RC
HLitSuivant(donnees)
nCompteur++
FIN

TableauTrie(tabLatitudes,ttCroissant)
TableauTrie(tabLongitudes,ttCroissant)
// POSITION
rDeltaLat est un réel = 0.5*(tabLatitudes[TableauOccurrence(tabLatitudes)]-tabLatitudes[1])
rDeltaLong est un réel = 0.5*(tabLongitudes[TableauOccurrence(tabLongitudes)]-tabLongitudes[1])
rPositionX, rPositionY est un réel
rPositionX = tabLatitudes[1]+rDeltaLat
rPositionY = tabLongitudes[1]+rDeltaLong

// ZOOM
rLat1, rLat2, rLon1, rLon2 est un réel
// conversion degrés->radians
SI rDeltaLat>rDeltaLong ALORS
rLat1 = tabLatitudes[1]*0n3.141592653589793/180
rLat2 = tabLatitudes[TableauOccurrence(tabLongitudes)]*0n3.141592653589793/180
rLon1 = tabLongitudes[1]*0n3.141592653589793/180
rLon2 = tabLongitudes[1]*0n3.141592653589793/180
SINON
rLat1 = tabLatitudes[1]*0n3.141592653589793/180
rLat2 = tabLatitudes[1]*0n3.141592653589793/180
rLon1 = tabLongitudes[1]*0n3.141592653589793/180
rLon2 = tabLongitudes[TableauOccurrence(tabLongitudes)]*0n3.141592653589793/180
FIN
rDeltaLatR est un réel = 0.5*(rLat2-rLat1)
rDeltaLongR est un réel = 0.5*(rLon2-rLon1)
nTemp est un réel = (Sinus(rDeltaLatR)*Sinus(rDeltaLatR))+Cosinus(rLat1)*Cosinus(rLat2)*(Sinus(rDeltaLongR)*Sinus(rDeltaLongR))
nTemp2 est un réel = 2*(ArcTang2(Racine(nTemp),Racine(1-nTemp)))
rDistance est un réel = 6378.137*nTemp2 // Terre = sphère de 6378km de rayon

rLargeur est un réel = 40075.017
nZoom est un entier = 0
TANTQUE rLargeur>rDistance ET nZoom<16
rLargeur = rLargeur/2
nZoom++
FIN
nZoom--

// MAP
sTemp est une chaîne = [
<head>
<meta charset="utf-8"/>
<meta name="viewport"content="width=device-width, initial-scale=1.0">

<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>

</head>

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

<BODY>
<div id="map"></div>
<div id="latlong"></div>
<script>

var redIcon = L.icon({
iconUrl: '

',
iconSize: [24, 41], // size of the icon
shadowSize: [41, 41], // size of the shadow
iconAnchor: [12, 41], // point of the icon which will correspond to marker's location
shadowAnchor: [14, 41], // the same for the shadow
popupAnchor: [0, -41] // point from which the popup should open relative to the iconAnchor
});

var mymap = L.map('map').setView([
]+rPositionX+", "+rPositionY+[
],
]+nZoom+[
);

L.tileLayer('

', {
maxZoom:18,
attribution: 'MapData&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> ' +
'<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);

]+sListeMarqueurs+
[
var popup = L.popup();
function onMapClick(e) {
latlong.innerHTML=e.latlng;
WL.Execute("coordonnees",latlong.innerHTML);
latlong.innerHTML="";
popup
.setLatLng(e.latlng)
.setContent(e.latlng.toString())
.openOn(mymap);
}
mymap.on('click', onMapClick);

</script>
</BODY>
]
HTM_SansNom1 =sTemp

-> on affiche la carte,
-> on ajoute tous les marqueurs de la BDD,
-> on positionne au centre des marqueurs,
-> on adapte le zoom (à améliorer),
-> au clic sur la carte ou sur les marqueurs, on fait sortir les coordonnées dans des procédures Windev "marqueur" et "coordonnees".
La <div latlong> est le seul moyen que j'ai trouvé pour transmettre les paramètres aux procédures.
Pour le moment je n'arrive qu'à récupérer les coordonnées des marqueurs ce qui pourrait poser pb s'il sont trop proches. Et puis ca demande de faire une recherche sur les lat et long pour retrouver la donnee correspondante.
Normalement on devrait pourvoir utiliser title ou alt mais marker.title donne "undefined". A améliorer donc.

Je vais bientôt tester sous iOS. Sous universal, ne pouvant pas utiliser WL.execute, je ne sais pas comment sortir les paramètres. Une idée ?
En attendant, ca fonctionne sur les 3 plateformes via une page php développée sous webdev21 en remplaçant WL.execute directement par la procédure !!

PS Pensez à cocher "Autoriser l'appel au WLangage..." sur le champ HTML
Bon week end
Dav
Membre enregistré
92 messages
Posté le 28 juillet 2018 - 11:22
Confirmation : ce code fonctionne sur iPad 2 (iOS 9.3.5) et iPhone 6 (iOS 11..4.1)
Posté le 11 août 2018 - 17:13
Merci à tous pour vos contributions,
suite à mes problèmes de zoom sur un champs carte (voir post : https://forum.pcsoft.fr/fr-FR/pcsoft.fr.windevmobile/31469-propriete-zoom-sous-ios/read.awp ), je viens également d'effectuer des essais de carto avec la librairie Leaflet et partant de vos codes d'exemple. C'est promoteur et je vais certainement poursuivre avec cette librairie en me mettant sérieusement au JavaScript.

Claude
Membre enregistré
1 message
Posté le 14 août 2018 - 13:57
Bonjour à tous,
ce sujet m’intéresse tout particulièrement car je souhaite développer une application WINDEV MOBILE pour Android avec OSM pour ne pas avoir à utiliser le champ carte de Google.

Je précise que j'utilise Windev Mobile en version 22 32 bits.
Malheureusement en utilisant les codes HTML des différents exemple (Jérôme ou Dav.) mon champ HTML ne charge pas la page est reste vide.

Est-ce lié à ma version de WINDEV Mobile ?
Je vous remercie pour votre aide.
Posté le 15 août 2018 - 23:22
Bonjour Nicolas,

C'est possible sachant que l'option WL.Exécute est une nouveauté de la version 23 parmis les 923 nouveautés.

Si besoin, copie-colle le code dans un fichier .html et exécute le dans ton navigateur internet avec la console (Je te laisse chercher pour savoir comment la trouver.) Vois s'il y a des erreurs que tu peux corriger malgré ta version 22 qui t'empêchera malgré tout l'usage de WL.Exécute.

Bon développement !
Membre enregistré
92 messages
Posté le 18 août 2018 - 10:48
Salut,
Après un rapide test avec WM21, je confirme qu'effectivement WL.Exécute ne fonctionne pas : c'est à dire qu'on ne peut pas l'utiliser pour sortir les coordonnées du clic vers une fonction en WLangage...
En revanche, aucun pb pour l'affichage de la carte, des marqueurs et les popup internes au HTML (titre et coordonnées) fonctionnent très bien.

Nicolas, est que le simple appel à un site du type HTM_SansNom1= "http://www.google.fr" fonctionne ?
Sinon il faut vérifier les permissions :
- pour Android il faut avoir "Android.permission.Internet"
- pour UW10 il faut cocher "Internet et réseaux publics (entrant et sortant)"
Membre enregistré
837 messages
Popularité : +11 (11 votes)
Posté le 25 septembre 2018 - 10:02
Pour suivre le fil de cette conversation. Merci déjà a tous les infos partagées ici

--
Bertin CARRIERE - SPRL RGPD.Zen-Project.be
bertin.carriere@gmail.com
http://www.zen-project.be http://www.linkedin.com/in/bertincarriere

Belgique +32(0)2/318.02.67
France +33(0)3/66.722.542
Espagne +34.5/12.702.266

http://www.be-dev.be
Membre enregistré
165 messages
Posté le 25 septembre 2018 - 11:12
Bonjour,
je m'abonne également. Désolé, je n'ai pas trouvé comment faire sans déranger tout le monde ;(
Merci à tous les contributeurs
Membre enregistré
165 messages
Posté le 25 septembre 2018 - 13:04
Ben en fait, j'ai trouvé : il suffit de s'abonner... en haut du fil des conversations. Mes excuses pour la pollution visuelle.