Documentation des packages Websolution. Géo-localisation : affichage dynamique d'une carte

Transcription

1 Géo-localisation : affichage dynamique d'une carte Date de création : 21/05/2012

2 Sommaire 1. Installation Objectifs Administration des cartes Gestion des providers d API : Gestion des clés d API Gestion des cartes Création de la carte Ajout des points d intérêt Modification d un point d intérêt Suppression d un point d intérêt Insertion d une carte dans une page en FRONT Révision 23 Page 2/12

3 1. Installation Ce package est constitué d un modèle HTML et d un module PHP qui peuvent être intégrés dans les blocs sur les pages. Une interface d administration permettant de gérer les différentes cartes et points. Et les fichiers nécessaires à l affichage de carte pour les API fournies. Révision 23 Page 3/12

4 2. Objectifs Créer et gérer des cartes générées dynamiquement à partir d API de cartographie telles que GoogleMaps, Mappy, ou ViaMichelin. Vous aurez aussi la possibilité d ajouter des points d intérêt sur ces cartes, ainsi que de configurer leur affichage. Révision 23 Page 4/12

5 3. Administration des cartes 3.1. Gestion des providers d API : Pour accéder à cette interface d administration, parcourez le menu comme suit : Vous arriverez alors sur la page suivante : Cet écran d administration va permettre de pouvoir gérer les fournisseurs d API de génération de carte. Le package est fourni de base avec l API de GoogleMaps v3. Dans le cas où vous voudriez rajouter une API non fournie (telle que Mappy, ViaMichelin, etc.), il vous suffit pour cela de cliquer sur la bouton «Ajouter» pour arriver sur le formulaire de création. Les champs à remplir sont : - Nom : Nom du fournisseur de votre API - Icône : Petite icône symbolisant le fournisseur - Géo-codeur : Fichier contenant le code HTML/JS correspondant au Géo-codeur de l API (convertisseur adresse postale => Latitude / Longitude) - Visualisateur de carte : Fichier contenant le code HTML/JS correspondant à l affichage de votre carte pour le FRONT (attention : respecter les placeholders et conditions des réglages). Note : Le géo-codeur et le visualisateur doivent être codés pour être 100% compatibles avec le package. Pour ceci, prenez les fichiers de GoogleMaps comme exemple. Révision 23 Page 5/12

6 3.2. Gestion des clés d API Une fois les fournisseurs d API renseignés au package, il va falloir lui renseigner vos clés de cryptage correspondante. En effet, la plupart des fournisseurs donne une clé vous permettant d être identifié auprès de leurs services. Pour accéder à cet écran, naviguez dans le menu comme suit : Vous arriverez alors sur l écran suivant : Pour ajouter une nouvelle clé, cliquez sur le bouton «Ajouter». Vous arriverez alors sur le formulaire correspondant et devrez remplir les champs suivants : - Fournisseur d API : le fournisseur désiré (créé préalablement, comme expliqué dans le chapitre précédent) - Nom : nom de votre clé, purement informatif - Clé de l API : clé qui vous aura été fourni - Active : défini si la clé est active ou non Une fois toutes les informations entrées, cliquez sur «Valider». Révision 23 Page 6/12

7 3.3. Gestion des cartes Maintenant que toutes les bases ont été préparées, il ne nous reste plus qu à créer notre carte et y ajouter les points désirés. Pour accéder à l écran de gestion, naviguez dans le menu comme suit : Vous arriverez alors sur l écran suivant : Pour créer votre carte complète, l action s effectuera en 2 étapes : - Création initiale de la carte - Ajout des points d intérêt Création de la carte Pour ceci, cliquez sur le bouton «Ajouter». Vous arriverez alors sur le formulaire correspondant, où vous devrez remplir les champs suivants : - Nom : nom de votre carte, purement informatif - Clé de l API : choisissez la clé correspondant à votre carte (créée au préalable, comme énoncé au chapitre précédent) Une fois toutes ces informations entrées, cliquez sur «Valider» pour finaliser la création initiale de votre carte. Révision 23 Page 7/12

8 Ajout des points d intérêt L ajout des points d intérêt sur votre carte se fait par l intermédiaire de la fiche de la carte (à noter que vous serez redirigé vers la fiche juste après la création de celle-ci). La fiche ressemblant à ceci sans aucun point configuré : Pour ajouter un nouveau point, il vous suffit de remplir les champs du bloc «Ajout d un nouveau point» : - Nom : nom de votre point, purement informatif - Latitude : latitude géographique du point - Longitude : longitude géographique du point - Titre du marqueur : titre de votre marqueur qui apparaitra lors du survol de la souris sur la carte - Description du marqueur : description de votre marqueur qui apparaitra lors du survol de la souris sur la carte - Couleur du marqueur : défini la couleur de la puce qui symbolisera votre point - Image du marqueur : si les puces de couleur ne vous suffisent pas, vous pourrez fournir l image désirée pour représenter votre point. Note : Si vous choisissez une couleur ET une image, l image sera prioritaire à l affichage. Pour les champs «Latitude» et «Longitude», vous pourrez à tout moment (si il a été inclu pour le fournisseur d API correspondant) un géo-codeur qui convertira une adresse postale en coordonnées. Révision 23 Page 8/12

9 Pour ceci, cliquez sur «Calculer les coordonnées», une fenêtre apparaitra : Pour calculer les coordonnées de votre point, il vous suffit de taper l adresse du lieu dans le champ «Adresse», puis de cliquer sur «Rechercher». Si l adresse a été trouvée, la carte affichera alors en direct le point désiré. Si le point trouvé est le bon, validez la recherche en cliquant sur «Utiliser ce point». Les coordonnées se placeront automatiquement dans le formulaire précédent : Révision 23 Page 9/12

10 Une fois toutes vos informations entrées et cliquez sur «Valider» : Quand au moins un point sera ajouté à votre carte, 2 éléments supplémentaires apparaitront : - La liste des points de la carte - Un aperçu visuel généré par l API de carte Révision 23 Page 10/12

11 Modification d un point d intérêt Pour modifier un point d intérêt, il suffit de cliquer sur l icône liste. à coté du point désiré sur la Lorsque vous cliquerez sur cette icône, un bloc apparaitra au dessus de la liste avec les informations de votre point : Modifiez alors les informations suivant vos besoins, puis cliquez sur «Valider» Suppression d un point d intérêt Pour supprimer un point d intérêt, il suffit de cliquer sur l icône à coté du point désiré sur la liste. Lorsque vous cliquerez sur cette icône, une confirmation vous sera demandée : En cliquant sur «OK» vous confirmerez alors la suppression du point. Révision 23 Page 11/12

12 4. Insertion d une carte dans une page en FRONT Pour inclure une carte sur une de vos page, il suffit de créer un bloc (cf. documentation Websolution) et d y inclure le package geolocalisation. En mode Edition, vous aurez la possibilité de configurer le package selon vos besoins : - Carte affichée : choisissez la carte que vous désirez afficher sur cette page (créée au préalable dans l écran d administration) - Identifiant de la carte : vous permet de spécifier l ID et la class de la div contenant la carte (pour une mise en forme CSS) - Largeur : défini la largeur de la carte (préciser «px» pour pixels ou «%» si en pourcentage) - Hauteur : défini la hauteur de la carte (préciser «px» pour pixels ou «%» si en pourcentage) - Type de carte : défini le type de carte affichée (Normale, vue satellite, hybride ou Terrain) - Autoriser le changement de type de carte : affiche ou non l interface pour pouvoir changer le type de carte pour les utilisateurs - Autoriser le glissement de carte : défini si les utilisateurs auront le droit de se déplacer sur la carte - Autoriser le zoom de la carte : défini si les utilisateurs pourront ou pas zoomer la carte (molette souris et interface de la carte) - Zoom automatique : défini si l API gérera automatiquement le centrage et le zoom de la carte par rapport aux points qui lui ont été spécifiés - Niveau de zoom manuel : si le zoom automatique est désactivé, défini quel sera le niveau de zoom - Cacher l interface utilisateur de la carte : permet de désactiver l interface d interactivité de la carte Révision 23 Page 12/12