Guide d installation et d utilisation du composant Geoportail pour le CMS Joomla

Transcription

1 Annexe I Par Tristan Roche Pour l IGN Guide d installation et d utilisation du composant Geoportail pour le CMS Joomla i

2 Sommaire Composant Geoportalapi... iii Installation :... iii Paramétrage :... v Insertion d une carte dans votre site WEB :... ix Plugin Geoportalapi... xii Installation... xii Paramétrage... xii Utilisation... xiii FAQ :... xvii ii

3 Composant Geoportalapi Installation : - - Téléchargez le composant à l adresse suivante : Allez sur la page d administration de votre site ( VotreSite/administrator/) et connectez-vous. - Allez dans le menu de gestion des extensions iii

4 - Sélectionnez, en passant par «archive à transférer» le composant téléchargé précédemment et cliquez sur «Envoyer et installer» - Vous devriez maintenant voir apparaitre «Composant : installation effectuée avec succès» iv

5 Paramétrage : - Maintenant que le composant est installé, il vous faut le paramétrer, pour cela, allez dans le menu composant et sélectionnez «geoportal-api» - Vous arrivez sur la page de configuration du composant, plusieurs onglets sont disponibles : maps, overlays, portrayals et portrayalsoverlays Pour commencer, dans l onglet maps, sélectionnez «nouveau» - Une fois sur la page d édition, renseignez le champ «clef API» sans lequel le composant ne pourra pas fonctionner. Pour le reste des champs, les paramètres par défaut sont valides et souvent suffisants. Ne les modifiez que si vous savez ce que vous faites. Une fois les modifications effectuées, cliquez sur «enregistrer & fermer». Publiez votre nouvelle entrée (en cliquant sur le disque rouge de façon à ce qu il devienne vert.) v

6 Puis passez à l onglet overlays. - Dans cet onglet, vous pouvez gérer les couches de votre carte. Créez une nouvelle couche et vous arrivez sur cette page : Vous pouvez dès maintenant renseigner les paramètres nom et url (l url peut être relative à la page où sera affichée la carte, ou bien être absolue, par exemple : « Le paramètre suivant influence les champs à remplir. Si vous ne savez pas quoi entrer ici, sélectionnez simplement l extension du fichier dont vous indiquez le lien dans le champ URL (dans notre exemple, sélectionnez KML). Le champ propriétaire correspond au fournisseur de la couche, remplir ce champ affichera le logo du propriétaire en bas de la carte (sachez que si vous utilisez une couche ne vous appartenant pas, vous DEVEZ remplir ce champ, rien ne vérifiera cependant que vous l avez rempli) vi

7 Les champs ajoutés lors du changement de type de couche ne sont pas nécessairement à remplir (si vous savez ce que vous faites, les noms des champs sont représentatifs de ce à quoi ils correspondent) Le champ affichage vous permettra de choisir si la couche est affichée par défaut sur la carte ou s il faudra que l utilisateur l active manuellement. A part ces paramètres, les paramètres peuvent rester inchangés pour la sauvegarde (ils seront remplis automatiquement si nécessaire) Enregistrez les paramètres comme précédemment, publiez la couche, et passez à l onglet portrayals. - Dans cet onglet, créez une nouvelle entrée avec le bouton «nouveau». Ici, vous pouvez vous contenter de remplir le champ «map id» correspondant à l identifiant de la carte que vous avez créée au début puis vous pouvez choisir de personnaliser l affichage de la carte ou bien vous pouvez choisir de valider vos paramètres et passer à la suite. Les champs largeur et hauteur correspondent aux dimensions de votre carte lorsqu elle sera affichée sur votre site. Les champs latitude et longitude vous permettront de choisir le centrage de la carte. Le champ instance est en fait le nom de la carte, c est grâce à ce nom que vous pourrez lier vos cartes aux couches. Pour les autres paramètres, je vous conseille grandement de «bidouiller» afin de découvrir les fonctions disponibles. - Sauvegardez, publiez, et passez à l onglet «portyalsoverlays». vii

8 Ici, vous pouvez dire quelle couche est affichée sur quelle carte. Vous pouvez avoir autant de couches par cartes que vous voulez et afficher les couches sur autant de cartes que vous voulez. Les paramètres sont simples : Choisissez la carte sur laquelle vous voulez ajouter une couche. Puis sélectionnez la couche que vous voulez ajouter à la carte. Les noms présents dans les sélecteurs correspondent aux noms que vous avez donnés aux couches et aux portrayals. Une fois le lien créé, enregistrez et publiez l entrée. Vous pouvez, si vous avez plusieurs couches et plusieurs cartes (portrayals) créer autant de liens que vous voulez, c est ici que vous mettez les couches sur les cartes. viii

9 Insertion d une carte dans votre site WEB : - Votre composant est maintenant installé et configuré. Cependant, pour vous permettre de voir la carte sur votre site, il vous faut l insérer dans celui-ci. Pour cela, allez dans la gestion des menus, sélectionnez le menu dans lequel vous voulez faire apparaitre le lien vers la carte. Sélectionnez l arborescence dans laquelle vous voulez mettre la carte et créez un nouveau «lien de menu» Sur la page de création, commencez par saisir le nom de votre lien («titre de menu») ix

10 Ensuite, dans type de lien de menu, sélectionnez «carte Géoportail» Une fois le type de menu sélectionné sur Carte Géoportail, une nouvelle catégorie apparait sur la partie droite de l écran Renseignez dans ce champ l identifiant de la vue (portrayal) que vous voulez. Renseignez les champs que vous voulez puis enregistrez x

11 Vous pouvez maintenant aller voir sur votre site web la carte que vous avez créée en cliquant sur le lien que vous venez de créer. Si la carte ne vous convient pas, vous pouvez modifier les éléments restés inchangés. Rappelez-vous, le meilleur moyen de comprendre quelque chose, c est de tester. xi

12 Plugin Geoportalapi Installation - Comme pour le composant, téléchargez l archive - Connectez-vous à votre page d administration et allez sur la page de gestion des extensions - Installez l archive plg_geoportalapi.zip Paramétrage - Le paramétrage du plugin est bien plus simple que celui du composant : - Allez dans le menu de gestion des plug-ins - Cherchez le plugin API Géoportail xii

13 - Cliquez dessus. Vous êtes maintenant dans le panneau de configuration du plug-in - Dans la partie droite, activez le plugin (statut -> Activé) - Dans la partie droite de votre fenêtre se trouve un formulaire, celui-ci vous permet de renseigner votre clé d utilisation de l API Géoportail mais vous permet aussi de définir des paramètres par défaut tel que la taille de la carte (largeur - hauteur) et son centrage (longitude - latitude) Renseignez le champ clé et modifiez si vous le souhaitez les autres paramètres (le centrage de la carte est fait sur le centre de la France). Utilisation - L utilisation du plugin se fait au travers des articles, vous pourrez donc insérer des cartes dans ceux-ci. xiii

14 - Pour insérer une carte dans un article, il suffit d insérer la double balise suivante à l endroit où vous voulez avoir votre carte Code {geoportalapi}{/geoportalapi} - Bien sûr, dans ce cas-là, ne sera affiché que la carte, et avec les paramètres par défaut. Pour changer les paramètres, vous pouvez rajouter des attributs à la balise. 4 attributs sont disponibles : width, heigth, lon, lat. Voici un exemple d utilisation de ces attributs Ces attributs peuvent être placés dans l ordre ou non Code {geoportalapiwidth='400' height='350' lon='2.5'lat='48'}{/geoportalapi} - Vous pouvez aussi choisir d afficher une ou plusieurs couches sur votre carte. Pour cela, il vous suffit de rajouter une balise entre les balises {geoportalapi} et {/geoportalapi} La balise à ajouter est une balise simple, dont voici un exemple : Code {layer:kml url: [ /} - Dans ce cas, la structure est très simple : une accolade ouvrante, le mot clé «layer» suivi des deux points puis du type de la couche (on aurait pu avoir wms par exemple) - On trouve ensuite, ici, un paramètre d url (l url à laquelle est stockée la couche) suivi directement d une fin de balise «\}» De façon plus générale, les paramètres des couches possibles sont url, name et options chaque paramètre est suivis par deux points ( : ) puis par la valeur de l option entourée par les séparateurs du plugin : [ et ] Le paramètre name donne un nom à la couche, c est ce paramètre qui est affiché dans le menu permettant l affichage des cartes. Le paramètre option n est nécessaire que lorsque le type de la couche est wms, si vous utilisez un autre type de couche, et si vous ne souhaitez pas spécifier des caractéristiques précises, il est conseillé de l omettre. La valeur du paramètre option est de cette forme : xiv

15 Code : options: [ { params:{//wms parameters: layers:'rwbody', format:'image/png', transparent:'true' }, options:{//wms layer's options singletile:true, projection:'epsg:4326', units:'degrees', // maxextent expressed in EPSG:4326 : maxextent: new OpenLayers.Bounds(-180,-90,180,90), minzoomlevel: 5, maxzoomlevel:15, opacity:1, isbaselayer: false, //one could make it not visible with this : //visibility: false, originators:[ { logo:'sandre', pictureurl: 'img/logo_sandre.gif', url: ' } ] } }] Ces options sont reproduites tel quel dans l appel de la carte par l API. Si vous savez utiliser l API Géoportail, le plus simple est de vous référer à vos connaissances. Si vous ne connaissez pas l API, mais que vous utilisez le composant, vous pouvez directement retranscrire les données de votre table overlays (celle du composant) dans ces lignes, sachez seulement qu originators correspond à l entrée propriétaire de la table overlays du composant. Dans le cas où vous ne comprenez pas tout, vous pouvez vous rendre sur le site de l API (api.ign.fr) et examiner les exemples présents dans la section documentation afin de comprendre le fonctionnement et l utilité de chaque paramètre. Voici donc un exemple d article affichant deux cartes distinctes. Il n est malheureusement pas encore possible, avec la dernière version du plugin, d afficher deux couches sur une même carte. xv

16 Code : {geoportalapi}{layer:kmlurl: [ name: [carte top 100] /}{/geoportalapi} {geoportalapi height='400'}{layer:wmsurl: [ options: [ { params:{//wms parameters: layers:'rwbody', format:'image/png', transparent:'true' }, options:{//wms layer's options singletile:true, projection:'epsg:4326', units:'degrees', // maxextent expressed in EPSG:4326 : maxextent: new OpenLayers.Bounds(-180,-90,180,90), minzoomlevel: 5, maxzoomlevel:15, opacity:1, isbaselayer: false, //one could make it not visible with this : //visibility: false, originators:[ { logo:'sandre', pictureurl: 'img/logo_sandre.gif', url: ' } ] } }] name: [rivières] /}{/ /}{/geoportalapi} ATTENTION :Lorsque vous insérez une carte dans votre article, vérifiez bien que les liens ne sont pas transformés en liens cliquable. Sinon, vos couches ne seront pas affichées. Pour retransformer un lien cliquable en texte simple, cliquez droit sur le lien puis «supprimer le lien» xvi

17 FAQ : - Q : Sur la page où devrait se trouver ma carte (du composant), l inscription «Chargement de l API Géoportail échoué» est affichée, pourquoi cela? - A : êtes-vous sûr d avoir bien publié toutes les entrées se référant à la carte que vous affichez? avez-vous bien fait les liens entre portrayal et map, le champ «map id» de l entrée portrayal affiché pointe-t-il bien vers une entrée existante? de même, dans la configuration du lien, avez-vous bien mis l identifiant d une entrée portrayal existante? - Q : Je ne trouve pas mon lien vers la carte - A : peut-être l avez-vous mis dans un sous menu ne s affichant que lorsque vous êtes connecté? - Q : A quoi servent les options du composant qui n ont pas été expliquées? - A : dans l onglet des couches, les options dont le nom contient un «(JS)» permettent d exécuter du code JavaScript lors de l évènement correspondant au nom du champ. Pour le reste, la plupart des options ont un nom transparent quant à leurs effets. Encore une fois, le meilleur moyen de comprendre à quoi ils servent est d expérimenter, de faire des tests. - Q : avec le plug-in, aucune des couches que j ai ajoutées ne s affiche. - A : comme dit plus haut, cela vient surement du fait que dans l éditeur d article, les liens ont été transformés en liens cliquables. xvii