Animint

  Anime & manga

 
 
“Animint traite des dessins animés japonais et du manga. Outre ce blog, le site comporte plusieurs milliers de pages de texte illustré.”

Une carte interactive des conventions et des événements anime manga

Par le :: Webmastering

films , mangas , 2009 , 2010 , animes

En voyant le travail d'Amo pour faire un état des lieux annuel des conventions, je me suis mis à penser qu'une interface de navigation carte serait un petit plus pour la page des manifestations. La lecture graphique est plus rapide et l'information pertinente quand il s'agit d'une exposition dans un bled inconnu, mais pas forcément loin de chez vous. D'où l'idée d'avoir l'ensemble des lieux des manifestations sur une carte de France des événements, et ce, de manière dynamique.

Je reviendrai sur la programmation derrière mais voyons d'abord les fonctionnalités. La première est tout simplement d'afficher la carte de France par défaut et d'y placer un marqueur par événement. A cette échelle, les lieux sont trop condensés dans certaines régions, notamment sur Paris, pour pouvoir être affichés individuellement. Au lieu d'avoir des drapeaux éparpillés en touffes, le système regroupe les points proches sous une seule bannière, en mentionnant le nombre total de points recouverts.

Pour avoir les points séparés, il faut cliquer sur le marqueur commun. Cela augmente le zoom et vous pouvez distinguer les points différents. Si des points sont encore trop proches, ils restent regroupés jusqu'à ce que le zoom soit suffisant. Plusieurs événements se déroulent cependant au même endroit. C'est notamment le cas pour les nocturnes de l'Epita et les sessions de Paris Manga. J'ai décalé artificiellement les points lorsqu'une telle configuration se présente.

En cliquant sur chaque marqueur individuel, une info-bulle s'affiche, avec le titre de l'événement, le lieu et la date, et un lien vers la fiche détaillée dans la rubrique des actualités.

Vous remarquerez que les icônes ont des aspects différents. J'ai distingué 3 grands types d'événements

- Les conventions: Les événements phares, en général sur au moins 2 jours, avec des stands et  un bon nombre d'activités et d'invités

- Les expositions: Là dedans se classent notamment toutes les expositions itinérantes présentées par les médiathèques et les bibliothèques.

- Les animations diverses: Tout le reste, ce qui englobe les soirées ou les journées ponctuelles, les ateliers manga, les festivals de films et les projections.

En cliquant sur la légende des icones, vous pouvez filtrer la carte qui ne retient plus que les événements de type conventions, expositions ou diverses.

Par défaut, les événements affichés sont ceux à venir, exactement comme dans la liste de la page d'accueil des actualités. Après vous pouvez naviguer sur 2010 et 2009 pour sélectionner toutes les manifestations qui correspondent.

Voilà pour la partie fonctionnelle. Abordons maintenant l'aspect technique.

La carte s'appuie sur Google Map, mis à disposition gracieusement. Pour afficher la carte, il suffit d'appeler un Javascript chez Google et de passer une myriade de paramètres pour afficher les différents éléments de base. Une fois les points définies par leur latitude ou leur longitude, Google se charge de gérer les zoom et les glissements de carte.

Reste à définir les points et à construire la liste de paramètres à transférer.

La première étapes peut se faire à la main en allant sur le site Google Map, en entrant l'adresse de l'événement et en décortiquant le point sur la carte, vous pouvez isoler la longitude et la latitude, que vous enregistrez ensuite comme un nième champ à remplir pour votre événement.

A la main, c'est fastidieux mais là encore, une panoplie d'outils permet d'automatiser la manoeuvre: Les adresses postales sont extraites des fiches des événements, puis le système utilise l'API de Google Map pour récupérer les coordonnées de localisation. Cela va beaucoup plus vite que la méthode manuelle, bien qu'un certain nombre de localisations coincent, à cause de tel ou tel format d'adresse que ne comprend pas l'API. Dans ce cas, il faut corriger l'adresse ou forcer la latitude et la longitude à la main.

Une fois les coordonnées obtenues, il faut lancer les bonnes commandes Javascript, avec les bons paramètres pour générer la carte, tout comme il faut. Mon premier réflexe a été de reprendre une bibliothèque PHP qui cache le Javascript généré et le pond à ma place. Finalement, l'utilisation compliquait la tâche plus qu'autre chose:

- La bibliothèque génère le Javascript de manière bête et n'optimise rien du tout, répétant les appels et les lignes, dès qu'une boucle est utilisée, donc en gros dès qu'il y a plus d'un marqueur à mettre sur la carte.

- La maintenance est délicate, notamment dès que vous sortez des sentiers battus, avec un enchevêtrement entre le code PHP et le code Javascript, pour pouvoir insérer le module qui regroupe les points.

- Enfin, dans son API V3, Google a allégé le nombre de fonctions par rapport à la V2, et le tutoriel procure un exemple d'utilisation, clair et concis. La méthode l'offre l'avantage d'avoir le PHP d'un côté et le Javascript statique de l'autre. Je me suis calé dessus.

La carte est en ligne et peut être que je passerai à la moulinettes les manifestations plus anciennes que 2009, mais ce sera un autre chantier. Je regarderai aussi s'il y a un espoir de conserver un historique de navigation en ce qui concerne le zoom. Quand vous voulez dézoomer, le réflexe est de faire back sur votre navigateur et cela vous fait quitter complètement la page.

Enfin, je m'attaquerais sans doute à une autre carte du site, mais avant, je dois revoir l'interface d'administration correspondante, qui est en quelque sorte sur la face cachée d'Animint - qui a dit le côté obscur?


La cartes des événements mangas japanim

Discuter de ce billet sur le forum - - Laisser un commentaire »

Cet article vous a plu?

Faites-le connaître ou votez pour cet article sur les sites suivants :

  • anime manga aggregator sama
  • Partager sur del.li.cious
  • Partager sur Facebook
  • Partager sur Google

Commentaires sur ce billet:

  1. Le 28/04/2010 à 10:38
    riri a dit

    beau projet ! (et ton filtre anti spam veut pas de w-o-o-t dans le message, wtf)

  2. Le 23/05/2010 à 14:34
    mushiro a dit

    Très bonne idée !

Ajoutez votre commentaire:

Merci de bien vouloir soigner votre orthographe et de proscrire le style SMS.


Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.

 

↑ Haut de page