Fusion MapServer Tutoriel

Introduction

Ce tutoriel décrit comment construire une application de cartographie web utilisant Fusion et MapServer. Il présume que vous êtes familiés avec MapServer et son extension PHP.

Concepts essentiels

Il est important que vous compreniez comment MapServer fonctionne. Si vous ne connaissez pas MapServer ou ne savez pas comment configurer une carte (mapfile) pour celui-ci, référez-vous à la documentation MapServer (​http://mapserver.gis.umn.edu/docs).

Fusion est un outil de développement pour la création d'application web. Il est donc évident que vous devrez avoir une certaine connaissance avec HTML, JavaScript et CSS afin de pouvoir l'utiliser. Principalement, Fusion a été développé avec le langage JavaScript. Cependant, il est possible d'ajouter des fonctionnalités côté serveur utilisant l'extension PHP/MapScript de MapServer (connaissance du langage PHP requise).

Fusion utilise largement le HTML statique ainsi que la génération dynamique de ce même langage (DHTML). Vous devrez donc être familiés avec le modèle DOM (Document Object Model) implanté dans la plupart des navigateurs ainsi que les subtiles différences sur son fonctionnement entre les navigateurs. Il est possible d'utiliser Fusion sans aucun script utilisant le modèle DOM mais la plupart des applications doivent l'utiliser afin d'obtenir les effets et les fonctionnalités désirées.

Fusion utilise également le CSS pour son aspect visuel. Cette technique de conception permet de styliser l'interface utilisateur des composants Fusion en utilisant le navigateur pour générer la page web afin d'alléger le travail du serveur. C'est la façon la plus efficace et naturelle pour la conception de page web et il réduit la taille du code JavaScript qui doit être exécuté sur le navigateur client. Vous devrez donc connaître le CSS afin de pouvoir personnaliser l'interface Fusion. Un style par défaut pour Fusion est fournit et des modifications modérées de celui-ci ne demandent pas de compétences avancées du CSS.

Préalable pour le tutoriel

• Fusion: http://trac.osgeo.org/fusion/wiki/GetIt
• Données MapServer gmap-ms46: ​http://dl.maptools.org/dl/
• ''Icônes''

Installation

L'installation de Fusion est très simple. Évidemment, je présume que vous avez un serveur web fonctionnel avec MapServer. Un fois Fusion et gmap-ms46 téléchargés, l'étape suivante est bien sûr d'extracter les fichiers zip. Dans mon exemple, /opt/fgs/www/htdocs/ est mon répertoire web.

$ unzip fusion-1.0.4.zip -d /opt/fgs/www/htdocs/
$ unzip gmap-ms46.zip -d /opt/fgs/www/htdocs/ 

Fusion est maintenant installé ainsi que notre carte MapServer qui servira d'exemple dans ce tutoriel.

Configuration

C'est le moment de configurer Fusion. Il y a qu'un seul fichier de configuration général pour Fusion: config.json. Dans ce fichier, vous pourrez modifier le langage de script utilisé par Fusion (seul PHP est supporté pour l'instant) ainsi que différents chemins d'accès web qui dépendent de la configuration de votre serveur web. Pour ce tutoriel, je n'ai pas eu à le modifier car les chemins d'accès par défaut étaient bons. Vous devriez cependant vérifier si le chemin d'accès web pour l'application MapServer et fichiers temporaires sont corrects. Si vous laissez la variable "temporaryDirectory" à sa valeur par défaut ("/tmp"), assurez vous que votre configuration php ait le même chemin (php5.ini devrait avoir une ligne semblable: session.save_path = "/tmp")

...
 "mapserver": {
	    /* The URL of the mapserver CGI that you want to use.  */
	    "cgi": "/cgi-bin/mapserv",

Application Fusion

Afin de vous démontrer le fonctionnement de Fusion, nous allons créer une petite application utilisant les données MapServer gmap-ms46. Voici donc les fonctionnalités (widgets) que notre application supportera:

• un widget Map
• un widget Zoom avant
• un widget Zoom arrière
• un widget Navigation
• un widget Legende

Ces widgets doivent être décris dans un fichier xml nommé ApplicationDefinition. Ce fichier à pour utilité de décrire la configuration d'une application Fusion: mapfile, ressource, widgets. Ce fichier contiendra bien sur une section MapFile pour notre MapServer ainsi plusieurs widgets (section Widget) à l'intérieur d'une section WidgetSet (référez-vous à la page ApplicationDefinition pour une description complète).

Créons tout d'abord un répertoire pour notre application. Extracter également les icônes que vous avez téléchargées. Celles-ci seront utilisées par les widgets.

$ mkdir /opt/fgs/www/htdocs/demo
$ unzip icons-demo.zip -d /opt/fgs/www/htdocs/demo 

À l'intérieur de ce répertoire, créer un nouveau fichier ApplicationDefinition.xml et incorporer le contenu suivant:

<?xml version="1.0" encoding="UTF-8"?>
<ApplicationDefinition xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xsi:noNamespaceSchemaLocation="ApplicationDefinition-1.0.0.xsd">
  <MapSet xsi:type="MapSetType">x
    <MapGroup id="mapserver" xsi:type="MapType">    
      
      <Map xsi:type="MapLayerType">
        <Type>MapServer</Type>
        <SingleTile>true</SingleTile>
        <Extension>
          <MapFile>/opt/fgs/www/htdocs/gmap-ms46/htdocs/gmap75.map</MapFile>
        </Extension>
      </Map>
    
    </MapGroup>
  </MapSet>

  <WidgetSet xsi:type="WidgetSetType">
 
     <MapWidget xsi:type="WidgetType">
      <Name>Map</Name>
      <Type>Map</Type>
      <StatusItem>The map.</StatusItem>
      <MapId>mapserver</MapId>
    </MapWidget>

  <Widget xsi:type="UiWidgetType">
      <Name>Pan</Name>
      <Type>Pan</Type>
      <Description>Drag the map to view areas out of range.</Description>
      <ImageUrl>icons/pan.png</ImageUrl>
      <ImageClass/>
      <Tooltip>Pan mode</Tooltip>
      <Label/>
      <Disabled/>
  </Widget>
  
  <Widget xsi:type="UiWidgetType">
    <Name>ZoomIn</Name>
    <Type>Zoom</Type>
    <Description>Zoom</Description>
    <ImageUrl>icons/zoom-in.png</ImageUrl>
    <ImageClass/>
    <Tooltip>ZoomIn Mode</Tooltip>
    <Label/>
    <Disabled/>
    <Extension xsi:type="CustomContentType">
        <Tolerance>5</Tolerance>
        <Factor>2</Factor>
	</Extension>
  </Widget>

 <Widget xsi:type="UiWidgetType">
    <Name>ZoomOut</Name>
    <Type>Zoom</Type>
    <Description>Zoom</Description>
    <ImageUrl>icons/zoom-out.png</ImageUrl>
    <ImageClass/>
    <Tooltip>ZoomOut Mode</Tooltip>
    <Label/>
    <Disabled/>
    <Extension xsi:type="CustomContentType">
        <Tolerance>5</Tolerance>
        <Factor>2</Factor>
        <Direction>out</Direction>
      </Extension>
  </Widget>
 
  <Widget xsi:type="WidgetType">
    <Name>Legend</Name>
    <Type>Legend</Type>
    <StatusItem/>
  </Widget>
  
  </WidgetSet> 
  <Extension/>
</ApplicationDefinition>

Modifier ensuite le chemin d'accès de la mapfile (section MapFile). Si vous analysez un peu ce fichier, vous remarquez qu'il y a une section widget pour chaque fonctionnalité ainsi que ses options. La plupart de ses options ne sont pas obligatoire. Créez maintenant une page HTML nommé index.html qui servira de "template" pour Fusion.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Fusion MapServer Tutorial</title>
    <script type="text/javascript" src="../fusion/lib/fusion.js"></script>
    <style type="text/css">
      @import url(../fusion/jx/css/jxskin-graphic.css);
      #bodyContent { position:relative; background-color:#dfe9f5; border: thin solid #000000; height:411px; width:760px; margin-top:25px;}
      #Map { position:absolute; top:35px; right:5px; width:439px; height:349px; border: thin solid #000000; float: right; visibility: visible; display:block; }
      #Legend { position:absolute; top:35px; left:5px; width:300px; height:349px; background-color:#ffffff; border: thin solid #000000; overflow-y: auto; overflow-x:hidden; }
      #toolbar { position:absolute; left: 310px; }
    </style>
    <script type="text/javascript">
      window.onload = function() {
         Fusion.initialize();
      }
    </script>
  </head>
  <body>
    <center>
      <div id="bodyContent">
        <div id="toolbar">
          <div id="Pan" ></div>
          <div id="ZoomIn"></div>
          <div id="ZoomOut"></div>
        </div>
        <div id="Legend" align="left"></div>
        <div id="Map"></div> 
      </div>
    </center>
  </body>
</html>

Vous devriez maintenant être en mesure de tester votre application via l'adresse web. Dans mon cas: ​http://localhost:8080/demo/index.html