Tutorial: Application development with MapFish Framework 1.2¶

/*
* @include MAPFISHAPP_map.js
* @include MAPFISHAPP_layout.js
*/

Ext.namespace("MAPFISHAPP");

(function() {
   // run MAPFISHAPP.layout.init() when the page
   // is ready
   Ext.onReady(function() {
       var layerStore = MAPFISHAPP.map.create();
       MAPFISHAPP.layout.init(layerStore);
   });
})();

/*
* @include MAPFISHAPP_mappanel.js
*/

Ext.namespace("MAPFISHAPP");

MAPFISHAPP.layout = (function() {
   /*
    * Private
    */

   /*
    * Public
    */
   return {

       /**
        * APIMethod: init
        * Initialize the page layout.
        *
        * Parameters:
        * layerStore - {GeoExt.data.LayerStore} The application's global layer
        *  store, includes a reference to the map instance.
        */
       init: function(layerStore) {
           new Ext.Viewport({
               layout: "border",
               items: [{
                   region: "west",
                   title: "west",
                   width: 200
               }, Ext.apply({
                   region: "center",
                   title: "map"
               }, MAPFISHAPP.mappanel.create(layerStore))
               ]
           });
       }
   };
})();

/*
* @include OpenLayers/Map.js
* @include OpenLayers/Layer/WMS.js
* @include OpenLayers/Control/Navigation.js
*/

Ext.namespace("MAPFISHAPP");

MAPFISHAPP.map = (function() {

   /*
    * Private
    */

   /**
    * Constant: MAPFILE
    * Filesystem path to mapfile.
    */
   var MAPFILE = "/home/elemoine/work/formation_cantons/mapserver/mapfile.map";

   /**
    * Method: getDerivedMapNS
    * Returns the namespace of the derived application's map module, returns
    * undefined if there's no derived application or if the derived
    * application has no map module.
    */
   var getDerivedMapNS = function() {
       var retVal;
       var ns = window.MAPFISHAPPDERIVED;
       if(ns && ns.map) {
           retVal = ns.map;
       }
       return retVal;
   };

   /**
    * Method: createBaseLayers
    * Return the application's base layers.
    *
    * Returns:
    * {Array({OpenLayers.Layer})} Array of base layers.
    */
   var createBaseLayers = function() {
       return [
           new OpenLayers.Layer.WMS(
               "bluemarble",
               "http://localhost/cgi-bin/mapserv?",
               {
                   map: MAPFILE,
                   layers: "bluemarble"
               }
           )
      ];
   };

   /**
    * Method: createLayers
    * Return the application's layers.
    *
    * Returns:
    * {Array({OpenLayers.Layer})} Array of layers.
    */
   var createLayers = function() {
       var layers = createBaseLayers();
       var derivedMap = getDerivedMapNS();
       if(derivedMap) {
           layers = layers.concat(
               derivedMap.createLayers()
           );
       }
       return layers;
   };

   /**
    * Method: createMap
    * Return the application's map instance.
    *
    * Parameters:
    * div - {String} The id of the div the created map must
    * be placed into, if undefined a non-rendered map is
    * returned.
    *
    * Returns:
    * {OpenLayers.Map} The map instance.
    */
   var createMap = function(div) {
       var map = new OpenLayers.Map({
           div: div,
           controls: [
               new OpenLayers.Control.Navigation()
           ]
       });

       // a map searcher is added to the map
       var searcher = new mapfish.Searcher.Map({
           map: map,
           protocol: mapfish.Protocol.MapFish.create({
               url: "countries",
               params: {
                   no_geom: true,
                   attrs: ["continent", "pays"],
                   limit: 10
               }
           }),
           searchTolerance: null,
           displayDefaultPopup: true
       });
       map.addControl(searcher);
       searcher.activate();

       return map;
   };

   /**
    * Method: createLayerStore
    * Return the application's global layer store.
    *
    * Returns:
    * {GeoExt.data.LayerStore} The global layer store.
    */
   var createLayerStore = function() {
       return new GeoExt.data.LayerStore({
           map: createMap(),
           layers: createLayers()
       });
   };

   /*
    * Public
    */

   return {

       /**
        * APIMethod: create
        * Create the application's global layer store.
        *
        * Returns:
        * {GeoExt.data.LayerStore} The application's global layer store.
        */
       create: function() {
           return createLayerStore();
       },

       /**
        * APIMethod: _createMap
        * Method used from within the API module to create a map.
        *
        * Parameters:
        * div - {String} The id of the div the created map must
        * be placed into, if undefined a non-rendered map is
        * returned.
        *
        * Returns:
        * {OpenLayers.Map} The map instance.
        */
       _createMap: function(div) {
           return createMap(div);
       },

       /**
        * APIMethod: _createLayers
        * Method used from within the API module to create the layers.
        *
        * Returns:
        * {Array({OpenLayers.Layer})} Array of layers.
        */
       _createLayers: function() {
           return createLayers();
       }
   };
})();

/*
* @include GeoExt/widgets/MapPanel.js
*/

Ext.namespace("MAPFISHAPP");

MAPFISHAPP.mappanel = (function() {
   /*
    * Private
    */

   /*
    * Public
    */
   return {

       /**
        * APIMethod: create
        * Return the map panel config.
        *
        * Parameters:
        * layerStore - {GeoExt.data.LayerStore} The application layer store.
        */
       create: function(layerStore) {
           var map = layerStore.map;
           return {
               xtype: "gx_mappanel",
               id: "mappanel",
               map: map,
               layers: layerStore
               //tbar: new Ext.Toolbar(MAPFISHAPP.controltoolbar.create(map))
           };
       }
   };
})();

/*
* @include MAPFISHAPP_map.js
*/

Ext.namespace("MAPFISHAPP");

/**
* APIMethod: constructor
* The API constructor.
*/
MAPFISHAPP.api = function() {
};

MAPFISHAPP.api.prototype = {
   /**
    * APIMethod: createMap
    * Create a map and include it in a given div.
    *
    * Parameters:
    * config - {Object} Config object, include a property
    * named "div" whose value is the id of the div into
    * which the map is to be rendered.
    */
   createMap: function(config) {
       // create map
       var map = MAPFISHAPP.map._createMap(config.div);

       // add layers
       layers = MAPFISHAPP.map._createLayers();
       map.addLayers(layers);

       // zoom to the maximum extent
       map.zoomToMaxExtent();
   }
};

Ext.namespace("MAPFISHAPPDERIVED");

MAPFISHAPPDERIVED.map = (function() {

   /**
    * Constant: MAPFILE
    * Filesystem path to mapfile.
    */
   var MAPFILE = "/home/cmoullet/mapfish_framework/mapserver/mapfile.map";

   return {
       /**
        * Method: createLayers
        * Return the derived application's layers.
        *
        * Returns:
        * {Array({OpenLayers.Layer})} Array of layers.
        */
       createLayers: function() {
           return [
               new OpenLayers.Layer.WMS(
                   "countries",
                   "http://localhost/cgi-bin/mapserv?",
                   {
                       map: MAPFILE,
                       layers: "countries",
                       transparent: true
                   },
                           {
                       singleTile: true
                   }
               )
           ];
       }
   };
})();