Comment utiliser les widgets de Mapfish

>> Document officiel “HowTo Use Widgets” non traduit disponible ici

Dans cette page vous trouverez une sorte de tutoriel pour apprendre : à utiliser les widgets client de MapFish, à les intégrer dans un document HTML simple ou plus complexe en utilisant ExtJs pour la mise en page.

Prérequis

Ce tutoriel suppose que vous avez déjà installé MapFish. Si ce n’est pas le cas, allez à la page d’installation et suivez les instructions. Après, vous pourrez lire cet article.

Un document HTML Simple

Commençons tout d’abord par créer un fichier avec un minimum de contenu. Appelons le simple.html

<html>
<head>
  <title>Tutoriel MapFish - Comment utiliser les Widgets</title>
  <link rel="stylesheet" type="text/css" href="/chemin/vers/mfbase/ext/resources/css/ext-all.css" />
 
  <script type="text/javascript" src="/chemin/vers/mfbase/openlayers/lib/OpenLayers.js"></script>
  <script type="text/javascript" src="/chemin/vers/mfbase/ext/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="/chemin/vers/mfbase/ext/ext-all-debug.js"></script>
 
  <script type="text/javascript">
    // A cause d'un bug sous Firefox 2 vous devez spécifiez le chemin de la racine MapFish.
    // regardez sur https://bugzilla.mozilla.org/show_bug.cgi?id=351282
    var gMfLocation = "/chemin/vers/mfbase/";
  </script>
  <script type="text/javascript" src="/chemin/vers/mfbase/mapfish/MapFish.js"></script>
 
  <script type="text/javascript">
    Ext.onReady(function() {alert ('prêt à continuer');});
  </script>
</head>
<body>
  <span></span>
  <div id="myDiv"></div>
  <div id="olmap" style="width: 450px; height: 300px; background-color: #999;"></div>
 </body>
</html>

Les deux premières lignes décrivent le style du document.
À la suite des balises html et head viennent les styles Ext, l’API javascript OpenLayers , l’adaptateur Ext et ExtJS lui-même. Puis MapFish.js est chargé. Cela charge automatiquement les widgets de MapFish et les dossiers javascript fondamentaux. Notez que code>ext-all-debug.js peut être remplacé par ext-all.js afin accélérer le chargement. Notez aussi que dans un environnement de production, l'administrateur de l'application préfèrera utiliser le script MapFish afin de d'obtenir un fichier unique et léger contenant l'intégralité du code javascript.

Note : Pensez à remplacer /chemin/vers/mfbase/ par la valeur appropriée à votre installation.

Nous sommes maintenant prêt pour installer un gestionnaire d'évènement qui initialise (exécute), notre application après le chargement intégral du document.

Cette ligne

18	Ext.onReady(function() {alert ('prêt à continuer');});

Dit que : Lorsque le document est entièrement chargé, la fonction passée en argument sera appelée. C'est la norme de fonctionnement Ext voir ExtJs .

Nous mettrons le code de notre application ici.

Dans la balise body de notre document, nous avons déjà mis deux éléments div dont un, avec l'id « olmap », qui contiendra la carte .

Pour ceux qui n'ont pas encore chargé la page de test, chargez la avec un navigateur et vous devrait voir une boîte grise avec un message d'alerte en disant "prêt à continuer".

Ajout d'une carte

La prochaine étape consiste à ajouter dans la page une simple carte OpenLayers . Vous le ferez dans la
section Ext.onReady afin de vous assurer que le document soit entièrement chargée.

    Ext.onReady(function() {
        var map = new OpenLayers.Map($('olmap'));
 
        var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", 
            "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}, {buffer: 0});
 
        map.addLayers([wms]);
        map.addControl(new OpenLayers.Control.LayerSwitcher());
        map.zoomToMaxExtent();
    });

Il s'agit d'un usage typique de OpenLayers. Vous pouvez vous référer à la documentation pour obtenir de plus amples renseignements sur la manière d'utiliser et de manipuler les objets, les méthodes et les événements de OpenLayers. Vous trouverez également de nombreuses façons de les utiliser avec MapFish.

Maintenant, actualiser la page de votre navigateur, vous devriez voir une carte du monde avec les outils de navigation dans la précédente boîte grise.

Ajout d'un widget

Maintenant que nous avons une carte dans notre page, nous voulons ajouter un widget. Nous vous proposons d'intégrer le widget de "raccourcis" dans la page. Ce widget doit permettre à l'utilisateur de choisir un lieu dans une liste choix afin d'obtenir vue de la carte correspondant à l'emplacement choisi.

Pour cela vous devrez ajouter le code suivant à la fin de la fonction onReady callback , juste après la déclaration zoomToMaxExtent.

        var store = new Ext.data.SimpleStore({
             fields: ['value', 'text', 'bbox'],
             data : [['OC', 'Oceana', new OpenLayers.Bounds(56.0234375, -72.53125, 214.2265625, 32.9375)],
                     ['NA', 'North America', new OpenLayers.Bounds(-186.37890625, -2.21875, -28.17578125, 103.25)],
                     ['SA', 'South America', new OpenLayers.Bounds(-146.828125, -71.828125, 11.375, 33.640625)],
                     ['AF', 'Africa', new OpenLayers.Bounds(-58.9375, -51.7890625, 99.265625, 53.6796875)],
                     ['EU', 'Europe', new OpenLayers.Bounds(-23.078125, 26.2578125, 56.0234375, 78.9921875)],
                     ['AS', 'Asia', new OpenLayers.Bounds(15.59375, -21.90625, 173.796875, 83.5625)]]
         });
 
         var shortcuts = new mapfish.widgets.Shortcuts({
             map: map,
             el: 'myDiv',
             store: store,
             templates: {
                 header: new Ext.Template("Choisissez un lieu dans la liste"),
                 footer: new Ext.Template("La carte sera centrée automatiquement à cet emplacement")
             }
         });
         shortcuts.render();

Dans ce code, il faut d'abord créer un nouveau conteneur qui va être utilisés par la liste de choix Ext. Ce conteneur doit être assimilé à un tableau relationnel entre le nom des lieux (ici les continents) et leurs étendues géographiques correspondantes (données à titre de limite d'emprise à OpenLayers).
Ensuite, nous créons un nouveau widget de Raccourcis MapFish. Enfin, nous lui donnons quelques options de configuration de manière à ce que :

il s'appuie sur l'objet OpenLayers map précédemment créé,
Il soit bien restitué dans l'élément DOM avec l' id « myDiv »,
il utilise le conteneur store préalablement créé,
certaines explications supplémentaires sont données à l'utilisateur au dessus et en dessous de la liste de choix.

Pour finir nous appelons l'objet avec la méthode render.

Maintenant, vous rafraîchissez la page. Un nouvel élément devrait s'afficher avec la liste des continents offrant la possibilité de zoomer dessus.

Mise en page complexe

Voici quelques notions élémentaires pour intégrer ces widgets dans une mise en page plus travaillée.

Nous commençons par positionner une fenêtre.

Je voudrais tout d'abord vous proposer de copier le fichier simple.html et d'en créer un nouveau nommé window.html.

Pour commencer, vous devrez ajouter le code suivant dans la balise script :

        var mapcomponent = new mapfish.widgets.MapComponent({map: map});
 
        var window = new Ext.Window({
            title: 'Map',
            width: 500,
            height: 300,
            minWidth: 300,
            minHeight: 200,
            layout: 'fit',
            plain: true,
            bodyStyle: 'padding: 5px;',
            items: mapcomponent
        });
        window.show();

Trois choses à remarquer dans ce code.

Nous avons créé un nouveau widget MapComponent. Ce widget est obligatoire si vous souhaitez utiliser le système de mise en page Ext avec des blocs redimensionnable. En effet, le widget MapComponent est capable de traiter correctement les événements de redimensionnement. MapComponent doit au moins avoir une option de la propriété "map" qui est la valeur de carte type OpenLayers.
La deuxième partie porte sur un objet window. Il s'agit là d'un des nombreux types d'éléments pouvant être utilisés pour construire une mise en page pour une application travaillée. De nombreuses options peuvent être données à cet objet, mais la plus importante est 'items' (élément). Référez vous à la documentation ext pour obtenir plus d'informations.
Ensuite nous appelons la méthode show de l'objet window.

Si vous actualisez la page dans votre navigateur, vous devriez maintenant voir la carte dans une fenêtre redimensionnable et déplaçables.
Astuce :Il existe de nombreuses autres façons de travailler avec des mises en page complexes. Vous trouverez d'autres exemples dans MapFishSample.

Vous pouvez également disposer de vos raccourcis dans une fenêtre. Pour ce faire, vous devrez supprimer certaines lignes dans le code existant.
Supprimez l'élément "el" dans le constructeur de raccourcis "Shortcuts" (ligne 36),
Retirez shortcuts.render () (ligne 43). Ainsi, les gabarits des raccourcis et la liste de choix seront figés dans une fenêtre.

Puis ajoutez le code suivant:

        var window = new Ext.Window({
            title: 'Shortcuts',
            width: 200,
            height: 100,
            minWidth: 200,
            minHeight: 100,
            layout: 'fit',
            plain: true,
            bodyStyle: 'padding: 5px;',
            items: shortcuts
        });
        window.setPagePosition(20, 40);
 
        window.show();

Observez le résultat dans votre navigateur.

Pièces jointes :
Simple.html (2,2 kB) - “l'exemple simple.html ,” ajouté par pgiraud le 11/05/07 13:51:55.
Window.html (2,9 kB) - “l'exemple window.html,” ajouté par pgiraud le 11/05/07 13:52:51.

Comment utiliser les widgets de Mapfish

Prérequis

Un document HTML Simple

Ajout d'une carte

Ajout d'un widget

Mise en page complexe

À propos de gglafouine

Laisser un commentaire Annuler la réponse.

Archives

Méta