PC SOFT

FORUMS PROFESSIONNELS
WINDEVWEBDEV et WINDEV Mobile

Accueil → WEBDEV 2024 → regroupement de marqueurs dans une carte OpenStreetMap
regroupement de marqueurs dans une carte OpenStreetMap
Débuté par François SCHAAL, 27 avr. 2018 08:14 - 3 réponses
Membre enregistré
1 603 messages
Popularité : +64 (70 votes)
Posté le 27 avril 2018 - 08:14
Bonjour,

Un(e) développeur(euse) génial(e) a t'il déjà intégré des markercluster dans une carte OpenStreetMap ?

Comme ici:
https://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.388.html

--
Cordialement
François

http://intra.fr http://intrasoftware.fr
Membre enregistré
179 messages
Popularité : +17 (17 votes)
Posté le 27 avril 2018 - 11:42
Bonjour François,

je ne l'avais jamais fait mais je l'ai fait à partir de votre exemple.

Voici le code à mettre dans le code d’initialisation d'une page Webdev.

tabPointsGPS est un tableau de STPosition

//On ajoute quelques points GPS
ajoutPoint("Stade de la Maladière",46.99526, 6.94411)
ajoutPoint("Patinoires du Littoral", 46.99417,6.94432)
ajoutPoint("Salle de la Riveraine", 46.99596,6.94662)

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>
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/example/screen.css" />

<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css" />
<script src="https://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
<script src="https://leaflet.github.io/Leaflet.markercluster/example/realworld.388.js"></script>

]

sHTMLFinPage est une chaîne = [
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
var mymap = L.map('mapid').setView([46.99526, 6.94411], 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);


var popup = L.popup();

var markers = L.markerClusterGroup();

%1

mymap.addLayer(markers);

mymap.on('click', clicAilleursSurLaCarte);


</script>
]


sPointsHTML est une chaîne = ""

POUR i=1 _À_ tabPointsGPS..Occurrence
ajoutPointHTML(tabPointsGPS[i])
FIN

sHTMLFinPage = ChaîneConstruit(sHTMLFinPage,sPointsHTML)

MaPage..HTMLFinPage = sHTMLFinPage


PROCEDURE INTERNE ajoutPoint(LOCAL sLibelle est une chaîne, moLat monétaire, moLong monétaire)
LOCAL
stPos est un STPosition
stPos.moLatitude = moLat
stPos.moLongitude = moLong
stPos.sLibelle = sLibelle
tabPointsGPS.Ajoute(stPos)

FIN

PROCEDURE INTERNE ajoutPointHTML(LOCAL stPos est un STPosition)
LOCAL
sGabarit est une chaîne = [
var title = "%1";
var marker = L.marker(new L.LatLng(%2, %3), { title: title });
marker.bindPopup(title);
markers.addLayer(marker);
]
sResultat est une chaîne = ChaîneConstruit(sGabarit, stPos.sLibelle, stPos.moLatitude, stPos.moLongitude)
sPointsHTML += [RC]+sResultat

FIN


Il faut ajouter ceci dans le code d’initialisation du projet pour que l'exemple soit complet :
STPosition est une structure
moLatitude est un monétaire
moLongitude est un monétaire
sLibelle est une chaîne
FIN


Ensuite il ne reste plus qu'à remplir la structure selon vos propres données ! ;)
Membre enregistré
1 603 messages
Popularité : +64 (70 votes)
Posté le 02 mai 2018 - 14:19
Bonjour Jérôme,

Sincères félicitations et remerciements pour votre contribution ;)

Je n'y suis pas arrivé parce que je tentais d'installer en local les fichiers .js et .css ;(

Pour ceux qui souhaitent intégrer un marqueur avec une icône à partir de son URL et de sa définition donc par l.icon %3 en utilisant le clic sur icône en code navigateur, un exemple de code d'intégration d'un marqueur avec %1 = latitude et %2 longitude avec 5 décimales :

sGabarit = [
var marker = l.marker(new l.LatLng(%1, %2) , {icon: %3}).on('click',clicSurUnObjet);
markers.addLayer(marker);
]


un exemple avec 4950 marqueurs pour tester la puissance de OpenStreetMap :

https://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-custom.html

Il existe aussi une page avec 50.000 marqueurs.

--
Cordialement
François

http://intra.fr http://intrasoftware.fr
Posté le 22 janvier 2019 - 10:02
Merci pour ce fabuleux code!
ça ma permis d'énormement avancer (sans api ggl bien sur ). Cela dit moi je souhaite afficher sur la carte un ensemble de point qui doivent se présenter lorsque sélectionné une valeur d'un comboBox. Cette liste est issue de la BD. J'ai écrit une procédure affiche_Donnees(cboLocaliteClient) qui s'exécute lorsqu'on selectionne une valeur:

affiche_donnees (wcbo)
HLitRecherchePremier(client,idclient,wcbo)
TANTQUE PAS HEnDehors(client) ET (client.idLocalite = wcbo)
ajoutPoint(client.emplacement,client.latittude,longitude)
HLitSuivant(client,idLocalite)
gnNBrEnreg=gnNBrEnreg+1
FIN

info(gnNbrEnreg) // retourne bien le nombre d'enregistrement

Mais aucune donnée sur la carte.
Nota: cette procédure est appelée à la place de ajoutPoint dans votre code.
Je suis sous windev