Discussion :

[otsgd]

Bonjour,

J'étudie l'éventualité d'utiliser GéoPortail API pour les cartes que l'on utilise dans notre agence (fonction publique). Pour l'instant j'avais fait mon développement avec Google Maps mais d'un point de vue politique il serait souhaitable de passer à un service français financé par le gouvernement.

Notre usage actuel consiste à afficher des points géolocalisés sur la terre entière, mais principalement sur la France. Ce qui donne ceci :



Les couleurs sont voyantes et facilitent la lecture, en zoomant un peu, c'est pareil :




Sur la première image, j'affiche environ 10000 markers qui sont groupés, c'est la limite que l'on a fixé pour ne pas saturé le poste client. Mais Google Maps permet de monter bien plus haut (surtout avec chrome) et sur ma machine je peux afficher 90000 markers.

Avant de passer à GéoPortail, j'aimerais savoir si d'autres personnes ont un tel usage de cet API. La seule chose que j'ai trouvé pour l'instant c'est ce lien : http://mga.alwaysdata.net/geoportail..._strategy.html

Je ne sais pas si c'est facile à modifier, mais pour l'instant je trouve ça quasi-illisible et en zoomant, il devient presque impossible de retrouver les groupes de markers.

Merci à tous pour vos avis et conseils sur ce sujet !

[cmail]

Quelques éléments de réponses:
1/ L'exemple cité est une page d'essai pour tester certaines ressources de l'API. Son auteur, Marc, n'y développe généralement pas le coté esthétique de ses tests. Par contre, il va à l'essentiel ce qui nous facilite la compréhension. Tu peux t'appuyer sur ses codes pour aller plus loin dans le rendu (via css ou astuce JS)...
2/ Un exemple plus abouti, peut-être plus difficile à analyser du fait de l'abondance du codage c' est : http://www.utagawavtt.com/gmap/carte-generale-topos-vtt . Mais là encore pas de couleur différente (ce qui ne serait pas trop difficile à introduire avec JS)...
3/ Sinon, sauf erreur de ma part, dans ton cas, les différents "cluster" que tu utilises sont des fichiers images (hormis la notation chiffrée), il faudra donc (via JS) qu'à partir de l'exemple de Marc et celui de utagawavtt, tu remplaces la création des pastilles vectorisées par l'image de couleur que tu souhaites en fonction du nombre de données...
4/ Il me semble qu'il y avait un exemple source IGN, mais je ne retrouve plus l'URL...

Tiens nous au courant de l'avancement de ton projet car je crois que tes perspectives colorées sont très légitimes et pourront intéresser d'autres projets...

[gcebelieu]

Bonjour,

voici quelques éléments complémentaires, et si je peux me permettre de commenter le code de Marc, voici le bout de code qui gère le style du cercle :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 style = new OpenLayers.Style({
    pointRadius: "${radius}",
    label: "${nombre}",
    strokeColor: "green",
    strokeWidth: 5,
    strokeOpacity: 0.5,
    fillColor: 'orange',
    fillOpacity: 0.5
  }, {
    context: {
      nombre: function (feature) {
        if (feature.cluster) return feature.attributes.count;
        else return feature.attributes.name;
      },
      radius: function (feature) {
        mgaF = feature;
        return Math.min(feature.attributes.count, 30) + 3;
      }
    }
  });

où la fonction radius permet de calculer le rayon du cercle en fonction du nombre de markers regroupés.

On peut aussi, comme le suggère cmail remplacer l'affichage d'un cercle au rayon variable par des images choisies en fonction du nombre de markers en utilisant la propriété 'externalGraphic' qui permet de spécifier une ul vers une image.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 style = new OpenLayers.Style({
    externalGraphics: "${getImage}",
  }, {
    context: {
      getImage: function (feature) {
        var url= null ;
        // determiner ici l'url de l'image en fonction de "feature.attributes.count"
        ...
        return url ;
      }
    }
  });

NB. les différentes propriétés offertes pour gérer le style des ponctuels sont documentées ici :
http://dev.openlayers.org/releases/O.../Point-js.html

[otsgd]

Bonjour à tous,

Je reviens sur ce thread après plus d'un mois d'absence, mais j'ai du nouveau. J'ai enfin pu travailler sur mon problème ces dernières semaines et il est maintenant résolu.

Tout d'abord, je tenais à remercier cmail et gcebelieu pour leurs réponses qu'y m'ont permis de commencer mes investigations.

J'ai effectivement pu modifier la couleur des cercles afin qu'elles ressemblent à celles de Google. En partant de l'exemple de Marc, cela donne ce résultat :
http://ekseerg.com/geoportail_api_qu..._strategy.html

Par contre, je suis désolé mais ma clé GéoPortail n'est pas valide pour mon site et je ne sais pas comment faire pour en obtenir une sans devoir payer.

Mais le résultat que j'ai obtenu est loin d'être suffisant pour un usage professionnel et j'ai donc passé pas mal de temps à éplucher les différents sites que j'ai pu trouver. Bref, la solution parfaitement satisfaisante que j'ai obtenue est visible ici :
http://ekseerg.com/leaflet/

(Pour voir la carte penser à changer de layer avec l'icone en haut à droite).

Cette solution contient tout ce qu'il me faut et elle est basée sur Leaflet :
- Groupement automatique des points avec animation lors de changement de zoom.
- Lorsque l'on survole un groupe, une zone représentant tous les points apparait.
- Lorsqu'il n'y a qu'un élément un marker clicable apparait
- Lorsqu'il y a plusieurs éléments sur un même point, une opération de type spider marker rentre en jeu.
- Gestion multi-provider (ici Géoportail, OpenStreetMap & Google Maps).

L'ensemble est très performant (tester avec 50 000 markers et ça ne rame pas plus que Google Map API).

Par contre cette solution fait intervenir plusieurs librairies graphiques, si ce code vous intéresse vous êtes libre de le reprendre et de l'adapter à vos besoins, par ailleurs je pourrais également répondre à vos questions (dans la limite de mes connaissances) sur cet exemple.

Dans le fichier geoportalLeaflet.js, le seul code vraiment important après le trick pour charger l'api GéoPortail est dans la méthode initMap() et celle-ci tient en 50 lignes.

Pour mon usage, j'ai fait de tout ce code un Widget YUI que je peux facilement instantier en quelques lignes pour l'utiliser dans notre application. Si vous utilisez YUI je pourrais aussi vous fournir le code.

Dans le fichier index.html vous pouvez remplacer l'import de addressPoints2000.js par addressPoints50000.js à vos risques et périls bien sûr.

En espérant en aider certains !

[gcebelieu]

Bonsoir, et merci de votre retour d'expérience avec l'utilisation de Leaflet.

Par contre, je suis désolé mais ma clé GéoPortail n'est pas valide pour mon site et je ne sais pas comment faire pour en obtenir une sans devoir payer.

A priori, votre site ekseerg.com n'est pas commercial. Vous devez pouvoir contracter une clef web gratuitement sur le site professionnels.ign.fr/api-web pour un site internet grand public.

[otsgd]

Merci pour l'information, je viens de faire une demande de clé et je mettrais à jour mon site dès que je l'aurais.

[mga_geo]

C'est un superbe travail !

[otsgd]

Merci mga_geo !
Je viens d'intégrer une clé valide et maintenant les cartes IGN apparaissent bien : http://ekseerg.com/leaflet/
EDIT : j'ai parlé trop vite, en zoomant ça ne fonctionne plus...
EDIT2 : il faut utiliser l'url : http://www.ekseerg.com/leaflet/

[cmail]

....je mettrais à jour mon site dès que je l'aurais.

Vite! Car je découvre plein de chose : D3JS entre autres!

Mais d'ici à ce que je puisse l'utiliser correctement!

Et pour leaflet, c'est super comme ergonomie! Une très bonne base d'apprentissage....



Si tu as d'autres trouvailles du genre, je suis preneur.

[otsgd]

Vite! Car je découvre plein de chose : D3JS entre autres!

Mais d'ici à ce que je puisse l'utiliser correctement!

Et pour leaflet, c'est super comme ergonomie! Une très bonne base d'apprentissage....



Si tu as d'autres trouvailles du genre, je suis preneur.

Le site est à jour maintenant, il faut utiliser cet URL : http://www.ekseerg.com/leaflet/

Si tu découvres D3JS, je serais content d'avoir ton retour sur quelques tutoriels que j'ai écris : http://ekseerg.com/index.php?page=d3js

Tu serais la première personne à les regarder je pense
Aussi, si tu cherches à faire des choses précises avec D3JS, je pourrais m'y pencher et en faire un nouveau tutoriel (suivant le sujet bien sûr).

[mga_geo]

Bonjour à tous,

L'url n'est plus valide, quelqu'un a encore le code ?