Comme dans le tutoriel de groupement de markers avec l'API Google Maps, nous affichons ici les 878 villes (et cedex) françaises commençant par la lettre 'H'. Pour plus d'information sur la notion de groupement, merci de vous reporter à ce tutoriel.
En plus de l'API Leaflet, ce tutoriel utilise une librairie nommée Marker Clustering plugin for Leaflet (il faut télécharger la version (release) et récupérer les fichiers dedans pour les inclure dans votre projet). Elle offre par défaut des comportements intéressants :
Nous initialisons la carte avec le Layer StamenToner comme dans le précédent tutoriel.
var map = L.map('cluster').setView([46.90296, 1.90925], 6);
var stamenToner = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
attribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap',
subdomains: 'abcd',
minZoom: 0,
maxZoom: 20,
ext: 'png'
});
map.addLayer(stamenToner);
La mise en oeuvre du groupement de markers se fait très simplement avec la classe L.MarkerClusterGroup. Il suffit ensuite d'ajouter chaque marker au cluster construit.
Enfin on ajoute notre cluster à la carte en tant que nouveau Layer.
var markersCluster = new L.MarkerClusterGroup();
var cities = getCities();
for (var i = 0; i < cities.length; i++) {
var latLng = new L.LatLng(cities[i][1], cities[i][2]);
var marker = new L.Marker(latLng, {title: cities[i][0]});
markersCluster.addLayer(marker);
}
map.addLayer(markersCluster);
La fonction getCities est visible dans le code source de la page. Les options sont détaillées sur le site de la librairie mais n'hésitez pas à poser vos questions ici.
Si vous avez d'abord ajouté les markers à votre carte et qu'ensuite vous vous êtes dit qu'un regroupement serait préférable, n'oubliez pas de supprimer de votre code le .addTo(map) de vos markers.
Merci à Damien pour cette astuce qui peut éviter de perdre du temps en se retrouvant à la fois avec les markers et les regroupements.
Il est possible de modifier les clusters pour les personnaliser soit avec une image particulière soit avec un style CSS choisi. Il suffit pour cela
de modifier la construction du L.MarkerClusterGroup et d'ajouter une entrée CSS.
var markersClusterCustom = new L.MarkerClusterGroup({
iconCreateFunction: function(cluster) {
return L.divIcon({
html: cluster.getChildCount(),
className: 'mycluster',
iconSize: null
});
}
});.mycluster {
height: 40px;
width: 40px;
border-radius: 50%;
background-color: #3498db;
color: white;
text-align: center;
font-size: 20px;
line-height: 40px;
margin-top: -20px;
margin-left: -20px;
}
Cette version est assez simple car c'est toujours la même icône qui est utilisée. La librairie Leaflet met à disposition un objet L.divIcon
qui peut être utilisé pour les clusters. Il comprend dans notre exemple un code html qui contient juste le nombre de fils contenus dans
le cluster, la classe CSS utilisé et il ne faut pas oublier de mettre iconSize à null pour laisser le CSS géré la taille.
Pour faire varier l'icône il faut ajouter une condition sur cluster.getChildCount() et modifier la classe CSS ou choisir
une image particulière en fonction du nombre d'enfants. Dans l'exemple suivant la classe sera ainsi associée au nombre de chiffres du
nombre d'enfants sur le cluster. Cela permet de dessiner des cercles plus gros et d'utiliser une police différentes. Cet exemple est
entièrement repris de ce site.
var markersClusterCustomPlus = new L.MarkerClusterGroup({
iconCreateFunction: function(cluster) {
var digits = (cluster.getChildCount()+'').length;
return L.divIcon({
html: cluster.getChildCount(),
className: 'cluster digits-'+digits,
iconSize: null
});
}
});Le code CSS est en revanche beaucoup plus long car il faut un style par nombre de chiffres.
.cluster {
background: #3498db;
border-radius: 50%;
text-align: center;
color: white;
font-weight: 700;
border: 1px solid #3498db;
font-family: monospace;
}
.cluster:before {
content: ' ';
position: absolute;
border-radius: 50%;
z-index: -1;
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
border: 1px solid white;
}
.digits-1 {
font-size: 14px;
height: 28px;
width: 28px;
line-height: 28px;
margin-top: -14px;
margin-left: -14px;
}
.digits-2 {
font-size: 16px;
height: 34px;
width: 34px;
line-height: 35px;
margin-top: -17px;
margin-left: -17px;
}
.digits-2:before {
border-width: 2px;
}
.digits-3 {
font-size: 18px;
height: 48px;
width: 47px;
line-height: 47px;
border-width: 3px;
margin-top: -24px;
margin-left: -24px;
}
.digits-3:before {
border-width: 3px;
}
.digits-4 {
font-size: 18px;
height: 58px;
width: 58px;
line-height: 57px;
border-width: 4px;
margin-top: -29px;
margin-left: -29px;
}
.digits-4:before {
border-width: 4px;
}
COMMENTAIRES
Damien Marin
Heyo,
Merci beaucoup pour le tuto.
Deux informations :
1) Pour récupérer le fichier javascript, il suffit de télécharger l'archive complète depuis Github et le fichier js est dedans comme attendu.
2) J'ai eu un soucis tout bête qui m'a bloqué 10 minutes lorsque j'ai installé le clustering pour mon projet et je me dis que c'est une info intéressante :
Si vous avez déjà créé votre carte et que vous avez déjà ajouté un paquet de markers à celles-ci pour vous rendre compte que le clustering était en fait nécessaire, pensez bien à supprimer le .addTo(map) lorsque vous déclarez ces markers. Autrement, vous aurez le layer du cluster + vos markers qui apparaitront en même temps !
Merci encore Eric.
ericfrigot
Bonjour et merci pour vos remarques que j'ai intégrées au tutoriel, c'est typiquement le genre de choses qui manque quand on a une approche itérative du code. Souvent les tutoriels partent d'une situation vide et ne mentionnent pas assez le processus pour arriver au résultat avec les erreurs rencontrées.
pointvirgule
bonjour
je suis débutant, et j'ai besoin d'apprendre leaflet et quelques plugins. je bloque depuis deux jours sur l'install du plugin markercluster car je ne trouve pas les fichiers js dans le dossier dist. En effet dans le dossier téléchargé, un fichier text me dit comment trouver les fichiers .js (voir ci-dessous), mais j'avoue ne pas comprendre (je précise que je ne maîtrise pas la ligne de commande)
We don't ship the .js files in the git master branch.
They are only present in version tags and in npm.
See how to get the JS files here: https://github.com/Leaflet/...
Or how to build them: https://github.com/Leaflet/...
merci de votre aide
ericfrigot
Bonjour, effectivement le repository Github a été modifié depuis l'écriture de ce tutoriel. Je le mettrais à jour prochainement même si je trouve la nouvelle solution un peu compliqué pour ceux qui n'utilisent pas NPM. Pour le fichier JS vous pouvez le récupérer directement sur mon site : https://www.datavis.fr/asse... Eric
Pet
Bonjour j'essaie également de suivre votre tutoriel mais j'avoue ne pas comprendre ce moment du tuto ou il faut "installer" ? le fichier javascript ? En gros je dois copier coller le texte de votre et enregistrer en .js ? Puis le mettre dans le meme dossier que la carte ? Désolée je suis débutante...
Pet
Bon j'ai fini par me débrouiller en copiant collant le code complet de votre page, puis en modifiant les sources et en enlevant petit à petit les textes et titres du tuto ... Ma méthode n'est pas très pratique mais ça a marché haha. Du coup je me posais une autre question : est il possible d'ajouter une pop up aux marqueur également ? Bonne journée et merci pour tout
ericfrigot
Bonjour, je vois que je n'ai toujours pas mis à jour cette partie du tutoriel, je vais l'ajouter à ma TODO.
Pour votre question, c'est expliqué ici : https://www.datavis.fr/inde... dans la partie "Ajout d'un marker et personnalisation". Bonne journée à vous.
Salem Bouallagui
Bonjour j ai besoin d intégrer votre travail dans ma application jee s'il vous plait pouvez vous me guider merci
ericfrigot
Bonjour, il me faudra surement plus d'éléments pour pouvoir vous aider Mais si vous travaillez avec serveur applicatif JEE vous devez manipuler des JSP ou directement des pages HTML avec du JS à côté. Dans tous les cas je ne vois pas ou vous seriez bloqué. N'hésitez pas à regarder le premier tutoriel Leaflet qui explique comment intégrer une carte à une page web : https://www.datavis.fr/inde... Eric
Sébastien
Très bon tutoriel, j'ajoute qu'il est aussi possible de faire du clustering avec l'api arcgis javascript comme expliqué dans cet article https://www.codethemap.fr/2...
Couplé avec un slider et les possibilités sur les popups c'est aussi très intéressant !
ericfrigot
Bonjour et merci pour le lien. Je n'avais jamais trop exploré cette API mais effectivement c'est très propre et élégant ! Par contre comme l'API est payante je ne pense pas trop poursuivre mon analyse pour ajouter des tutoriels. Par contre c'est une source d'inspiration que je conserve volontiers.
Sébastien
Bonjour, merci pour votre retour !
L'API n'est payante que dans le cas où l'utilisateur veut monétiser son application directement vers des clients, hors de ce cas elle est totalement gratuite avec toutes les fonctionnalités :) Par exemple pour exposer une application sur le Web, sur un site Web en particulier accessible à tous il n'y a rien à payer
PELTIER gilles
Parfait ton tuto. Tu devrais peut-être rajouter le fitBounds pour ajuster le zoom. Comme là:
https://nouvelle-techno.fr/...
La page de mon site avec les clusters:
https://gilloup.com/photogr...
Et celles avec les Controls ... là aussi tuto tip top:
https://gilloup.com/treks-a...
Merci beaucoup.
Johan Cavirot
Bonjour, Pour mon association je cherche à générer une telle carte pour afficher les zones d'agression. Mon prestataire utilise OSM et LeaFleet mais il me dit qu'avec la API standard, il ne peut pas afficher plus de 10 points par carte sauf à avoir son propre serveur OSM pour personnaliser l'API.
Utilisez vous un serveur dédié pour votre carte ou bien cette librairie permet de dépasser ce seuil de 10 points par carte ?
Merci beaucoup par avance pour vos lumières :-)
ericfrigot
Bonjour Johan, je vais essayer de reformuler pour être bien sûr de répondre à votre interrogation. Si vous voulez afficher un fond de carte spécifique (Tiles en anglais ou Tuiles en français, voir le début de ce tutoriel https://www.datavis.fr/inde... vous devez disposer effectivement d'un serveur de Tiles. Mais je n'ai pas l'impression que ce soit votre cas. Comment sont représentés vos zones d'agression ? Est-ce que ce sont de simples points avec une latitude et une longitude ou alors ce sont effectivement des zones et donc des polygones ? Dans les deux cas vous pouvez utiliser Leaflet pour représenter bien plus que 10 zones sur une carte. Avec les markers (et donc pour des points) vous pouvez en afficher des milliers si vous utilisez le regroupement comme c'est le cas dans ce tutoriel. Avec des polygones je n'ai jamais testé mais je pense que l'on peut facilement en représenter quelques centaines.SI vous me donnez des éléments supplémentaires sur votre contexte je pourrais surement vous aider de manière plus précise, est-ce que vous avez un site ou je peux voir ces zones ? Eric
Johan Cavirot
Bonjour,
Tout d'abord merci pour votre réponse rapide.
Non effectivement pas de fond de carte spécifique, nous sommes parti sur OSM avec Leafleet.
Les points sont effectivement latitude/longitude de type picto pointeur.
J'ai pu générer cette carte avec MyMap de Google (sans regroupement malheureusement) : https://twitter.com/flagass...
Les emplacements des signalements sont générés à partir de la carte OSM durant le signalement : https://www.flagasso.com/te...
Reste du projet : www.flagasso.com/app
En backoffice, nous avons tous les signalements avec en BDD :
- le type d'agression (objectif une couleur par type d'agression)
- l'adresse postale complète
- les coordonnées longitudes/latitudes
- autres critères liés au signalement
Une recherche multicritère va sortir une liste de résultats et le but est d'obtenir une carte des résultats comme votre exemple et plus on zoome et plus on aura les pictos précis sur la carte.
Aujourd'hui le prestataire m'indique être limité à 10 affichages de signalement simultanés (limitation de l'API OSM ou Leafleet ?) et qu'il faut passer par un serveur dédié pour adapter l'API standard.
Merci beaucoup pour vos réponses
David
Bonjour Eric ! Votre site est génial ! J'aurais une question svp avant d'utiliser MarkerCluster. Ma map contient pas loin de 5000 marqueurs disséminés sur le globe et forcément ça rame au chargement. Serait il possible d'effectuer uniquement le chargement des marqueurs situés dans la fenêtre du navigateur ? Avec l'idée que ça permettrait de réduire considérablement les calculs lors du déplacement de la carte. D'avance merci !
ericfrigot
Bonjour David et merci pour le compliment :) En fait il faut distinguer deux choses : le chargement des données depuis un disque ou un serveur et l'affichage de ces données. Avec MarkerCluster vous optimisez l'affichage des données mais il vous faut quand même toutes les charger au départ. Pourquoi est-ce que le chargement rame au début dans votre exemple avec 5000 marqueurs ? Que contient chacun des markers comme données transférées depuis votre serveur ou depuis votre disque ? Est-ce que vous avez des étapes de transformations de ces données qui seraient consommatrices en ressources ? Je vous pose toutes ces questions car ce que vous suggérez c'est de faire comme les "Tiles", les images carrées de fond de carte qui sont chargées quand on se déplace ou quand on zoom sur la carte. Mais pour réaliser ça il faut avoir un serveur dédié qui est capable de renvoyer les données à chaque instant. Si vous avez bien un serveur je vous conseil de différencier la requête que récupère les markers avec leur position en limitant au maximum les données transférées et si ensuite vous avez besoin de plus d'information quand vous cliquez sur un marker là vous refaites une requête dédiée à ce marker. Dans le code de la page le marker ne contient que le nom de la ville en plus des latitudes/longitudes.
David
Merci pour votre réponse éclair Eric ! Pour une appli météo, du back je récupère dans mon front Vue.js un json contenant pour chaque station la position et 2 autres informations qui vont modifier l'orientation et la couleur du marqueur suivant ces valeurs. Je n'utilise pas Vue2-leaflet. De ce que je comprends il me faut effectuer un pré-calcul pour afficher tous les marqueurs en même temps ?
ericfrigot
Bonjour, je reviens un peu plus tardivement cette fois. Quand vous dites que ça rame, est-ce que c'est l'étape ou vous itérez sur vos 5000 données ? Si c'est le cas je ne vois pas trop comment améliorez les choses.
john
Bonjour,
Super tuto merci beaucoup.
J'ai une petite question, j'ai utilisé les clusters, j'ai rajouté une donnée dans le tableau des poi (ici "t" qui peut être égale a "0,1,2,3,4" , un id de mes points). j'aimerais que l'icone de mon cluster soit l'icone qui correspond a la variable "t" la plus présente dans le cluster (par ex 4 marqueurs avec t: "3,3,0,1" ca affiche 3.png par ex) ... est-ce possible svp?
Merci beaucoup.
ericfrigot
Bonjour, c'est tout à fait possible, je me suis inspiré d'un autre tutoriel : https://www.datavis.fr/inde... (voir le deuxième bloc de code dans Préparation des données). Voici le code de départ qu'il faut adapter, attention à bien travailler la taille de vos icones et les paramètres iconSize, IconAnchor et popupAnchor sinon vous aurez des comportements imprécis.
var markersCluster = new L.MarkerClusterGroup({
iconCreateFunction: function(cluster) {
return L.icon({
iconUrl: getIconURL(cluster),
iconSize: [33, 44], // taille de l'icone
iconAnchor: [16, 44], // point de l'icone qui correspondra à la position du marker
popupAnchor: [-3, -76] // point depuis lequel la popup doit s'ouvrir relativement à l'iconAnchor
});
}
});
function getIconURL(cluster) {
// Pour correspondre à 0.png, 1.png
// C'est donc l'index qui possède le MAX qui donnera l'URL de l'icone
let counts = [0,0,0,0,0];
let clusterLength = cluster.getAllChildMarkers().length;
for (let i = 0; i < clusterLength ; i++) {
marker = cluster.getAllChildMarkers()[i];
// trouver à quelle catégorie appartient le marker et et augmenter counts pour cette catégorie
}
// trouver le max dans le tableau counts
return "/path/to/file/maxIndex.png";
}
Aube Repair
Bonjour
Merci beaucoup pour ce tuto, suite au changement de Google, j'essaie de créer
une page avec une carte pour notre association. Mais je ne suis pas un cador en
programmation !
Certaines subtilités m’échappent et lorsque je regarde le code source c’est
encore pire !
Auriez-vous une page d'exemple « seule » que je pourrais regarder
Merci d’avance
Mickaël Murmann
Bonjour,
Article efficace et limpide donc juste... merci ! :)
Je montre Leaflet à mes stagiaires (développeurs web) à titre pédagogique et je n'hésiterai pas à les orienter vers votre article très complet !
ericfrigot
Bonjour et merci pour votre commentaire, ça fait très plaisir !
Alex McCarty
Bonjour,
j'utilise markercluster et leaflet. lorsque je clique sur un cluster ça m'affiche différent point grace à des coordonnées x et y qui sont stocké dans un .csv. quand je clique sur un des point j'ai une popup qui s'ouvre avec pas mal d'infos comme l'adresse, ville, et différentes données. J'aimerais qu'une de ces donnée s'affiche directement au dessus de l'icon sans que je clique pour ouvrir la popup. Je pense que c'est autour de la ligne 51 que je dois ajouter du code mais je n'ai pas trop d'idée. Qq1 pourrait me donner des pistes?
https://codepen.io/alex-mcc...
ericfrigot
Bonjour, vous avez raison la modification doit se situer dans ce coin là. J'ai mis à jour le tutoriel Leaflet - Première carte (https://www.datavis.fr/inde.... Vous trouverez tout en bas l'ajout d'un tooltip permanent avec quelques informations pour faire varier le comportement. Par contre je ne sais pas quel est l'usage précis mais c'est assez inhabituel, généralement on préfère différencier les types de markers via une icone différente pour indiquer le contenu ou encore avoir un tooltip qui n’apparaît que si on passe la souris sur le marker.
Alex McCarty
ok merci je vais regarder ça.
franciscabrel
Bonsoir
Pour se libérer un peu de Google, je me plonge en ce moment dans Leaflet notamment, j'ai un problème que je n'arrive pas encore à résoudre avec les clusters, et comme pour faire simple et pas un long discours, j'ai fait un codepen pour visualiser le problème (je conseille le changement de vue avec le code à droite ou à gauche pour lire les commentaires et voir le problème).
https://codepen.io/anon/pen...
Merci par avance pour les suggestions, cela doit être tout bête, mais là je sèche un peu...
ericfrigot
Bonjour,
J'ai bien regardé le codepen mais je ne vois pas quel est le problème. Est-ce parce qu'il reste des markers sur la carte ?
Eric
franciscabrel
Bonjour
En fouillant pendant la matinée les documentations diverses et variées, j'ai solutionné ce problème des 5 points qui n'apparaissent pas sur la carte (2 étant en dehors) avec dans la déclaration de la variable markerClusters :
spiderfyOnMaxZoom: false,
zoomToBoundsOnClick: false,
showCoverageOnHover: false,
Puis en rajoutant en fin de code :
markerClusters.on('clusterclick', function (a) {
a.layer.zoomToBounds({padding: [50, 50]});
});
Cela fait le job, quand je clique sur le "5" j'ai bien un zoom avant et tous mes points dans le cadre, même si certains sont encore en clusters, mais au moins je n'ai pas de chiffres annoncés avec pas le nombre de marker correspondant
Jeraxus
Bonjour ! j'aimerais avoir un coup de main, j'aimerais changer la couleur de mon cluster avec iconCreatefunction, non pas avec le nombre d'enfant, mais avec l'icone d'un marker enfant contenu dans le cluster. Sachant que je n'ai que 2 icon différents.
Possible d'avoir des renseignements ?
ericfrigot
Bonjour, si je comprend bien vous voulez deux icônes différentes pour vos clusters en fonction du contenu du cluster. Pour le faire il faut modifier le code "return L.divIcon" par un "return L.icon" et voir par exemple dans le tutoriel : https://www.datavis.fr/inde... la partie "Ajout d'un marker en personnalisation". A vous ensuite de trouver la bonne condition pour savoir laquelle des deux icônes afficher. N'hésitez pas si vous avez besoin d'un complément d'information.
Eric
lolopp
J'ai également une autre question. Je ne comprends pas bien la différence entre les "digits" et "digits-before".
lolopp
Bonjour,
Merci pour ce tuto! J'aurai une petite question. Comment puis-je créer des cluster de données geojson?
Bien à vous,
ericfrigot
Bonjour,
Que voulez-vous dire par cluster de données geojson ? Ce sont des données au format geojson qui représentent des points ? Est-ce que vous auriez un exemple ? Eric
lolopp
Bonjour,
J'ai intégré sur la carte leaflet des données spatiales (des points) issues de postgis. Pour cela, j'ai du transformer ces données en geojson pour les intégrer sur notre carte (via Ajax). J'ai réussi à intégrer des cluster mais on dirait que mes données ne sont pas "attachées" à ceux-ci. Sur ma carte, j'ai donc mes points mais aussi mes cluster qui ne contiennent rien. Voici mon code:
var markers = L.markerClusterGroup();
var batimentsLayer = L.geoJSON(geojsonFeature, {
pointToLayer: function (Feature, geometry){
return L.circleMarker(geometry, markerOptions);
}, onEachFeature : function(features, batimentsLayer) {
batimentsLayer.bindPopup('Information concernant le bâtiment :
'
+ 'Bâtiment : ' + features.properties.batiment + '
'
}
});
markers.addLayer(batimentsLayer);
map.addLayer(markers);
ericfrigot
Bonjour, il faudrait essayer quelque chose comme ça :
var markers = L.markerClusterGroup();
var batimentsLayer = L.geoJSON(geojsonFeature, {
pointToLayer: function (Feature, geometry){
var marker = L.circleMarker(geometry, markerOptions);
markers.addLayer(marker); // Il faut ajouter chaque marker un à un
return marker;
}, onEachFeature : function(features, batimentsLayer) {
batimentsLayer.bindPopup('Information concernant le bâtiment :
'
+ 'Bâtiment : ' + features.properties.batiment + '
'
}
});
markers.addLayer(batimentsLayer);
map.addLayer(markers);
lolopp
Bonjour, j'ai donc testé avec votre conseil mais cela ne fonctionne pas. En fait, le problème n'est pas que les cluster soient "vides" mais il s'agit plutôt que mes données apparaissent deux fois (une fois dans mes cluster) et une fois à l'extérieur). Il y a donc des doublon dans mes points.
lolopp
Je tiens tout de même à fortement vous remercier de prendre du temps pour m'aider. Je vais continuer à regarder de mon côté. En tant qu'étudiant, le tuto m'a été d'une très grande aide.
ericfrigot
Bonjour, j'ai fait une erreur ! Il faut supprimer l'avant-dernière ligne dans mon message, à savoir "makers.addLayer(batimentsLayer);". On ajoute déjà les markers un à un au-dessus. C'est pour ça qu'ils sont en doubles. Eric
lolopp
En effet, cela fonction maintenant. Je vous en remercie
Micka Bup
Merci pour ce tuto, il m'a bien aidé dans mon projet.
ericfrigot
Tout le plaisir est pour moi Micka.
phdphd
Bonjour, Eric. Une question toute bête. Si la carte ne s'affiche pas en raison d'une défaillance du fournisseur des tuiles, j'envisage d'afficher autre chose à la place, par exemple une liste de noms de pays ou villes cliquables, afin que l'utilisateur puisse quand même indiquer le lieu qui l'intéresse. Comment tester si L.tileLayer fonctionne ? Cela permettrait de ne pas afficher la DIV de la carte pour rien. Merci.
ericfrigot
Bonjour,
Dans les versions précédentes de Leaflet il y avait un événement dédié à la non récupération des tiles mais il n'existe plus aujourd'hui. Par contre vous pouvez tester une des URLs correspondant à vos tiles (voir le tutoriel Leaflet - Premier pas qui possède une capture d'écran des requêtes faites par le navigateur). Ainsi vous pourrez par exemple tester l'URL http://c.tile.osm.org/7/64/... mais il vous faudra importer un framework comme JQuery pour faire une requête et vérifier le statut de retour.
phdphd
Merci. Plutôt que de tester avec JS/Jquery, j'ai décidé de tester l'URL avec PHP (curl). Si le test est bon, j'affiche (echo) le lien vers le script qui construit la carte, et c'est dans ce script que se trouve la ligne js qui ordonne l'affichage de la div de la carte.
phdphd
Rebonjour, j'ai une autre question, qui concerne plus spécifiquement la netteté du rendu des cartes dans Chrome (version 71). Dans mon cas, j'observe par exemple que les numéros sur les clusters apparaissent légèrement flous dans Chrome, mais nets dans FF ou Edge. Autre exemple, sur les cartes de votre tuto, on voit des traits blancs horizontaux ou verticaux d'un pixel d'épaisseur sur l'océan atlantique qui semblent délimiter les tuiles. Y a-t-il un moyen de résoudre ce problème? Merci.
ericfrigot
Bonjour, de mon côté je ne constate pas de problème de flous et si je vois bien des traits blancs c'est juste pendant le chargement des tuiles, ils disparaissent ensuite.
phdphd
Bonjour, Eric. Merci pour vos tutos. J'ai une question un peu spéciale, mais peut-être qu'elle intéressera d'autres personnes. Mon site web (en construction) contient deux cartes : une sur la page d'accueil, l'autre sur une autre page. Sur la page d'accueil, les clusters et marqueurs se présentent de façon classique : dès que le cluster ne contient qu'un marqueur, c'est une punaise qui apparaît. Ce que je voudrais faire sur l'autre carte est légèrement différent, à savoir n'afficher que des clusters même si un cluster donné ne contient qu'un seul marqueur. Je précise que dans la version du fichier JS markercluster, j'ai paramétré "singleMarkerMode: false", ce qui permet d'afficher les punaises dans la carte de la page d'accueil. Comment annuler ce paramétrage dans le code js qui construit le layer de l'autre carte afin de n'avoir que des clusters? Merci!
ericfrigot
Bonjour, merci pour la précision de votre commentaire, ça facilite la compréhension de votre besoin. Contrairement au sujet juste en-dessous, le votre me semble bien plus simple à mettre en oeuvre. En fait vous avez juste à modifier la construction du MarkerClusterGroup en l'initialisant avec une option supplémentaire : var markersCluster = new L.MarkerClusterGroup({singleMarkerMode : true}); Ainsi vous avez des cluster contenant un seul élément et le truc plutôt sympa c'est que ces clusters continuent de gérer les évènements (pour faire apparaître une popup par exemple).
phdphd
Super, ça marche! Merci!
Matthieu
Bonjour, j'utilise leaflet avec une carte non géographique, voir ici : http://eh.raistlin.fr/evolu...
Pensez vous que cette fonction puisse s'adapter à mon code ?
Je vous le post ici :
https://pastebin.com/1k3XPfyr
Merci de votre aide
ericfrigot
Bonjour Matthieu,
Je ne suis pas sûr de comprendre. Dans le lien que vous me donner il n'y a qu'un seul marker, à quel moment ou pour quel raison voudriez-vous utiliser le regroupement de markers ? Ou alors vous parlez des markers qui représentent vos plantes ou vos créatures ?
Eric
Matthieu
Bonjour, oui je récupère une grande quantité de coodonnées des plantes et créatures, j'ai donc des markers en doubles., voici la page concernée :
http://eh.raistlin.fr/evolu...
PS : j'ai des difficultés à rejoindre votre site en cliquant depuis l'email de notification, un soucis de lien je crois, parfois en localhost
ericfrigot
Déjà, je tiens à vous remercier, je pensais qu'il n'y avait que moi qui recevais des mails avec un lien localhost ! Ca fait donc des années que j'ai ce problème. J'ai vérifié et j'ai bien un soucis avec la façon dont fonctionne Disqus, j'ai déjà corrigé des URLs mais je dois aussi reprendre le code de mes pages, bref merci vraiment !
Je vais regarder plus en détails votre problème ce week-end mais j'ai une question : quand je clique sur votre lien la carte est en tout petit au milieu et effectivement on pourrait regrouper et compter les plantes et les créatures pour former des clusters si c'est ce que vous voulez. Mais pourquoi est-ce que vous ne zoomer pas plus sur la carte au départ ? Autre question qui pourrait faciliter les choses, avez-vous le moyens de mettre dans un ZIP l'ensemble des fichiers de votre projet (html, js, image...) et ensuite me le mettre à disposition sur internet ?
Merci encore, Eric
Matthieu
Bonjour pas de soucis pour le feedback, je suis en pleine création de mon site/jeu et je ne ferais rien sans les retours des testeurs ;)
L'idée c'est en effet de de faire des clusters.
Pour le zoom, il faudra que j'y réfléchisse, c'est possible de faire quelque chose de dynamique ? qui zoome sur les données remplies ? car la carte peut se réduire ou augmenter au cours du jeu ...
Je vais voir pour le zip, merci de votre aide.
ericfrigot
Bonjour, je ne pense pas qu'il soit la peine que vous me fournissiez un ZIP. En revanche je ne sais pas très bien dans quel sens vous aider. Si vous regroupez vos créatures et plantes ça n'a plus vraiment de sens je trouve, pourquoi ne pas simplement zoomer au bon niveau ? Un niveau qui permet de voir correctement ces éléments. Pour l'instant j'ai juste ajouté un featureGroup pour regrouper vos données à adapter le zoom et les bounds à ces données : https://www.datavis.fr/maps...
Matthieu
Les plantes et les créatures ont parfois exactement la même coordonnée, donc je ne comprend pas comment un niveau de zoom peut aider ?
Mais c'est vrai que j'aimerais un zoom auto par défaut, et des icônes plus grosses qui s'adaptent au zoom, il faut que je trouve comment faire ça.
ericfrigot
Bonjour, j'ai mis à jour le lien que je vous ai donné juste avant. J'ai ajouté des icônes plus grosses, des groupements, du CSS. Le résultat n'est pas encore parfait, il y a un problème quand on fait zoom arrière avec les clusters par exemple. A vous de m'orienter vers ce que vous voulez. Regardez le code source il y a des commentaires.
Matthieu
Super ! Merci !
Je suis sur tel je regarderais ce soir mais ca semble faire ce que je cherche. J'aurais plus qu'a adapter un peu.
ericfrigot
Bonjour,
Si ça vous dit on se rencontre pour discuter de votre projet et on regarde les différentes possibilités. Pour l'instant j'ai un peu de mal à cerner votre besoin. Pour information je suis en région parisienne et ça serait avec plaisir de prévoir un après-midi code avec vous. Eric
Matthieu
J'habite en Isère, mais c'est gentil quand même.
Le résultat de ce que vous avez fait sur votre page est quasi parfait, je n'arrive pas à comprendre pourquoi les regroupements de markers fonctionnent lorsqu'il n'y a que des plantes, mais pas lorsqu'il y a créature+plante, c'est dû au fait que le code soit en 2 parties distinctes ?
ericfrigot
Bonjour, je reviens vers assez tardivement mais j'ai été pas mal occupé. Je ne comprends pas très bien votre question mais elle vient peut-être du fait que ce sont les mêmes couleurs qui sont utilisées pour les plantes et pour les créatures. Dans votre cas il faudrait reprendre de la partie "Personnalisation des markers" et associer une couleur rose pour les groupements de créatures et une couleur verte pour les plantes. Je vous fais ça dans le week-end si j'ai le temps mais je pense que c'est la direction à prendre. Par ailleurs si vous avez un exemple du dysfonctionnement dont vous parlez je suis preneur (il faut qu'il soit dans la page que j'ai créé ou les données sont statiques)
Matthieu
bonjour je reviens sur le sujet, je ne comprends dans votre code où vous prenez vos coordonnées concernant les créatures ? je n'arrive pas à l'adapter à ma requête sql comme ma carte précédente.
Par ailleurs j'ai décommenté la partie qui affiche le fond de carte "var image" je n'arrive pas à afficher ce fond de carte pour autant, merci de votre aide
ericfrigot
Bonjour, dans le code source de la page à la ligne 11 je charge un fichier data.js, c'est dans ce fichier que j'ai défini en static les créatures et les plantes avec leurs coordonnées. Elles sont ensuite lues ligne 95 et 96 pour les plantes (dans la boucle for) et ensuite ligne 111 et 114 pour les créatures.
Pour afficher l'image il faut supprimer également le style CSS #map qui s'affiche par dessus et représente une grille en CSS.
J'ai fait une nouvelle version avec des clusters colorés pour différencier plantes et créatures, supprimé la fonction xy et supprimé la multiplication par 10 des coordonnées. Par ailleurs quelle est la taille supposée de votre monde ? J'ai indiqué pour que la taille affichée soit correcte que l'image de fond faisait -20,20 à 20,20, mais je ne sais pas si c'est logique. La nouvelle version est visible ici : https://www.datavis.fr/maps...
Matthieu
Super merci, je fais un essai au plus vite.
Mon monde n'a pas de taille défini pour le moment, c'est extensible, mais mon fond de carte fais pour le moment 100*100
Jiji
Bonjour Eric,
Je me permets de vous poser une petite question car j'ai modifié grâce à votre tuto les groupement de marqueurs, mais maintenant je souhaite modifier les marqueurs bleu basique de leaflet. J'ai cherché dans les fichier .css, je n'arrive pas à modifier la source de ces marqueurs.
Pourriez-vous me donner quelques indications?
Je vous remercie d'avance pour votre retour.
ericfrigot
Bonjour,
J'ai ajouté une partie au tutoriel "Leaflet - Premier pas" concernant la création de marker spécifique. Eric
Jiji
Bonjour Eric,
Je vous remercie pour l'ajout que vous avez effectué. Je me suis mal exprimé je pense. Je parlais des marqueurs des "regroupements de markers". : C'est à dire lorsque qu'on zoome au maximum sur un groupement de marqueurs et qu'on voit un point en particulier.
Je vous remercie infiniment pour votre aide.
ericfrigot
Bonjour Jiji,
Désolé, mais je ne comprend toujours pas ce que vous voulez faire, pourriez-vous me faire voir l'avant et l'après en image que vous voulez obtenir ?
Eric
Jiji
Bonjour Eric,
Je vous remercie pour votre aide. J'ai ajouté en pièce jointe un imprime écran de votre dernier exemple en particulier. J'ai en fait modifié la couleur du groupement de marqueurs (rouge maintenant), mais les marqueurs restent bleus : Ce qui est tout a fait logique.
J'aimerai donc homogénéiser les couleurs de manière simple en mettant un marqueur rouge. Mon idée est de simplement modifier le fichier source du marqueur mais ne trouve pas son URL.
En espérant avoir été clair. Sachez que j'apprécie énormément votre aide et votre site qui est super.
ericfrigot
Bonjour Jiji, alors c'est bien ce que j'avais compris et l'ajout que j'ai fait dans le tutoriel "Leaflet - Premier Pas" correspond bien à votre problématique. Pour information les markers sont des images, il faut donc que vous modifiez l'image du marker. Un exemple correspond exactement à ce que vous voulez se trouve sur ce lien : http://harrywood.co.uk/maps.... Il vous faudra donc télécharger cette image : http://harrywood.co.uk/maps...
Jiji
Bonjour Eric,
Je vous remercie pour votre réponse et suis désolé pour mon double post. En effet, cela marche de manière impeccable.
Merci beaucoup!
Jiji
Bonjour, tout d'abord je souhaite vous féliciter pour votre site internet très réussi et très utile. Je souhaiterais savoir s'il était possible de personnaliser les marqueurs circulaires (avec les nombres) ? Peut-être dans la librairie js?
Je vous remercie d'avance
ericfrigot
Bonjour et merci pour vos compliments, ça fait toujours plaisir. J'ai rajouté une petite partie sur la personnalisation des marqueurs, j'espère que vous y trouverez l'inspiration.
Jiji
Bonjour et je vous en prie. Celui-ci est vraiment excellent. Et la nouvelle partie "personnalisation des markers" est très intéressante car elle nous permet de mieux comprendre la construction de la carte.
Ensuite, merci beaucoup pour la réalisation de cette partie. Bravo!