ProxyEPN

Modifications publiées sur le svn (r467 et r469) :

Intégration de sfEasyGMap¶

Le plugin sfEasyGMap est utilisé pour intégrer l'API de Google Maps au framework Symfony. La version déployée est celle récupérée sur le dépôt GitHub du projet : https://github.com/theodo/sfEasyGMapPlugin

Des modifications du code du plugin s'avère nécessaires, que ce soit pour y apporter quelques corrections, des adaptations ou des améliorations... Dans ces conditions le projet ProxyEPN contient ses propres sources, plutôt que de définit une référence externe dans le dépôt vers les sources d'origine.

Voici quelques uns des changements initiaux effectués sur le plugin :

• Fonctionnement possible en se passant de définir une API Key dans la configuration de l'application. Google Maps V3 n'en exige plus pour fonctionner, l'instanciation d'un objet PHP GMap doit accepter de ne pas en trouver.
• Prise en compte des locales PHP pour générer un code JS valide dans tous les cas (ne jamais écrire de nombre dans du code JS avec une virgule en séparateur décimal).
• Utilisation de l'API Google Maps au travers HTTPS : si l'application est utilisé avec le protocole sécurisé, cela est détecté pour que le chargement des fichiers distants de l'API JS se fasse sur l'adresse adéquate, afin d'éviter un mix de contenus en clair/cryptés.

D'autres modifications seront effectuées sur les sources du plugins pour satisfaire au mieux les besoins applicatifs.

Modifications publiées sur le svn (r470 et r471) :

Génération dynamique des cartes et plans¶

Une nouvelle action est crée dans le module structure pour obtenir la carte générale des EPN (sous /epn/map). Une entrée dans le menu principal ainsi que des liens dans les menus contextuels permettent d'y accéder, au même titre que pour la liste des EPN.

De plus, chaque fiche d'EPN affiche également une carte proposant ainsi le plan correspondant.

Sur la carte générale, l'application de quelques filtres est possible (de la même manière que sur la liste traditionnelle). Enfin les marqueurs utilisés permettent une distinction entre les EPN proposant des téléformations et les autres.

Modifications publiées sur le svn (r475) :

Widget de sélection de coordonnées¶

Un nouveau widget est créé, nommé myWidgetFormGMapCoordinates. Son but est d'afficher une carte Google Maps avec un marqueur déplaçable afin de permettre la saisie de données de géolocalisation (coordonnées latitude / longitude).

Le widget se charge lui-même d'afficher 2 champs textes contenant les valeurs des coordonnées :

• Les champs sont initialisés avec la valeur fournie par défaut au widget, sous la forme d'une chaine "lat;lng".
• Un marqueur est placé sur la carte à partir des valeurs des champs textes.
• Une modification manuelle d'une coordonnée dans son champs texte entraine automatiquement la mise à jour de la position du marqueur.
• Le marqueur peut être déplacé par drag & drop entrainement la mise à jour des coordonnées des champs textes au moment où il est reposé.
• Un clic droit sur la carte permet aussi de déplacer le marqueur de manière immédiate
• Si la carte ne dispose d'aucun marqueur (champs vides sur la fiche), le clic droit permet alors de le créer

De plus, si le formulaire dispose de champs d'adresse, il semble intéressant de pouvoir obtenir la position du marqueur à partir de ces infos :

• Lors de la définition d'un widget, jusqu'à 3 champs de formulaire peuvent lui être indiqué pour obtenir des infos sur l'adresse
• Un bouton "From address" fait également parti du widget, permettant de demander un positionnement à partir des champs indiqués
• Les valeurs courantes des champs sont alors lus pour générer la requête de localisation auprès des services de Google Maps.
• Au moment de la réponse le marqueur est automatiquement repositionné et les champs textes des coordonnées sont mis à jour (seule la 1er position est utilisé en cas de réponse multiple).
• Le widget peut également être initialisé avec un suffixe d'adresse : cette chaine sera toujours ajoutée pour compléter les adresses intérogées (ex pour spécifier le pays s'il n'est pas dans un champs de formulaire).

L'apparence du widget peut être personnalisée au travers de quelques options (largeur, hauteur et style pour la carte ainsi que le nom de classe du conteneur global). Aussi le code HTML ainsi que JS qui sont produit utilisent chacun un template, également modifiable si besoin via les options du widget.

Les intéractions avec le widget sont gérés grâce à du code Javascript fournis dans un fichier externe (gmaps.js). Tout le code se trouve intégré au sein d'un objet : le template JS du widget se charge de l'instancier, son fonctionnement se fait par ses méthodes. Ainsi il n'y a pas de variables globales puisque les données sont stockées en propriétés de l'objet.

Enfin, un validateur accompagne le widget. Celui-ci se charge de valider les valeurs des coordonnées fournies dans les 2 champs textes (nombres décimaux compris entre -45/45 et -180/180).
Au final le widget retourne un tableau avec les 2 valeurs, avec pour clés 'lat' et 'lng'.

Modifications publiées sur le svn (r476 et r479) :

Utilisation d'un component pour la carte des EPN¶

L'action structure/map a été épurée en tranférant le code lié à la génération de la carte dans un component. De cette manière il devient possible de solliciter l'affichage d'une carte des EPN depuis n'importe quelle page de l'application, sans réécrire de code particulier si ce n'est l'appel au component.

Le component structure/map accepte quelques paramètres :

• width pour spécifier la largeur de la carte (par défaut 100%)
• height pour spécifier la hauteur de la carte (par défaut 500px)
• selection pour lui fournir la liste des objets structure à afficher sur la carte
• ou selFilters pour indiquer le filtre de recherche (hachage utilisé par la méthode retrieveByFilters())
• et selContext pour spécifier un contexte de recherche (objet Context utilisé par les méthodes retrieveBy...)

Tous ces paramètres sont facultatifs :

• Si selection est fournis, alors selFilters et selContext n'ont aucune utilité.
• Sinon le component se charge lui-même de récupérer la sélection d'EPN en fonction de ces 2 paramètres : s'ils ne sont pas indiqués la liste complète des EPN sera obtenue (le contexte par défaut est un contexte vide = aucune restriction).

Le template associé au component se charge :

• de déclarer l'usage du Helper 'GMap'
• d'écrire le code HTML nécessaire (div contenant la carte)
• d'écrire le code Javascript nécessaire (création de la carte avec l'API de Google Maps)
• de notifier à la page le chargement du fichier JS externe contenant l'API

L'affichage de cartes des EPN peut ainsi se faire facilement depuis plusieurs pages de l'application. En plus de la page dédiée à la carte générale, on peut donc retrouver une carte des EPN sur la fiche d'un GEPN, ainsi que sur les pages d'accueil (générale ou propre à un GEPN).

Concernant les pages d'accueil, ceci passe toujours par le traitement de modèles contenant des macros (cf #109)

Modifications publiées sur le svn (r480) :

Fonctionnalités de la carte des EPN¶

Lorsqu'une carte est affichée, elle est initialement centrée et zoomée pour contenir l'ensemble des marqueurs présents. Au niveau de son interface, le fond de carte est du type "terrain" (routes et reliefs), le controle du zoom est forcée en taille large (avec sa réglette).

Plusieurs évènements sont mis en place pour intéragir sur la carte :

• le zoom est actif avec la molette de la souris et avec le double-clic sur la carte.
• le survol d'un marqueur affiche le nom et la ville de l'EPN.
• un clic simple sur un marqueur ouvre une bulle d'info (contenant nom et adresse de l'EPN avec lien vers la fiche).
• un clic sur un autre marqueur ferme une éventuelle bulle précédement ouverte (en réalité la bulle est unique, elle est alors déplacée et son contenu est modifié).
• un double-clic sur un marqueur effectue un gros plan : la carte passe en zoom rapproché avec le fond de carte en "roadmap" (plan des rues).
• un clic droit sur la carte permet de revenir à la vue initiale : fond de carte "terrain" avec zoom et centrage permettant l'affichage de tous les marqueurs.

A noter : Puisque la carte affiche généralement tous les EPN, quelque soit le contexte de l'utilisateur, un marqueur orange est utilisé pour les EPN faisant partie de son contexte (EPN de rattachement de l'usager, EPN liés au sous-domaine utilisé ou encore pour un animateur les EPN sur lesquels il exerce son rôle).

Pour les cartes servant de plan sur la fiche d'un EPN, le fond de carte est par défaut en mode "roadmap" et il n'y a pas de bulle d'info (inutile puisqu'on se trouve déjà sur la fiche complète). Un clic sur le marqueur effectuera un zoom en restant centré dessus.