PC SOFT

FORUMS PROFESSIONNELS
WINDEV, WEBDEV et WINDEV Mobile

|
|
|
FR
Accueil → WINDEV 2025 → Alternative Google map
Alternative Google map
Débuté par breda31, 23 mai 2022 00:21 - 13 réponses
#1
Membre enregistré
217 messages
Posté le 23 mai 2022 - 00:21
Bonjour,
Depuis quelques jours, il n'est plus possible d'utiliser le champs carte dans une application windev (<26)

Je me retourne donc vers les alternative de googles map. (bing , mapbox , ...etc) en passant par un champs HTML.

J'arrive à générer une carte , des marqueurs sur un champs HTML mais il m'est impossible d'intercepter dans windev le clique sur marqueur.
Par exemple, afficher (info) le nom de marqueur sur lequel on clique.

La LST 116 propose justement ce type d'alternatives ("Comment ne plus utiliser Google Map"). Cependant, impossible d'intercepter l'évenement clique sur marqueur !

Des idées ?
Signaler
0
0
#2
Membre enregistré
4 messages
Posté le 06 juin 2022 - 10:01
Bonjour Monsieur RÉDA,

Comme vous j'ai voulu tester l'alternative Bing Maps qui est intéressante, même en dehors de l'arrêt d'IE11.

La procédure définie dans .ActionClic ne marchait pas, j'ai trouvé la solution ci dessous en modifiant la "Méthode" "AjouteMarqueur" de la classe "CBingMaps".

Avant:




Après




Du coup en cas de clic sur un marqueur (PushPin chez bing) la procédure Info_Champ_Carte2 est déclenchée.
Dans la ligne en dessous on peut mettre les paramètres dans mon exemple, la procédure est appelée par PV(stMarqueurLocal)
"stMarqueurLOCAL" est une variable de type marqueur (je n'ai rien modifié dans le code d'origine).


Votre procédure locale "Info_Champ_Carte2", sera comme ceci, par exemple

PROCÉDURE Info_champ_carte2(m est un Marqueur)
Info(m..Nom)


Lors d'un clic sur le marqueur cela déclenchera l'affichage du "nom" du marqueur défini avec CarteAltAjouteMarqueur()

Bing Maps peut s'avérer une très bonne alternative à Google Maps.
Après quelques heures de recherche (et avec quelques heures supplémentaires de travail), on pourrait créer un classe qui permet de faire tout ce qui est possible avec Google.
Message modifié, 06 juin 2022 - 10:17
Signaler
1
0
#3
Membre enregistré
869 messages
Posté le 06 juin 2022 - 11:28
Bonjour,
il y a la solution Leaflet.
https://leafletjs.com/

ChaineJS est 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>
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css" />
<script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
</head>

<body>
<div id="CarteID" style="height:100%;width:100%;"></div>
<script>

var DataMarkers = [
[42.408,2.54,"Marker1","560","480"],
[42.41,2.599,"Marker2","800","600"],
[42.411,2.596,"Marker3","240","180"],
[42.417,2.57,"Marker4","900","740"],
[42.42,2.6,"Marker5","700",
"650"]];

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

var Groupemarkers = L.markerClusterGroup();

Groupemarkers.on("click", markerOnClick);

for (var i = 0; i < DataMarkers.length; i++) {
var oneMarker = L.marker([DataMarkers[i][0],DataMarkers[i][1]]).bindTooltip(DataMarkers[i][2]);
oneMarker.properties = {};
oneMarker.properties.name = DataMarkers[i][2];
oneMarker.properties.largeur = DataMarkers[i][3];
oneMarker.properties.hauteur = DataMarkers[i][4];
oneMarker.addTo(Groupemarkers);
}

Groupemarkers.addTo(MaCarte);

function markerOnClick(e) {
var attributes = e.layer.properties;
var Vartexte = (attributes.name + ";" + attributes.largeur + ";" + attributes.hauteur);
WL.Execute("ProcFromJS", Vartexte);
}

</script>
</body>

</html>
]

HTML1 = ChaineJS


ensuite il faut créer une procédure globale qui est appelée lors d'un clic sur un marqueur :

Procedure ProcFromJS(t)
//ToastAffiche("Appelé depuis le JS : " + t)

VarNom est une chaîne = ExtraitChaîne(t, 1, ";", DepuisDébut)
VarLargeur est une chaîne = ExtraitChaîne(t, 2, ";", DepuisDébut)
VarHauteur est une chaîne = ExtraitChaîne(t, 3, ";", DepuisDébut)

ToastAffiche("Vous avez sélectionné " + VarNom + ". Largeur : " + VarLargeur + ". Hauteur : " + VarHauteur,toastCourt,cvMilieu)
Signaler
1
0
#4
Membre enregistré
217 messages
Posté le 07 juin 2022 - 22:46
Un grand merci à vous deux
Avec mes excuses du retard
Je vais tester ces deux solutions
Merci encore
Signaler
0
0
#5
Membre enregistré
869 messages
Posté le 08 juin 2022 - 00:19
Je n'ai pas précisé, mais dans le champs HTML que j'ai appelé HTML1, dans la boite de dialogue "Description du champs", onglet "Détails",
il faut décocher "Interdit l'exécution des scripts Javascript",
puis il faut cocher "Autoriser l'appel de Wlangage depuis le code HTML ..."
Signaler
1
0
#6
Membre enregistré
217 messages
Posté le 08 juin 2022 - 20:37
C'est noté.
Merci!
Signaler
0
0
#7
Membre enregistré
4 messages
Posté le 09 juin 2022 - 20:45
Bien que ma première proposition fonctionne très bien, elle à l'inconvénient de ne pas pouvoir changer la procédure déclenchée en cas de click.
La proposition ci-dessous est à la fois plus propre et permet d'avoir des procédures différentes pour chaque point ajouté, si on le souhaite.

Etape 1:
Procédures > COL_CARTEALT > "CarteAltAjouteMarqueur", modifier comme ceci:




Etape 2:
Classe "CarteAlternativeService" > Méthode "AjouteMarqueur 1/3", modifier comme ceci:




Etape 3:
Classe "CBingMaps" > Méthode "AjouteMarqueur 1/3", modifier comme ceci:




Etape 4:
Classe "CBingMaps" > Méthode "AjouteMarqueur 1/3", modifier comme ceci:





Lorsque l'on ajoutera un marqueur le 3ème paramètre contiendra le nom de la procédure à appeler lors d'un clic sur le marqueur.
CarteAltAjouteMarqueur(CMOD_CARTE, MonMarqueur," Info_champ_carte2")


Exemple d'une procédure à appeler:
PROCÉDURE Info_champ_carte2(m est un Marqueur)
Info(m..Nom)
Message modifié, 09 juin 2022 - 20:48
Signaler
0
0
#8
Membre enregistré
4 messages
Posté le 20 juin 2022 - 18:32
Cartes alternatives (LS116), avec OSM



Signaler
0
0
#9
Membre enregistré
217 messages
Posté le 21 juin 2022 - 20:23
Bonjour,
Mark Orez. Je vois que vous avez enrichi le projet de la LST en créant une nouvelle classe "OSM"
Serait-il possible de partager cette amélioration ?
Signaler
0
0
#10
Membre enregistré
4 messages
Posté le 22 juin 2022 - 17:39
Monsieur RÉDA a écrit :
Bonjour,
Mark Orez. Je vois que vous avez enrichi le projet de la LST en créant une nouvelle classe "OSM"
Serait-il possible de partager cette amélioration ?


Oui bien sûr.
Dés que cela sera un peu plus avancé, je pourrais partager le code html / javascript et les quelques modifications nécessaires.

Pour le moment, je peux afficher la carte Leaflet OSM, centrer sur un point, zoomer, ajouter / supprimer un point, mettre un point de couleur différente. Cliquer sur un point et afficher les infos, déclencher une procédure.

Cet exemple LST est vraiment bien fait et offre pas mal de possibilités.
Ensuite on peut exporter le composant interne (via GDS) et l'intégrer ou mettre à jour un projet existant.
Signaler
0
0
#11
Posté le 20 octobre 2022 - 18:22
Bonjour M. Mark OREZ,

bravo pour enrichissement de l'exemple du Champ Carte Alternatif de la LST 116.

Pouvez-vous me dire, si cela ne vous dérange pas, ce que vous avez rajouter pour faire marcher cet exemple avec OSM ? J'ai hâte de tester vos améliorations.

Cordialement.
Encore merci pour votre partage.
Signaler
0
0
#12
Membre enregistré
1 message
Posté le 21 octobre 2022 - 12:08
Bonjour M. Mark OREZ,

bravo pour enrichissement de l'exemple du Champ Carte Alternatif de la LST 116.

Pouvez-vous me dire, si cela ne vous dérange pas, ce que vous avez rajouter pour faire marcher cet exemple avec OSM ? J'ai hâte de tester vos améliorations.

Cordialement.
Encore merci d'avance pour votre partage.
Signaler
0
0
#13
Membre enregistré
187 messages
Posté le 21 octobre 2022 - 16:27
Bonjour

Merci pour toutes ces informations

--
Cordialement

Jean-Claude FLAJOULOT
Signaler
1
0
#14
Posté le 22 avril 2025 - 11:27
Marcus O a écrit :
Monsieur RÉDA a écrit :
Bonjour,
Mark Orez. Je vois que vous avez enrichi le projet de la LST en créant une nouvelle classe "OSM"
Serait-il possible de partager cette amélioration ?

Oui bien sûr.
Dés que cela sera un peu plus avancé, je pourrais partager le code html / javascript et les quelques modifications nécessaires.

Pour le moment, je peux afficher la carte Leaflet OSM, centrer sur un point, zoomer, ajouter / supprimer un point, mettre un point de couleur différente. Cliquer sur un point et afficher les infos, déclencher une procédure.

Cet exemple LST est vraiment bien fait et offre pas mal de possibilités.
Ensuite on peut exporter le composant interne (via GDS) et l'intégrer ou mettre à jour un projet existant.


Bonjour,

Je viens de voir tes réponses sur un ancien post ...
As tu la possibilité de me transmettre ton projet ou composant ?
Merci d'avance,
Vianney
Signaler
0
0
→ Revenir à WINDEV 2025