The viewer

Easy integration

The viewer has been designed to be quickly iimplemented in your web page :

  • visual thema based on white color, to avoid bad color combination with original site
  • most of the text can be customized : you have the possibility to add contents of your choice (see illustration)
Customizable content
customizable content

Flexibility

You can add several layers (limit is more ergonomic than technical) : a large number of layers makes the user interface heavy. To match needs, layers can be displayed in several ways :

  • the simple layer, to control each image independently
  • a group layer, to control several images as if they were a single one
  • a combination of several image sources in the same layer. You can switch between sources afterwards, clicking on the layer name.

Easy to add in a web page

To add the viewer you need to :

  • copy the files containing the texts (and translations if needed), the file describing the layers and a link to the Javascript file 'geogarage.js'
  • add the following lines of code in your html file :

<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>

Explanations, to go further :

  • <script type="text/javascript" src="http://www.geogarage.com/geogarage.js"></script>
    loads the Javascript file which makes the viewer integration easier (with Flash plugin availability check)
  • <div id="plug"></div>
    This HTML element will be replaced by the plugin, put it where the GeoGarage viewer must be displayed. The identifier (id=) "plug" is important : it will be used at load time.
  • <script type="text/javascript">
    // <![CDATA[
    var so = new geogarage.Viewer("geogarageviewer", "layerdesc.xml", 800, 600, "#ffffff");
    so.write("plug");
    // ]]>
    </script>

    This Javascript code loads the viewer : while simplifying the integration of the flash object, it checks the plugin flash availability. The constructor geogarage.Viewer() takes as parameters :

    • an identifier, usefull to handle the flash object after loading (here : "geogarageviewer").
    • a file name, which describes the layers to be displayed.
    • a width (can be a percentage or in pixels - here : 800 pixels).
    • a height (can be a percentage or in pixels - here : 600 pixels).
    • finally, a background color, to match viewer color to your website (here : "#ffffff" - white).

    When so.write("plug"); is executed, the page element with the id "plug" is replaced (see beyond).