Simple HTML Document

This document serves as a basis for every howto. For details, see the widgets tutorial page on which it is based.

Tip : You may have to replace "/path/to/mfbase/" to the appropriate value depending on your installation.

(Have a look at the nightly built example and tests page -- and move this information in the future howto list) 

<html>
<head>
  <title>MapFish Tutorial - How To Use Widgets</title>
  <link rel="stylesheet" type="text/css" href="/path/to/mfbase/ext/resources/css/ext-all.css" />
   
  <script type="text/javascript" src="/path/to/mfbase/openlayers/lib/OpenLayers.js"></script>
  <script type="text/javascript" src="/path/to/mfbase/ext/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="/path/to/mfbase/ext/ext-all-debug.js"></script>

  <script type="text/javascript">
    // Because of a bug in Firefox 2 we need to specify the MapFish base path.
    // See https://bugzilla.mozilla.org/show_bug.cgi?id=351282
    var gMfLocation = "/path/to/mfbase/";
  </script>
  <script type="text/javascript" src="/path/to/mfbase/mapfish/MapFish.js"></script>
  
  <script type="text/javascript">
    Ext.onReady(function() {
        var map = new OpenLayers.Map($('olmap'));

        var olwms_layer = new OpenLayers.Layer.WMS(
            "OpenLayers WMS", 
            "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}, {buffer: 0});

        var layer = new OpenLayers.Layer.WMS(
            "OpenAerialMap", [
                "http://oam1.hypercube.telascience.org/tiles/",
                "http://oam2.hypercube.telascience.org/tiles/",
                "http://oam3.hypercube.telascience.org/tiles/"
            ],
            {layers: 'openaerialmap'},
            {'wrapDateLine': true, buffer: 1}
        );

        var layer = new OpenLayers.Layer.WMS(
            "OpenStreetMap", [
                "http://osm1.hypercube.telascience.org/tiles/",
                "http://osm2.hypercube.telascience.org/tiles/",
                "http://osm3.hypercube.telascience.org/tiles/"
            ],
            {layers: 'osm-4326-hybrid'},
            {isBaseLayer: false, visibility: false, buffer:1}
    );

        map.addLayers([ol_wms_layer, aom_wms_layer]);
        map.addControl(new OpenLayers.Control.LayerSwitcher());
        map.zoomToMaxExtent();
    });
  </script>
</head>
<body>
  <span></span>
  <div id="myDiv"></div>
  <div id="olmap" style="width: 450px; height: 300px; background-color: #999;"></div>
 </body>
</html>