Evolution #97

Intégration de l'API Google Maps

Added by Grégory MARIGOT - TEICEE over 11 years ago. Updated over 10 years ago.

Status:Fermé Start date:03/24/2011
Priority:Normal Due date:
Assignee:Grégory MARIGOT - TEICEE % Done:

100%

Category:-
Target version:ProxyEPN 2.1
Version ProxyEPN:2.0 Beta

Description

Les données de géolocalisation des EPN sont renseignées dans les fiches et stockées dans la BdD (cf #63).
L'application peut donc les exploiter pour générer elle-même une carte des EPN ou le plan de chaque EPN.

Celà peut se faire avec l'API javascript de Google Maps (actuellement en V3) :
http://code.google.com/intl/fr/apis/maps/documentation/javascript/

Associated revisions

Revision 467
Added by Grégory MARIGOT - TEICEE about 11 years ago

NEW #97: Installation du plugin sfEasyGMap

Revision 469
Added by Grégory MARIGOT - TEICEE about 11 years ago

NEW #97: Modification des sources de sfEasyGMapPlugin pour pouvoir fonctionner sans API key, malgré LC_NUMERIC en fr_FR par défaut, et en chargeant l'API par HTTPS

Revision 470
Added by Grégory MARIGOT - TEICEE about 11 years ago

NEW #97: Affichage du plan de chaque EPN et de la carte générale

Revision 471
Added by Grégory MARIGOT - TEICEE about 11 years ago

NEW #97: Ajout d'une picto pour gérer l'ombre des marqueurs sur Google Maps

Revision 475
Added by Grégory MARIGOT - TEICEE about 11 years ago

NEW #97: Utilisation d'un nouveau widget permettant la saisie de coordonnées de géolocalisation avec GoogleMaps

Revision 476
Added by Grégory MARIGOT - TEICEE about 11 years ago

NEW #97: La génération de la carte des EPN devient un component pour permettre son intégration sur diverses pages

Revision 479
Added by Grégory MARIGOT - TEICEE about 11 years ago

NEW #97: Intégration d'une carte des EPN pour les groupements d'EPN.
NEW #109: Ajout de macros pour les pages d'accueil GEPN afin d'intégrer les cartes d'EPN.

Revision 480
Added by Grégory MARIGOT - TEICEE about 11 years ago

NEW #97: Amélioration de l'ergonomie et des fonctionnalités des cartes d'EPN

Revision 482
Added by Grégory MARIGOT - TEICEE about 11 years ago

FIX #97: Calcul plus efficace pour le centrage/zoom automatique en fonction des marqueurs et des dimensions de la carte

Revision 486
Added by Grégory MARIGOT - TEICEE about 11 years ago

NEW #97: Ajout d'une action 'epn/mapEmbed' affichant la carte des EPN seule, permettant des exploitations externes (ex iframe)

Revision 493
Added by Grégory MARIGOT - TEICEE about 11 years ago

NEW #97: La carte des EPN seule (mapEmbed) ne requiert plus un accès SSL. Les info-bulles sont améliorées et peuvent contenir davantage d'informations (activées sur mapEmbed)

Revision 693
Added by Grégory MARIGOT - TEICEE about 8 years ago

NEW #97: intégration de la nouvelle option 'bgtype' pour les cartes en mode 'embed' (suite r688)

History

Updated by Grégory MARIGOT - TEICEE about 11 years ago

  • Target version changed from ProxyEPN 2.x to ProxyEPN 2.1

Updated by Grégory MARIGOT - TEICEE about 11 years ago

  • Status changed from Nouveau to In Progress
  • % Done changed from 0 to 20

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.

Updated by Grégory MARIGOT - TEICEE about 11 years ago

  • % Done changed from 20 to 40

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.

Updated by Grégory MARIGOT - TEICEE about 11 years ago

  • % Done changed from 40 to 70

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'.

Updated by Grégory MARIGOT - TEICEE about 11 years ago

  • % Done changed from 70 to 80

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)

Updated by Grégory MARIGOT - TEICEE about 11 years ago

  • Status changed from In Progress to Résolu
  • % Done changed from 80 to 100

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.

Updated by Grégory MARIGOT - TEICEE about 11 years ago

Modifications publiées sur le svn (r486) :

Affichage de la carte seule (intégration externe)

Une nouvelle action a été définie à l'adresse 'epn/mapEmbed'. Elle propose la carte des EPN avec un layout particulier, qui n'affiche aucun menu, entête, signature, titre, filtres, etc...

Ainsi cette page est idéale pour l'intégrer depuis d'autres sites, via un iframe par exemple :

1 <iframe src="http://demo.proxyepn.org/epn/mapEmbed" 
2  scrolling="no"></iframe> 

De plus cette page accepte quelques paramètres optionnels :
  • width: largeur de la carte (par défaut 100%)
  • height: hauteur de la carte (par défaut 500px)
  • zoom: niveau de zoom (par défaut selon les marqueurs)
  • center: coordonnées du centre (par défaut selon les marqueurs)

Attention : La carte ne peut s'afficher que si une hauteur est définie en pixel ! Cela ne fonctionne pas avec une taille relative (en %), contrairement à la largeur qui accepte les deux.

Généralement il sera pertinent d'adapter la taille de la carte et celle de l'iframe :

1 <iframe src="http://demo.proxyepn.org/epn/mapEmbed?height=400" 
2  height="400px" width="100%" scrolling="no"></iframe> 

Un dernier exemple avec l'utilisation des paramètres 'zoom' et 'center' :

1 <iframe src="http://demo.proxyepn.org/epn/mapEmbed?center=49.18;-0.38&zoom=15" 
2  height="500px" width="100%" scrolling="no"></iframe> 

Updated by Grégory MARIGOT - TEICEE over 10 years ago

  • Status changed from Résolu to Fermé

Also available in: Atom PDF