MapFish example

Page Last modified 09 Sep 2010
1 min read
MapFish is an extensive open source library that gives lots of flexibility in using WMS services.
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:


Source code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""><html xmlns="">
    <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
      var gMfLocation = "mfbase/mapfish/";
    <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(
                { layers: "basic" },
                { isBaseLayer: true }

            var eeaWMS = new OpenLayers.Layer.WMS("CLC2000",
			    { layers: '0,1,2,3,4,5,6', format: 'image/png', transparent: 'true' },
			    { isBaseLayer: false, opacity: 0.5 }

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

            var map = createMap();

            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

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

code created by Bilbomatica
Document Actions
\r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n
\r\n \r\n