MapFish example

Page Last modified 18 Jul 2023

1 min read

This page was archived on 18 Jul 2023 with reason: Content is outdated

MapFish is an extensive open source library that gives lots of flexibility in using WMS services.

Menu

This sample shows a WMS map in MapFish. MapFish provides several JavaScript libraries but not all of them have been used for this sample.

Libraries used:

OpenLayers: http://openlayers.org/
ExtJS: http://www.extjs.com/

Example

Source code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>MapFish Lab</title>

    <link rel="stylesheet" type="text/css" href="mfbase/ext/resources/css/ext-all.css" />

    <script type="text/javascript" src="mfbase/openlayers/lib/OpenLayers.js"></script>

    <script type="text/javascript" src="mfbase/ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="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 = "mfbase/mapfish/";
    </script>
    <script type="text/javascript" src="mfbase/mapfish/MapFish.js"></script>

    <script type="text/javascript">
        var centered = false;
        
        function createMap()
        {
            var map = new OpenLayers.Map("map");
            return map;
        }

        function addLayersToMap(map)
        {
            var wms = new OpenLayers.Layer.WMS(
                "metacarta",
                "http://labs.metacarta.com/wms/vmap0",
                { layers: "basic" },
                { isBaseLayer: true }
            );
            map.addLayer(wms);

            var eeaWMS = new OpenLayers.Layer.WMS("CLC2000",
			    "http://discomap.eea.europa.eu/ArcGIS/services/Land/CLC2000_Cach_WGS84/MapServer/WMSServer",
			    { layers: '0,1,2,3,4,5,6', format: 'image/png', transparent: 'true' },
			    { isBaseLayer: false, opacity: 0.5 }
			);
            map.addLayer(eeaWMS);
        }

        function centerMap()
        {
            if(!centered)
            {
                this.setCenter(new OpenLayers.LonLat(2, 45), 4);
                centered = true;
            }
        }

        Ext.onReady(function()
        {
            var map = createMap();
            addLayersToMap(map);

            var viewport = new Ext.Viewport({
                layout: "border",
                listeners: {
                    afterlayout: centerMap,
                    scope: map
                },
                items: [{
                        region: "center",
                        id: "map",
                        title: "Map",
                        layout: "fit",
                        split: true,
                        xtype: 'mapcomponent',
                        map: map
                    }]
                });
            viewport.doLayout();
        });
    </script>
  </head>

  <body>
    <div id="map"></div>
  </body>
</html

code created by Bilbomatica