Personal tools

Notifications
Get notifications on new reports and products. Frequency: 3-4 emails / month.
Subscriptions
Sign up to receive our reports (print and/or electronic) and quarterly e-newsletter.
Follow us
Twitter icon Twitter
Facebook icon Facebook
YouTube icon YouTube channel
RSS logo RSS Feeds
More

Write to us Write to us

For the public:


For media and journalists:

Contact EEA staff
Contact the web team
FAQ

Call us Call us

Reception:

Phone: (+45) 33 36 71 00
Fax: (+45) 33 36 71 99


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

Geographical coverage

[+] Show Map

Document Actions

Comments

Sign up now!
Get notifications on new reports and products. Currently we have 33187 subscribers. Frequency: 3-4 emails / month.
Notifications archive
Follow us
 
 
 
 
 
European Environment Agency (EEA)
Kongens Nytorv 6
1050 Copenhagen K
Denmark
Phone: +45 3336 7100