[résolu] Carte Google Maps avec "zones de densité"

OTP · 5 Novembre 2015

Bonjour,

Je cherche à améliorer certaines de mes cartes Google Maps sur mon site.
Certaines ont plusieurs centaines de plots, c'est lourd à charger et dur à lire.
J'ai déjà vu des cartes avec peu de plots, ces derniers indiquant par exemple "20" et quand on clique sur le plot en question, ça zoome automatiquement et on voit alors les 20 plots, ou alors d'autres plots avec des nombres, plus détaillés que le premier.

Pouvez-vous me dire comment ça se nomme ? Dur de chercher sur Google sans mot clé !

Merci,

OTP

OTP · 5 Novembre 2015

Re: Carte Google Maps avec "zones de densité"

J'ai trouvé, c'est le clustering !

spout · 5 Novembre 2015

https://developers.google.com/maps/articles/toomanymarkers

Je te conseille cette lib: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerc ... rence.html

Code:

bower install markerclustererplus

Démo: http://eaupotable.info/fr/

OTP · 5 Novembre 2015

Merci spout !

HS : c'est ton site ?

spout · 5 Novembre 2015

OTP · 5 Novembre 2015

La photo de Ver-lès-Chartres est de moi ! Prise avec Madri.
J'aime ce site. Je vais te faire tes contributions.

spout · 5 Novembre 2015

OTP a dit:
Prise avec Madri.

Ah oui c'est lui qui me l'a donnée

OTP · 5 Novembre 2015

Déjà deux ajoutées (Buc et Tournefeuille).
J'y penserai maintenant.

longo600 · 5 Novembre 2015

Et Open street map?

spout · 5 Novembre 2015

@longo600: ?
J'utilise les données OpenStreetMap aussi (68.000+ marqueurs de chez eux).

OTP · 5 Novembre 2015

longo600 a dit:
Et Open street map?

Ben c'est déjà codé en GG Maps !

spout · 5 Novembre 2015

Il y a un bouton pour afficher le layer OSM aussi.

OTP · 5 Novembre 2015

Je vois que je dois recoder mon truc (ancienne API).
Je regarde ça bientôt, à tête reposée, comme disait Louis XVI...

patapon87 · 5 Novembre 2015

OTP a dit:
Je regarde ça bientôt, à tête reposée, comme disait Louis XVI...

nooooooooooooooooooooooooooooon

OTP · 10 Novembre 2015

Debrief : pas facile à coder quand on est une quiche (mon coté lorrain) comme moi et qu'on part d'un code fait avec les pieds.
Mais après deux jours j'ai enfin un truc qui marche.
Mes cartes à 4000 plots étaient inutilisables, c'est maintenant très fluide.
A 15000 plots, ça marche encore nickel.

En bref, le clustering, c'est bon, mangez-en !

OTP · 12 Mai 2016

Bonjour,

Je constate ce matin que ça ne fonctionne plus correctement : exemple ici : -http://www.thewindpower.net/country_maps_en_1_france.php

J'ai les nombres, mais plus les cercles de couleur.

Je ne pense rien avoir changé au site à ce sujet.

Que se passe t-il ?

Michaël

spout · 12 Mai 2016

Re: Carte Google Maps avec "zones de densité"

A cause des erreurs suivantes:

Code:

country_maps_en_1_france.php:1 GET http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m3.png 404 (Not Found)
country_maps_en_1_france.php:1 GET http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m2.png 404 (Not Found)
country_maps_en_1_france.php:1 GET http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png 404 (Not Found)

Parce que ça a été déplacé sur GitHub:
http://googlemaps.github.io/libraries.html
https://github.com/googlemaps/js-marker-clusterer

Pour l'avoir en local:

Code:

bower install js-marker-clusterer

ou

Code:

npm install js-marker-clusterer

OTP · 12 Mai 2016

Re: Carte Google Maps avec "zones de densité"

Merci
Je ne peux pas lancer ce code.
Je devrais avoir seulement des URL à changer, non ?

spout · 12 Mai 2016

Re: Carte Google Maps avec "zones de densité"

Si tu trouves un autre CDN qui le fourni ou télécharger le .zip à partir de GitHub.
Mais je te conseille vraiment d'installer nodejs afin d'avoir "npm".
Une fois que tu as npm:

Code:

npm install -g bower

OTP · 12 Mai 2016

Re: Carte Google Maps avec "zones de densité"

Sorry c'est du chinois pour moi ta réponse !

Moi, j'ai en header :

Code:

<script type="text/javascript" src="<? echo $path; ?>/fct/markerclusterer.js"></script>
<script type="text/javascript" src="<? echo $path; ?>/fct/oms.min.js"></script>

Je ne vois pas où je pointe vers l'extérieur.

Il n'est pas possible en modifiant un ou deux de ces fichiers de refaire fonctionner le biniou ?

spout · 12 Mai 2016

Re: Carte Google Maps avec "zones de densité"

Ah ok sorry je n'avais pas fait gaffe.
Tu dois overrider les "styles" des clusters alors, comme dans l'exemple ici:
https://googlemaps.github.io/js-marker-clusterer/examples/advanced_example.html
Afin de spécifier l'"url" pour chaque.

J'ai le même bug sur mes sites, j'vais devoir corriger ça aussi.

OTP · 12 Mai 2016

Re: Carte Google Maps avec "zones de densité"

Si je comprends bien (l'exemple que tu donnes a le même bug que moi), mes adresses - http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerc ... ges/m*.png sont devenues fausses.

Je dois donc pointer ailleurs ?

C'est bien ça ?

Mais où ?

Merci pour ton aide au boulet de service...

spout · 12 Mai 2016

Re: Carte Google Maps avec "zones de densité"

Vers ton serveur, là où tu auras téléchargé m1.png, m2.png, m3.png qui se trouvent ici: https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images

Exemple de surcharge de l'URL de l'icône: https://github.com/googlemaps/js-marker-clusterer/blob/gh-pages/exampl ... e.html#L53

OTP · 12 Mai 2016

Re: Carte Google Maps avec "zones de densité"

Merci, ça marche.
Tu es compétent et patient, bravo !