Le visualisateur Flash du GeoGarage

Facilement intégrable

Le visualisateur a été conçu pour pouvoir s'intégrer facilement à votre contenu web :

  • thème visuel basé sur des blancs, pour éviter de mauvaises combinaisons de couleurs
  • la plupart des textes sont adaptables, vous pouvez y mettre le contenu de votre choix (voir illustration)
Contenu personnalisable
éléments adaptables

Dans la plus grande souplesse

Vous pouvez ajouter un certain nombre de calques, la limite étant plus ergonomique que technique : un grand nombre de calques alourdit grandement l'interface utilisateur. Pour s'adapter aux besoins, plusieurs possibilités se distinguent pour l'affichage des calques :

  • le calque simple, pour manipuler chaque image indépendamment des autres
  • un regroupement d'images dans un même calque, pour manipuler plusieurs images comme si elles étaient une seule et même image
  • une association de plusieurs sources d'images au même calque. Le basculement s'opère en cliquant sur le nom.

Facile à ajouter dans une page web

Pour ajouter le visualisateur, il suffit de :

  • copier les fichiers contenant les textes (et traductions si besoin) et le fichier descripteur de calques
  • ajouter les lignes de code suivantes dans votre fichier html :

<html>
<head>
<!-- Heading content -->
...
<script type="text/javascript" src="http://www.geogarage.com/geogarage.js"></script>
...
</head>
<body>
...
<div id="plug"></div>
<script type="text/javascript">
// <![CDATA[
var so = new geogarage.Viewer("geogarageviewer", "layerdesc.xml", 800, 600, "#ffffff");
so.write("plug");
// ]]>
</script>
...
</body>
</html>

Explications, pour en savoir plus :

  • <script type="text/javascript" src="http://www.geogarage.com/geogarage.js"></script>

    charge le fichier javascript qui facilite l'ajout du visualisateur (avec vérification de la présence du plugin Flash).

  • <div id="plug"></div>
    Cet élément sera remplacé par le plugin, il faut le positionner là où apparaîtra le visualisateur du GeoGarage. L'identifiant (id=) "plug" est important : il sera utilisé au chargement.
  • <script type="text/javascript">
    // <![CDATA[
    var so = new geogarage.Viewer("geogarageviewer", "layerdesc.xml", 800, 600, "#ffffff");
    so.write("plug");
    // ]]>
    </script>

    Ce code javascript charge le visualisateur : tout en simplifiant l'ajout d'un objet flash dans la page, il vérifie la présence du plugin flash.

    Le constructeur geogarage.Viewer() prend en paramètres :

    • un identifiant, utile si l'on veut manipuler l'objet flash en Javascript après le chargement (ici "geogarageviewer").
    • un nom de fichier, qui décrit les calques a afficher (ici "layerdesc.xml").
    • une largeur (peut être un pourcentage ou en pixels - ici 800 pixels).
    • une hauteur (peut être un pourcentage ou en pixels - ici 600 pixels).
    • et enfin une couleur d'arrière plan, pour adapter la couleur du visualisateur à votre site web (ici "#ffffff", soit du blanc).

    Lorsque so.write("plug"); est appliquée, l'élément de la page ayant pour identifiant "plug" est remplacé (voir point précédent).