Personal tools

next
previous
items

Skip to content. | Skip to navigation

Sound and independent information
on the environment

MapFish example

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:



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

Geographic coverage

Document Actions

Comments

European Environment Agency (EEA)
Kongens Nytorv 6
1050 Copenhagen K
Denmark
Phone: +45 3336 7100