Ticket #497: Add_gx_mappanel_in_examples,_format_code.patch

File Add_gx_mappanel_in_examples,_format_code.patch, 152.9 kB (added by cmoullet, 3 years ago)

Use gx_mappanel, add title and format code

  • MapFish/client/examples/print/basic.html

     
    11<!DOCTYPE html> 
    22<html> 
    33<head> 
    4 <title>Map printing with a simple form</title> 
    5 <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    6 <link rel="stylesheet" type="text/css" 
    7       href="../../mfbase/ext/resources/css/ext-all.css"/> 
    8 <link rel="stylesheet" type="text/css" 
    9       href="../../mfbase/mapfish/mapfish.css"/> 
     4    <title>Map printing with a simple form</title> 
     5    <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     6    <link rel="stylesheet" type="text/css" 
     7          href="../../mfbase/ext/resources/css/ext-all.css"/> 
     8    <link rel="stylesheet" type="text/css" 
     9          href="../../mfbase/mapfish/mapfish.css"/> 
    1010 
    11 <script type="text/javascript" 
    12         src="../../mfbase/openlayers/lib/OpenLayers.js"></script> 
     11    <script type="text/javascript" 
     12            src="../../mfbase/openlayers/lib/OpenLayers.js"></script> 
    1313 
    14 <script type="text/javascript" 
    15         src="../../mfbase/ext/adapter/ext/ext-base.js"></script> 
    16 <script type="text/javascript" src="../../mfbase/ext/ext-all-debug.js"></script> 
     14    <script type="text/javascript" 
     15            src="../../mfbase/ext/adapter/ext/ext-base.js"></script> 
     16    <script type="text/javascript" src="../../mfbase/ext/ext-all-debug.js"></script> 
    1717 
    18 <script type="text/javascript"> 
    19   // Because of a bug in Firefox 2 we need to specify the MapFish base path. 
    20   // See https://bugzilla.mozilla.org/show_bug.cgi?id=351282 
    21   var gMfLocation = "../../mfbase/mapfish/"; 
    22 </script> 
    23 <script type="text/javascript" src="../../mfbase/mapfish/MapFish.js"></script> 
    24 <script type="text/javascript" src="../examples.js"></script> 
     18    <script type="text/javascript" src="../../mfbase/geoext/lib/GeoExt.js"></script> 
     19 
     20    <script type="text/javascript"> 
     21        // Because of a bug in Firefox 2 we need to specify the MapFish base path. 
     22        // See https://bugzilla.mozilla.org/show_bug.cgi?id=351282 
     23        var gMfLocation = "../../mfbase/mapfish/"; 
     24    </script> 
     25    <script type="text/javascript" src="../../mfbase/mapfish/MapFish.js"></script> 
     26    <script type="text/javascript" src="../examples.js"></script> 
    2527 
    26 <style type="text/css"> 
    27   html, body { 
    28     font: normal 12px verdana; 
    29     margin: 0; 
    30     padding: 0; 
    31     border: 0 none; 
    32     overflow: hidden; 
    33     height: 100%; 
    34   } 
    35 </style> 
    36 <script type="text/javascript"> 
    37   // reference local blank image 
    38   Ext.BLANK_IMAGE_URL = '../../mfbase/ext/resources/images/default/s.gif'; 
    39   Ext.onReady(function() { 
     28    <style type="text/css"> 
     29        html, body { 
     30            font: normal 12px verdana; 
     31            margin: 0; 
     32            padding: 0; 
     33            border: 0 none; 
     34            overflow: hidden; 
     35            height: 100%; 
     36        } 
     37    </style> 
     38    <script type="text/javascript"> 
     39        // reference local blank image 
     40        Ext.BLANK_IMAGE_URL = '../../mfbase/ext/resources/images/default/s.gif'; 
     41        Ext.onReady(function() { 
    4042 
    41     var map = new OpenLayers.Map(); 
     43            var map = new OpenLayers.Map(); 
    4244 
    43     var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", 
    44             "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}, {buffer: 0}); 
    45     map.addLayers([wms]); 
     45            var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", 
     46                    "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}, {buffer: 0}); 
     47            map.addLayers([wms]); 
    4648 
    47     var layerOverrides={ 
    48         "OpenLayers WMS": {overview: true} 
    49     }; 
     49            var layerOverrides = { 
     50                "OpenLayers WMS": {overview: true} 
     51            }; 
    5052 
    51     var printConfigUrl = mapfish.SERVER_BASE_URL + 'print/info.json'; 
     53            var printConfigUrl = mapfish.SERVER_BASE_URL + 'print/info.json'; 
    5254 
    53     var toolbar = new mapfish.widgets.toolbar.Toolbar({ 
    54         map: map, 
    55         configurable: false, 
    56         items: [new mapfish.widgets.print.PrintAction({ 
    57             map: map, 
    58             configUrl: printConfigUrl, 
    59             overrides: layerOverrides 
    60         })] 
    61     }); 
     55            var toolbar = new mapfish.widgets.toolbar.Toolbar({ 
     56                map: map, 
     57                configurable: false, 
     58                items: [new mapfish.widgets.print.PrintAction({ 
     59                    map: map, 
     60                    configUrl: printConfigUrl, 
     61                    overrides: layerOverrides 
     62                })] 
     63            }); 
    6264 
    63     var viewport = new Ext.Viewport({ 
    64       layout:'border', 
    65       items:[ 
    66         new Ext.BoxComponent({ // raw 
    67           region: 'north', 
    68           el: 'north', 
    69           height: 32 
    70         }), 
    71         { 
    72           region: 'west', 
    73           id: 'west-panel', 
    74           title: 'West', 
    75           split: true, 
    76           width: 280, 
    77           minSize: 175, 
    78           maxSize: 400, 
    79           collapsible: true, 
    80           margins: '0 0 0 5', 
    81           layout: 'accordion', 
    82           defaults: { 
    83             collapsed: true 
    84           }, 
    85           layoutConfig:{ 
    86             animate: true, 
    87             activeOnTop: false 
    88           }, 
    89           items: [ 
    90             { 
    91               xtype: 'print-simple', 
    92               title: 'Print single page', 
    93               bodyStyle: 'padding: 7px;', 
    94               collapsed: false, 
    95               formConfig: { 
    96                 labelWidth: 65, 
    97                 defaults: { 
    98                   width: 140, 
    99                   listWidth: 140 
    100                 }, 
    101                 items: [ 
    102                   { 
    103                     xtype: 'textfield', 
    104                     fieldLabel: OpenLayers.Lang.translate('mf.print.mapTitle'), 
    105                     name: 'mapTitle', 
    106                     value: 'Map title' 
    107                   }, 
    108                   { 
    109                     xtype: 'textarea', 
    110                     fieldLabel: OpenLayers.Lang.translate('mf.print.comment'), 
    111                     name: 'comment', 
    112                     height: 100, 
    113                     value: 'Some comments' 
    114                   } 
    115                 ] 
    116               }, 
    117               border: false, 
    118               map: map, 
    119               configUrl: printConfigUrl, 
    120               overrides: layerOverrides 
    121             } 
    122           ] 
    123         },{ 
    124             region: 'center', 
    125             title: 'Map', 
    126             layout: 'fit', 
    127             xtype: 'mapcomponent', 
    128             map: map, 
    129             tbar: toolbar 
    130         }] 
    131     }); 
     65            var viewport = new Ext.Viewport({ 
     66                layout:'border', 
     67                items:[ 
     68                    new Ext.BoxComponent({ // raw 
     69                        region: 'north', 
     70                        el: 'north', 
     71                        height: 32, 
     72                        margins: {left: 5,top: 5} 
     73                    }), 
     74                    { 
     75                        region: 'west', 
     76                        id: 'west-panel', 
     77                        title: 'West', 
     78                        split: true, 
     79                        width: 280, 
     80                        minSize: 175, 
     81                        maxSize: 400, 
     82                        collapsible: true, 
     83                        margins: '0 0 0 5', 
     84                        layout: 'accordion', 
     85                        defaults: { 
     86                            collapsed: true 
     87                        }, 
     88                        layoutConfig:{ 
     89                            animate: true, 
     90                            activeOnTop: false 
     91                        }, 
     92                        items: [ 
     93                            { 
     94                                xtype: 'print-simple', 
     95                                title: 'Print single page', 
     96                                bodyStyle: 'padding: 7px;', 
     97                                collapsed: false, 
     98                                formConfig: { 
     99                                    labelWidth: 65, 
     100                                    defaults: { 
     101                                        width: 140, 
     102                                        listWidth: 140 
     103                                    }, 
     104                                    items: [ 
     105                                        { 
     106                                            xtype: 'textfield', 
     107                                            fieldLabel: OpenLayers.Lang.translate('mf.print.mapTitle'), 
     108                                            name: 'mapTitle', 
     109                                            value: 'Map title' 
     110                                        }, 
     111                                        { 
     112                                            xtype: 'textarea', 
     113                                            fieldLabel: OpenLayers.Lang.translate('mf.print.comment'), 
     114                                            name: 'comment', 
     115                                            height: 100, 
     116                                            value: 'Some comments' 
     117                                        } 
     118                                    ] 
     119                                }, 
     120                                border: false, 
     121                                map: map, 
     122                                configUrl: printConfigUrl, 
     123                                overrides: layerOverrides 
     124                            } 
     125                        ] 
     126                    },{ 
     127                        region: 'center', 
     128                        title: 'Map', 
     129                        layout: 'fit', 
     130                        xtype: 'gx_mappanel', 
     131                        map: map, 
     132                        tbar: toolbar 
     133                    }] 
     134            }); 
    132135 
    133     map.setCenter(new OpenLayers.LonLat(8.5, 0), 3); 
    134   }); 
    135 </script> 
     136            map.setCenter(new OpenLayers.LonLat(8.5, 0), 3); 
     137        }); 
     138    </script> 
    136139</head> 
    137140<body> 
    138   <div id="west"></div> 
    139   <div id="north"> 
    140     <p style="font-size:14pt" align="center">MapFish printer</p> 
    141   </div> 
    142   <div id="center"></div> 
     141<div id="west"></div> 
     142<div id="north"> 
     143    <h1 style="font-size:20px;color:#15428B;font-family:tahoma,arial,verdana,sans-serif">MapFish: Printer</h1> 
     144</div> 
     145<div id="center"></div> 
    143146</body> 
    144147</html> 

  • MapFish/client/examples/geostat/choropleths.html

     
    11<!DOCTYPE html> 
    22<html xmlns="http://www.w3.org/1999/xhtml"> 
    3   <head> 
     3<head> 
    44    <title>Choropleths</title> 
    5     <link rel="stylesheet" type="text/css" href="../../mfbase/ext/resources/css/ext-all.css" /> 
     5    <link rel="stylesheet" type="text/css" href="../../mfbase/ext/resources/css/ext-all.css"/> 
    66 
    77    <script type="text/javascript" src="../../mfbase/openlayers/lib/Firebug/firebug.js"></script> 
    88    <script type="text/javascript" src="../../mfbase/openlayers/lib/OpenLayers.js"></script> 
    … …  
    1111    <script type="text/javascript" src="../../mfbase/ext/ext-all-debug.js"></script> 
    1212 
    1313    <script type="text/javascript"> 
    14       // Because of a bug in Firefox 2 we need to specify the MapFish base path. 
    15       // See https://bugzilla.mozilla.org/show_bug.cgi?id=351282 
    16       var gMfLocation = "../../mfbase/mapfish/"; 
     14        // Because of a bug in Firefox 2 we need to specify the MapFish base path. 
     15        // See https://bugzilla.mozilla.org/show_bug.cgi?id=351282 
     16        var gMfLocation = "../../mfbase/mapfish/"; 
    1717    </script> 
    1818    <script type="text/javascript" src="../../mfbase/mapfish/MapFish.js"></script> 
    1919    <script type="text/javascript" src="../examples.js"></script> 
    2020 
    2121    <!-- EXT colorField Extent --> 
    22     <script type="text/javascript" src="../../mfbase/ext-community-extensions/color-field.js" ></script> 
    23     <link rel="stylesheet" type="text/css" href="../../mfbase/ext-community-extensions/color-field.css" /> 
     22    <script type="text/javascript" src="../../mfbase/ext-community-extensions/color-field.js"></script> 
     23    <link rel="stylesheet" type="text/css" href="../../mfbase/ext-community-extensions/color-field.css"/> 
    2424 
    2525    <!-- A Localization Script File comes here --> 
    2626    <script type="text/javascript"> 
    27       function createMap(mapDiv) { 
    28           var map = new OpenLayers.Map('olmap'); 
     27        function createMap(mapDiv) { 
     28            var map = new OpenLayers.Map('olmap'); 
    2929 
    30           var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", 
    31               "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}, {buffer: 0}); 
     30            var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", 
     31                    "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}, {buffer: 0}); 
    3232 
    33           map.addLayers([wms]); 
    34           map.addControl(new OpenLayers.Control.LayerSwitcher()); 
    35           map.setCenter(new OpenLayers.LonLat(17, 2), 2); 
     33            map.addLayers([wms]); 
     34            map.addControl(new OpenLayers.Control.LayerSwitcher()); 
     35            map.setCenter(new OpenLayers.LonLat(17, 2), 2); 
    3636 
    37           return map; 
    38       } 
     37            return map; 
     38        } 
    3939 
    40       // reference local blank image 
    41       Ext.BLANK_IMAGE_URL = '../../mfbase/ext/resources/images/default/s.gif'; 
     40        // reference local blank image 
     41        Ext.BLANK_IMAGE_URL = '../../mfbase/ext/resources/images/default/s.gif'; 
    4242 
    43       Ext.onReady(function() { 
    44         var map = createMap("map"); 
     43        Ext.onReady(function() { 
     44            var map = createMap("map"); 
    4545 
    46         var choropleth = new mapfish.widgets.geostat.Choropleth({ 
    47             'map': map, 
    48             'nameAttribute': 'country', 
    49             'indicators': [['birth_rt', 'Birth Rate'], 
    50                           ['death_rt', 'Death Rate'], 
    51                           ['fertility', 'Fertility']], 
    52             'url': mapfish.SERVER_BASE_URL + "countries", 
    53             'loadMask' : {msg: 'Loading Data...', msgCls: 'x-mask-loading'}, 
    54             'legendDiv' : 'myChoroplethLegendDiv' 
    55         }); 
    56         choropleth.render('myChoroplethDiv'); 
     46            var choropleth = new mapfish.widgets.geostat.Choropleth({ 
     47                'map': map, 
     48                'nameAttribute': 'country', 
     49                'indicators': [ 
     50                    ['birth_rt', 'Birth Rate'], 
     51                    ['death_rt', 'Death Rate'], 
     52                    ['fertility', 'Fertility'] 
     53                ], 
     54                'url': mapfish.SERVER_BASE_URL + "countries", 
     55                'loadMask' : {msg: 'Loading Data...', msgCls: 'x-mask-loading'}, 
     56                'legendDiv' : 'myChoroplethLegendDiv' 
     57            }); 
     58            choropleth.render('myChoroplethDiv'); 
    5759 
    58       }, this); 
     60        }, this); 
    5961 
    6062    </script> 
    6163 
    6264    <style type="text/css"> 
    6365        #right { 
    64             float:right; 
    65             width:28%; 
     66            float: right; 
     67            width: 28%; 
    6668        } 
     69 
    6770        #olmap { 
    6871            width: 65%; 
    6972            height: 400px; 
    7073            border: 1px solid black; 
    7174        } 
     75 
    7276        #myChoroplethLegendDiv { 
    7377            margin-top: 1.5em; 
    7478            font-size: small; 
    7579        } 
     80 
     81        #north { 
     82            margin-top: 5px; 
     83            margin-left: 5px; 
     84        } 
    7685    </style> 
    77   </head> 
    78   <body> 
    79     <h1 class="page-title">Choropleths Example</h1> 
     86</head> 
     87<body> 
     88<div id="north"> 
     89    <h1 style="font-size:20px;color:#15428B;font-family:tahoma,arial,verdana,sans-serif">MapFish: Chloropleth 
     90        example</h1> 
     91    <br> 
     92</div> 
    8093 
    81     <div id="content"> 
    82       <div id="right"> 
     94<div id="content"> 
     95    <div id="right"> 
    8396        <div id="myChoroplethDiv"></div> 
    8497        <div id="myChoroplethLegendDiv"></div> 
    85       </div> 
    86       <div id="olmap"></div> 
    87     </div> 
    88   </body> 
     98    </div> 
     99    <div id="olmap"></div> 
     100</div> 
     101</body> 
    89102</html> 

  • MapFish/client/examples/editing/index.html

     
    33        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    44        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    55<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    6   <head> 
     6<head> 
    77    <title>Edition examples</title> 
    8   </head> 
    9   <body> 
    10     <h1 class="page-title">Edition examples</h1> 
     8</head> 
     9<body> 
     10<h1 class="page-title">Edition examples</h1> 
    1111 
    12     <div id="content"> 
    13       <ul> 
     12<div id="content"> 
     13    <ul> 
    1414        <li><a href="list.html">Separate feature list</a></li> 
    1515        <li><a href="editing-panel.html">Editing panel</a></li> 
    16       </ul> 
    17     </div> 
    18   </body> 
     16    </ul> 
     17</div> 
     18</body> 
    1919</html> 

  • MapFish/client/examples/print/simple.html

     
    1717        src="../../mfbase/ext/adapter/ext/ext-base.js"></script> 
    1818<script type="text/javascript" src="../../mfbase/ext/ext-all-debug.js"></script> 
    1919 
     20<script type="text/javascript" src="../../mfbase/geoext/lib/GeoExt.js"></script> 
     21 
    2022<script type="text/javascript"> 
    21   // Because of a bug in Firefox 2 we need to specify the MapFish base path. 
    22   // See https://bugzilla.mozilla.org/show_bug.cgi?id=351282 
    23   var gMfLocation = "../../mfbase/mapfish/"; 
     23    // Because of a bug in Firefox 2 we need to specify the MapFish base path. 
     24    // See https://bugzilla.mozilla.org/show_bug.cgi?id=351282 
     25    var gMfLocation = "../../mfbase/mapfish/"; 
    2426</script> 
    2527<script type="text/javascript" src="../../mfbase/mapfish/MapFish.js"></script> 
    2628<script type="text/javascript" src="../examples.js"></script> 
    2729 
    2830<style type="text/css"> 
    29   html, body { 
    30     font: normal 12px verdana; 
    31     margin: 0; 
    32     padding: 0; 
    33     border: 0 none; 
    34     overflow: hidden; 
    35     height: 100%; 
    36   } 
     31    html, body { 
     32        font: normal 12px verdana; 
     33        margin: 0; 
     34        padding: 0; 
     35        border: 0 none; 
     36        overflow: hidden; 
     37        height: 100%; 
     38    } 
    3739</style> 
    3840<script type="text/javascript"> 
    3941 
    40   // reference local blank image 
    41   Ext.BLANK_IMAGE_URL = '../../mfbase/ext/resources/images/default/s.gif'; 
    42   Ext.onReady(function() { 
     42    // reference local blank image 
     43    Ext.BLANK_IMAGE_URL = '../../mfbase/ext/resources/images/default/s.gif'; 
     44    Ext.onReady(function() { 
    4345 
    44     var map = new OpenLayers.Map($('center')); 
     46        var map = new OpenLayers.Map($('center')); 
    4547 
    46     var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", 
    47             "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}, {buffer: 0}); 
    48     map.addLayers([wms]); 
     48        var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", 
     49                "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}, {buffer: 0}); 
     50        map.addLayers([wms]); 
    4951 
    50     var summits = new OpenLayers.Layer.WMS("Summits", 
    51             "http://demo.mapfish.org/mapfishsample/trunk/wms?", 
    52             {layers: ['summits'], format: 'image/png', transparent: true}, 
    53             {visibility: false, singleTile: true} 
    54     ); 
    55     map.addLayer(summits); 
     52        var summits = new OpenLayers.Layer.WMS("Summits", 
     53                "http://demo.mapfish.org/mapfishsample/trunk/wms?", 
     54        {layers: ['summits'], format: 'image/png', transparent: true}, 
     55        {visibility: false, singleTile: true} 
     56                ); 
     57        map.addLayer(summits); 
    5658 
    57     var countries = new OpenLayers.Layer.WMS("Countries", 
    58             "http://demo.mapfish.org/mapfishsample/trunk/wms?", 
    59             {layers: ['countries'], format:  OpenLayers.Util.alphaHack()?'image/gif':'image/png', transparent: true}, 
    60             {visibility: true, singleTile: true} 
    61     ); 
    62     map.addLayer(countries); 
     59        var countries = new OpenLayers.Layer.WMS("Countries", 
     60                "http://demo.mapfish.org/mapfishsample/trunk/wms?", 
     61        {layers: ['countries'], format:  OpenLayers.Util.alphaHack() ? 'image/gif' : 'image/png', transparent: true}, 
     62        {visibility: true, singleTile: true} 
     63                ); 
     64        map.addLayer(countries); 
    6365 
    64     map.addControl(new OpenLayers.Control.LayerSwitcher()); 
     66        map.addControl(new OpenLayers.Control.LayerSwitcher()); 
    6567 
    66     var layerOverrides={ 
    67         "OpenLayers WMS": {overview: true}, 
    68         Countries: { format: 'image/svg+xml' } 
    69     }; 
     68        var layerOverrides = { 
     69            "OpenLayers WMS": {overview: true}, 
     70            Countries: { format: 'image/svg+xml' } 
     71        }; 
    7072 
    71     var printConfigUrl = mapfish.SERVER_BASE_URL + 'print/info.json'; 
    72     //var printConfigUrl = '/tomcat/print-servlet-1.1-SNAPSHOT/pdf/info.json'; 
     73        var printConfigUrl = mapfish.SERVER_BASE_URL + 'print/info.json'; 
     74        //var printConfigUrl = '/tomcat/print-servlet-1.1-SNAPSHOT/pdf/info.json'; 
    7375 
    74     var toolbar = new mapfish.widgets.toolbar.Toolbar({ 
    75         map: map, 
    76         configurable: false, 
    77         items: [new mapfish.widgets.print.PrintAction({ 
    78             map: map, 
    79             configUrl: printConfigUrl, 
    80             overrides: layerOverrides, 
    81             fillSpec: function(printCommand) { 
    82                 mapfish.widgets.print.PrintAction.prototype.fillSpec.call(this, printCommand); 
     76        var toolbar = new mapfish.widgets.toolbar.Toolbar({ 
     77            map: map, 
     78            configurable: false, 
     79            items: [new mapfish.widgets.print.PrintAction({ 
     80                map: map, 
     81                configUrl: printConfigUrl, 
     82                overrides: layerOverrides, 
     83                fillSpec: function(printCommand) { 
     84                    mapfish.widgets.print.PrintAction.prototype.fillSpec.call(this, printCommand); 
    8385 
    84                 //our layout needs two fields... hard code them here 
    85                 printCommand.spec.comment = "No comment"; 
    86                 printCommand.spec.mapTitle = "PrintControl"; 
    87             } 
    88         })] 
    89     }); 
     86                    //our layout needs two fields... hard code them here 
     87                    printCommand.spec.comment = "No comment"; 
     88                    printCommand.spec.mapTitle = "PrintControl"; 
     89                } 
     90            })] 
     91        }); 
    9092 
    91     var viewport = new Ext.Viewport({ 
    92       layout:'border', 
    93       items:[ 
    94         new Ext.BoxComponent({ // raw 
    95           region: 'north', 
    96           el: 'north', 
    97           height: 32 
    98         }), 
    99         { 
    100           region: 'west', 
    101           id: 'west-panel', 
    102           title: 'West', 
    103           split: true, 
    104           width: 280, 
    105           minSize: 175, 
    106           maxSize: 400, 
    107           collapsible: true, 
    108           margins: '0 0 0 5', 
    109           layout: 'accordion', 
    110           defaults: { 
    111             collapsed: true 
    112           }, 
    113           layoutConfig:{ 
    114             animate: true, 
    115             activeOnTop: false 
    116           }, 
    117           items: [ 
    118             { 
    119               contentEl: 'help', 
    120               collapsed: false, 
    121               title: 'Help', 
    122               autoScroll: true, 
    123               bodyStyle: 'padding: 7px;', 
    124               border: false 
    125             }, 
    126             { 
    127               xtype: 'print-simple', 
    128               title: 'Print single page', 
    129               bodyStyle: 'padding: 7px;', 
    130               formConfig: { 
    131                 labelWidth: 65, 
    132                 defaults: { 
    133                   width: 140, 
    134                   listWidth: 140 
    135                 }, 
    136                 items: [ 
    137                   { 
    138                     xtype: 'textfield', 
    139                     fieldLabel: OpenLayers.Lang.translate('mf.print.mapTitle'), 
    140                     name: 'mapTitle', 
    141                     value: 'Map title' 
    142                   }, 
    143                   { 
    144                     xtype: 'textarea', 
    145                     fieldLabel: OpenLayers.Lang.translate('mf.print.comment'), 
    146                     name: 'comment', 
    147                     height: 100, 
    148                     value: 'Some comments' 
    149                   } 
    150                 ] 
    151               }, 
    152               border: false, 
    153               map: map, 
    154               configUrl: printConfigUrl, 
    155               overrides: layerOverrides 
    156             }, 
    157             { 
    158               xtype: 'print-multi', 
    159               title: 'Print multi page', 
    160               formConfig: { 
    161                 labelWidth: 65, 
    162                 bodyStyle: 'padding: 7px;', 
    163                 defaults: { 
    164                   width: 140, 
    165                   listWidth: 140 
    166                 }/*, 
    167                 items: [ 
    168                   { 
    169                     xtype: 'textfield', 
    170                     fieldLabel: 'Title', 
    171                     name: 'title', 
    172                     value: 'Map title' 
    173                   } 
    174                 ]*/ 
    175               }, 
    176               columns: [ 
    177                   { 
    178                       header: OpenLayers.Lang.translate('mf.print.mapTitle'), 
    179                       dataIndex: 'mapTitle', 
    180                       editor: new Ext.form.TextField() 
    181                   }, 
    182                   { 
    183                       header: OpenLayers.Lang.translate('mf.print.comment'), 
    184                       dataIndex: 'comment', 
    185                       editor: new Ext.form.TextField() 
    186                   } 
    187               ], 
    188               border: false, 
    189               map: map, 
    190               configUrl: printConfigUrl, 
    191               overrides: layerOverrides 
    192             } 
    193           ] 
    194         },{ 
    195             region: 'center', 
    196             title: 'Map', 
    197             layout: 'fit', 
    198             xtype: 'mapcomponent', 
    199             map: map, 
    200             tbar: toolbar 
    201         }] 
    202     }); 
     93        var viewport = new Ext.Viewport({ 
     94            layout:'border', 
     95            items:[ 
     96                new Ext.BoxComponent({ // raw 
     97                    region: 'north', 
     98                    el: 'north', 
     99                    height: 32, 
     100                    margins: {left: 5,top: 5} 
     101                }), 
     102                { 
     103                    region: 'west', 
     104                    id: 'west-panel', 
     105                    title: 'West', 
     106                    split: true, 
     107                    width: 280, 
     108                    minSize: 175, 
     109                    maxSize: 400, 
     110                    collapsible: true, 
     111                    margins: '0 0 0 5', 
     112                    layout: 'accordion', 
     113                    defaults: { 
     114                        collapsed: true 
     115                    }, 
     116                    layoutConfig:{ 
     117                        animate: true, 
     118                        activeOnTop: false 
     119                    }, 
     120                    items: [ 
     121                        { 
     122                            contentEl: 'help', 
     123                            collapsed: false, 
     124                            title: 'Help', 
     125                            autoScroll: true, 
     126                            bodyStyle: 'padding: 7px;', 
     127                            border: false 
     128                        }, 
     129                        { 
     130                            xtype: 'print-simple', 
     131                            title: 'Print single page', 
     132                            bodyStyle: 'padding: 7px;', 
     133                            formConfig: { 
     134                                labelWidth: 65, 
     135                                defaults: { 
     136                                    width: 140, 
     137                                    listWidth: 140 
     138                                }, 
     139                                items: [ 
     140                                    { 
     141                                        xtype: 'textfield', 
     142                                        fieldLabel: OpenLayers.Lang.translate('mf.print.mapTitle'), 
     143                                        name: 'mapTitle', 
     144                                        value: 'Map title' 
     145                                    }, 
     146                                    { 
     147                                        xtype: 'textarea', 
     148                                        fieldLabel: OpenLayers.Lang.translate('mf.print.comment'), 
     149                                        name: 'comment', 
     150                                        height: 100, 
     151                                        value: 'Some comments' 
     152                                    } 
     153                                ] 
     154                            }, 
     155                            border: false, 
     156                            map: map, 
     157                            configUrl: printConfigUrl, 
     158                            overrides: layerOverrides 
     159                        }, 
     160                        { 
     161                            xtype: 'print-multi', 
     162                            title: 'Print multi page', 
     163                            formConfig: { 
     164                                labelWidth: 65, 
     165                                bodyStyle: 'padding: 7px;', 
     166                                defaults: { 
     167                                    width: 140, 
     168                                    listWidth: 140 
     169                                }/*, 
     170                                 items: [ 
     171                                 { 
     172                                 xtype: 'textfield', 
     173                                 fieldLabel: 'Title', 
     174                                 name: 'title', 
     175                                 value: 'Map title' 
     176                                 } 
     177                                 ]*/ 
     178                            }, 
     179                            columns: [ 
     180                                { 
     181                                    header: OpenLayers.Lang.translate('mf.print.mapTitle'), 
     182                                    dataIndex: 'mapTitle', 
     183                                    editor: new Ext.form.TextField() 
     184                                }, 
     185                                { 
     186                                    header: OpenLayers.Lang.translate('mf.print.comment'), 
     187                                    dataIndex: 'comment', 
     188                                    editor: new Ext.form.TextField() 
     189                                } 
     190                            ], 
     191                            border: false, 
     192                            map: map, 
     193                            configUrl: printConfigUrl, 
     194                            overrides: layerOverrides 
     195                        } 
     196                    ] 
     197                },{ 
     198                    region: 'center', 
     199                    title: 'Map', 
     200                    layout: 'fit', 
     201                    xtype: 'gx_mappanel', 
     202                    map: map, 
     203                    tbar: toolbar 
     204                }] 
     205        }); 
    203206 
    204     map.setCenter(new OpenLayers.LonLat(8.5, 0), 3); 
    205   }); 
     207        map.setCenter(new OpenLayers.LonLat(8.5, 0), 3); 
     208    }); 
    206209</script> 
    207210</head> 
    208211<body> 
    209   <div id="west"></div> 
    210   <div id="north"> 
    211     <p style="font-size:14pt" align="center">MapFish printer</p> 
    212   </div> 
    213   <div id="center"></div> 
    214   <div id="help"> 
    215       There are 3 tools available for the PDF generation (printing):<br/><br/> 
    216       <ul style="list-style: disc outside; padding-left: 20px;"> 
    217           <li><b>mapfish.widgets.print.SimpleForm</b>:<br /> 
    218               Shows a form and let the user choose the extent of a single page.<br/> 
    219               You can find it in the West panel.<br/><br/> 
    220           </li> 
    221           <li><b>mapfish.widgets.print.MultiPage</b>:<br /> 
    222               Show a table and a form and let the user choose the extent of multiple pages.<br/> 
    223               You can find it in the West panel.<br/><br/> 
    224           </li> 
    225           <li><b>mapfish.PrintAction</b>:<br /> 
    226               An Ext.Action that prints a single page with an extent that fits as good as possible the current map's extent.<br/> 
    227               You can find it in the toolbar over the map.<br/><br/> 
    228           </li> 
    229       </ul> 
    230       <p>You can enable the "summit" layer (click on the "+" on the right of the map) and it will shown on the PDF as well.</p> 
    231       <p>Don't hesitate to play with the Layout and DPI fields in the forms.</p>       
    232   </div> 
     212<div id="west"></div> 
     213<div id="north"> 
     214    <h1 style="font-size:20px;color:#15428B;font-family:tahoma,arial,verdana,sans-serif">MapFish: Advanced printer</h1> 
     215</div> 
     216<div id="center"></div> 
     217<div id="help"> 
     218    There are 3 tools available for the PDF generation (printing):<br/><br/> 
     219    <ul style="list-style: disc outside; padding-left: 20px;"> 
     220        <li><b>mapfish.widgets.print.SimpleForm</b>:<br/> 
     221            Shows a form and let the user choose the extent of a single page.<br/> 
     222            You can find it in the West panel.<br/><br/> 
     223        </li> 
     224        <li><b>mapfish.widgets.print.MultiPage</b>:<br/> 
     225            Show a table and a form and let the user choose the extent of multiple pages.<br/> 
     226            You can find it in the West panel.<br/><br/> 
     227        </li> 
     228        <li><b>mapfish.PrintAction</b>:<br/> 
     229            An Ext.Action that prints a single page with an extent that fits as good as possible the current map's 
     230            extent.<br/> 
     231            You can find it in the toolbar over the map.<br/><br/> 
     232        </li> 
     233    </ul> 
     234    <p>You can enable the "summit" layer (click on the "+" on the right of the map) and it will shown on the PDF as 
     235        well.</p> 
     236 
     237    <p>Don't hesitate to play with the Layout and DPI fields in the forms.</p> 
     238</div> 
    233239</body> 
    234240</html> 

  • MapFish/client/examples/map/index.html

     
    11<!DOCTYPE html> 
    22<html> 
    33<head> 
    4   <title>Map widget examples</title> 
     4    <title>Map widget examples</title> 
    55</head> 
    66<body> 
    7   <h1 class="page-title">MapComponent widget examples</h1> 
    8   <div id="content">  
     7<h1 class="page-title">MapPanel widget examples</h1> 
     8 
     9<div id="content"> 
    910    <ul> 
    10       <li><a href="window.html">A map in a complex layout</a></li> 
    11       <li><a href="layout.html">A map in a complex layout (2)</a></li> 
    12       <li><a href="toolbar.html">A map with a toolbar</a></li> 
    13       <li><a href="multiple_maps.html">Multiple maps</a></li> 
    14       <li><a href="layout_spherical_mercator.html">Display maps from Google, Yahoo! and OpenStreetMap</a></li> 
     11        <li><a href="window.html">A map in a complex layout</a></li> 
     12        <li><a href="layout.html">A map in a complex layout (2)</a></li> 
     13        <li><a href="toolbar.html">A map with a toolbar</a></li> 
     14        <li><a href="multiple_maps.html">Multiple maps</a></li> 
     15        <li><a href="layout_spherical_mercator.html">Display maps from Google, Yahoo! and OpenStreetMap</a></li> 
    1516    </ul> 
    16   </div> 
     17</div> 
    1718</body> 
    1819</html> 
    1920 

  • MapFish/client/examples/map/toolbar.html

     
    11<!DOCTYPE html> 
    22<html> 
    3   <head> 
    4     <title>Toolbar</title> 
    5      
    6     <link rel="stylesheet" type="text/css" href="../../mfbase/ext/resources/css/ext-all.css" /> 
    7     <link rel="stylesheet" type="text/css" href="../../mfbase/mapfish/mapfish.css" /> 
     3<head> 
     4<title>Toolbar</title> 
     5 
     6<link rel="stylesheet" type="text/css" href="../../mfbase/ext/resources/css/ext-all.css"/> 
     7<link rel="stylesheet" type="text/css" href="../../mfbase/mapfish/mapfish.css"/> 
    88 
    9     <script type="text/javascript" src="../../mfbase/openlayers/lib/Firebug/firebug.js"></script> 
    10     <script type="text/javascript" src="../../mfbase/openlayers/lib/OpenLayers.js"></script> 
    11     <script type="text/javascript" src="../../mfbase/ext/adapter/ext/ext-base.js"></script> 
    12     <script type="text/javascript" src="../../mfbase/ext/ext-all.js"></script> 
     9 
     10<script type="text/javascript" src="../../mfbase/openlayers/lib/Firebug/firebug.js"></script> 
     11<script type="text/javascript" src="../../mfbase/openlayers/lib/OpenLayers.js"></script> 
     12<script type="text/javascript" src="../../mfbase/ext/adapter/ext/ext-base.js"></script> 
     13<script type="text/javascript" src="../../mfbase/ext/ext-all.js"></script> 
    1314 
    14     <script type="text/javascript"> 
    15       // Because of a bug in Firefox 2 we need to specify the MapFish base path. 
    16       // See https://bugzilla.mozilla.org/show_bug.cgi?id=351282 
    17       var gMfLocation = "../../mfbase/mapfish/"; 
    18     </script> 
    19     <script type="text/javascript" src="../../mfbase/mapfish/MapFish.js"></script> 
    20     <script type="text/javascript" src="../examples.js"></script> 
    21      
    22     <script type="text/javascript"> 
    23     // reference local blank image 
    24     Ext.BLANK_IMAGE_URL = '../../mfbase/ext/resources/images/default/s.gif'; 
    25       
    26     // create namespace 
    27     Ext.namespace('toolbarExample'); 
    28       
    29     // create application 
    30     toolbarExample.app = function() {   
    31         // private vars: 
    32         var map, toolbar, viewport, vectorLayer; 
     15<script type="text/javascript" src="../../mfbase/geoext/lib/GeoExt.js"></script> 
     16 
     17<script type="text/javascript"> 
     18    // Because of a bug in Firefox 2 we need to specify the MapFish base path. 
     19    // See https://bugzilla.mozilla.org/show_bug.cgi?id=351282 
     20    var gMfLocation = "../../mfbase/mapfish/"; 
     21</script> 
     22<script type="text/javascript" src="../../mfbase/mapfish/MapFish.js"></script> 
     23<script type="text/javascript" src="../examples.js"></script> 
     24 
     25<script type="text/javascript"> 
     26// reference local blank image 
     27Ext.BLANK_IMAGE_URL = '../../mfbase/ext/resources/images/default/s.gif'; 
     28 
     29// create namespace 
     30Ext.namespace('toolbarExample'); 
     31 
     32// create application 
     33toolbarExample.app = function() { 
     34    // private vars: 
     35    var map, toolbar, viewport, vectorLayer; 
    3336 
    34         // private functions 
    35         var createMap = function() { 
    36             map = new OpenLayers.Map('mymap', { 
    37                 projection: "EPSG:4326", 
    38                 controls: [],  
    39                 maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90), 
    40                 scales: [ 
    41                     442943842.5, 221471921.25, 110735960.625, 55367980.3125, 27683990.15625, 
    42                     13841995.078125, 6920997.5390625, 3460498.76953125, 1730249.384765625, 
    43                     865124.6923828125, 432562.34619140625, 216281.17309570312, 108140.58654785156, 
    44                     54070.29327392578 
    45                 ] 
    46             }); 
    47         }; 
    48          
    49         var createWmsLayer = function(name, url, params, options) { 
    50             map.addLayer(new OpenLayers.Layer.WMS(name, url, params, options)); 
    51         }; 
    52          
    53         var createVectorLayer = function() { 
    54             vectorLayer = new OpenLayers.Layer.Vector("vector", { 
    55                 displayInLayerSwitcher: false 
    56             }); 
    57             map.addLayer(vectorLayer); 
    58              
    59             vectorLayer.events.register('featureadded', vectorLayer, function(){ 
    60                 var l = this.features.length; 
    61                 var msg = (l==1) ? 'There is one feature on map' : 'There are now ' + l + ' features on map'; 
    62                 toolbarExample.app.setStatus(msg); 
    63             }); 
    64              
    65             return vectorLayer; 
    66         }; 
    67          
    68         var addMapControls = function() { 
    69             // navigation control 
    70             var navControl = new OpenLayers.Control.Navigation({ 
    71                 type: OpenLayers.Control.TYPE_TOGGLE, 
    72                 zoomWheelEnabled: true 
    73             }); 
    74             map.addControl(navControl); 
    75             navControl.activate(); 
    76         }; 
    77          
    78         var createToolbar = function() { 
    79             toolbar = new mapfish.widgets.toolbar.Toolbar({ 
    80                 map: map,  
    81                 configurable: false 
    82             }); 
    83                  
    84             // this is a quick fix for http://trac.mapfish.org/trac/mapfish/ticket/126 
    85             toolbar.autoHeight = false; 
    86             toolbar.height = 25; 
    87         }; 
    88          
    89         var addSeparator = function() {  
    90             toolbar.add(new Ext.Toolbar.Spacer()); 
    91             toolbar.add(new Ext.Toolbar.Separator()); 
    92             toolbar.add(new Ext.Toolbar.Spacer()); 
    93         }; 
    94          
    95         var createViewport = function() { 
    96             viewport = new Ext.Viewport({ 
    97                 layout: 'border', 
    98                 items: [ 
    99                     new Ext.BoxComponent({ 
    100                         region: 'north', 
    101                         el: 'north', 
    102                         height: 60 
    103                     }), { 
    104                         region: 'west', 
    105                         title: 'LayerTree', 
    106                         width: 200, 
    107                         border: true, 
    108                         margins: '5 0 0 5', 
    109                         frame: false, 
    110                         split: true, 
    111                         layout: 'fit', 
    112                         collapsible: true, 
    113                         items: [{  
     37    // private functions 
     38    var createMap = function() { 
     39        map = new OpenLayers.Map('mymap', { 
     40            projection: "EPSG:4326", 
     41            controls: [], 
     42            maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90), 
     43            scales: [ 
     44                442943842.5, 221471921.25, 110735960.625, 55367980.3125, 27683990.15625, 
     45                13841995.078125, 6920997.5390625, 3460498.76953125, 1730249.384765625, 
     46                865124.6923828125, 432562.34619140625, 216281.17309570312, 108140.58654785156, 
     47                54070.29327392578 
     48            ] 
     49        }); 
     50    }; 
     51 
     52    var createWmsLayer = function(name, url, params, options) { 
     53        map.addLayer(new OpenLayers.Layer.WMS(name, url, params, options)); 
     54    }; 
     55 
     56    var createVectorLayer = function() { 
     57        vectorLayer = new OpenLayers.Layer.Vector("vector", { 
     58            displayInLayerSwitcher: false 
     59        }); 
     60        map.addLayer(vectorLayer); 
     61 
     62        vectorLayer.events.register('featureadded', vectorLayer, function() { 
     63            var l = this.features.length; 
     64            var msg = (l == 1) ? 'There is one feature on map' : 'There are now ' + l + ' features on map'; 
     65            toolbarExample.app.setStatus(msg); 
     66        }); 
     67 
     68        return vectorLayer; 
     69    }; 
     70 
     71    var addMapControls = function() { 
     72        // navigation control 
     73        var navControl = new OpenLayers.Control.Navigation({ 
     74            type: OpenLayers.Control.TYPE_TOGGLE, 
     75            zoomWheelEnabled: true 
     76        }); 
     77        map.addControl(navControl); 
     78        navControl.activate(); 
     79    }; 
     80 
     81    var createToolbar = function() { 
     82        toolbar = new mapfish.widgets.toolbar.Toolbar({ 
     83            map: map, 
     84            configurable: false 
     85        }); 
     86 
     87        // this is a quick fix for http://trac.mapfish.org/trac/mapfish/ticket/126 
     88        toolbar.autoHeight = false; 
     89        toolbar.height = 25; 
     90    }; 
     91 
     92    var addSeparator = function() { 
     93        toolbar.add(new Ext.Toolbar.Spacer()); 
     94        toolbar.add(new Ext.Toolbar.Separator()); 
     95        toolbar.add(new Ext.Toolbar.Spacer()); 
     96    }; 
     97 
     98    var createViewport = function() { 
     99        viewport = new Ext.Viewport({ 
     100            layout: 'border', 
     101            items: [ 
     102                new Ext.BoxComponent({ 
     103                    region: 'north', 
     104                    el: 'north', 
     105                    height: 32, 
     106                    margins: {left: 5,top: 5} 
     107                }), { 
     108                    region: 'west', 
     109                    title: 'LayerTree', 
     110                    width: 200, 
     111                    border: true, 
     112                    margins: '5 0 0 5', 
     113                    frame: false, 
     114                    split: true, 
     115                    layout: 'fit', 
     116                    collapsible: true, 
     117                    items: [ 
     118                        { 
    114119                            xtype: 'layertree', 
    115                             map: map,  
    116                             border: false  
    117                         }] 
    118                     },{ 
    119                         region: 'center', 
    120                         //title: 'map', 
    121                         layout: 'fit', 
    122                         frame: false, 
    123                         border: true, 
    124                         margins: '5 5 0 0', 
    125                         items: [{ 
    126                             xtype: 'mapcomponent', 
     120                            map: map, 
     121                            border: false 
     122                        } 
     123                    ] 
     124                },{ 
     125                    region: 'center', 
     126                    //title: 'map', 
     127                    layout: 'fit', 
     128                    frame: false, 
     129                    border: true, 
     130                    margins: '5 5 0 0', 
     131                    items: [ 
     132                        { 
     133                            xtype: 'gx_mappanel', 
    127134                            map: map, 
    128135                            tbar: toolbar, 
    129136                            border: false 
    130                         }] 
    131                     },{ 
    132                         region: 'south', 
    133                         id: 'statusBar', 
    134                         border: false, 
    135                         bodyStyle: 'text-align:left;padding:0px;', 
    136                         height: 25, 
    137                         margins: '5 0 0 0', 
    138                         frame: true, 
    139                         html: 'a status bar' 
    140                     } 
    141                 ] 
    142             }); 
    143         }; 
    144          
    145         var setToolbarContent = function() { 
    146          
    147             toolbar.addControl( 
     137                        } 
     138                    ] 
     139                },{ 
     140                    region: 'south', 
     141                    id: 'statusBar', 
     142                    border: false, 
     143                    bodyStyle: 'text-align:left;padding:0px;', 
     144                    height: 25, 
     145                    margins: '5 0 0 0', 
     146                    frame: true, 
     147                    html: 'a status bar' 
     148                } 
     149            ] 
     150        }); 
     151    }; 
     152 
     153    var setToolbarContent = function() { 
     154 
     155        toolbar.addControl( 
    148156                new OpenLayers.Control.ZoomToMaxExtent({ 
    149157                    map: map, 
    150158                    title: 'Zoom to maximum map extent' 
    151159                }), { 
    152                     iconCls: 'zoomfull',  
    153                     toggleGroup: 'map' 
    154                 } 
    155             ); 
    156                  
    157             addSeparator(); 
    158                  
    159             toolbar.addControl( 
     160            iconCls: 'zoomfull', 
     161            toggleGroup: 'map' 
     162        } 
     163                ); 
     164 
     165        addSeparator(); 
     166 
     167        toolbar.addControl( 
    160168                new OpenLayers.Control.ZoomBox({ 
    161169                    title: 'Zoom in: click in the map or use the left mouse button and drag to create a rectangle' 
    162170                }), { 
    163                     iconCls: 'zoomin',  
    164                     toggleGroup: 'map' 
    165                 } 
    166             ); 
    167              
    168             toolbar.addControl( 
     171            iconCls: 'zoomin', 
     172            toggleGroup: 'map' 
     173        } 
     174                ); 
     175 
     176        toolbar.addControl( 
    169177                new OpenLayers.Control.ZoomBox({ 
    170178                    out: true, 
    171179                    title: 'Zoom out: click in the map or use the left mouse button and drag to create a rectangle' 
    172180                }), { 
    173                     iconCls: 'zoomout',  
    174                     toggleGroup: 'map' 
    175                 } 
    176             ); 
    177                  
    178             toolbar.addControl( 
     181            iconCls: 'zoomout', 
     182            toggleGroup: 'map' 
     183        } 
     184                ); 
     185 
     186        toolbar.addControl( 
    179187                new OpenLayers.Control.DragPan({ 
    180188                    isDefault: true, 
    181189                    title: 'Pan map: keep the left mouse button pressed and drag the map' 
    182190                }), { 
    183                     iconCls: 'pan',  
    184                     toggleGroup: 'map' 
    185                 } 
    186             ); 
    187                  
    188             addSeparator(); 
    189                  
    190             toolbar.addControl( 
     191            iconCls: 'pan', 
     192            toggleGroup: 'map' 
     193        } 
     194                ); 
     195 
     196        addSeparator(); 
     197 
     198        toolbar.addControl( 
    191199                new OpenLayers.Control.DrawFeature(vectorLayer, OpenLayers.Handler.Point, { 
    192200                    title: 'Draw a point on the map' 
    193201                }), { 
    194                     iconCls: 'drawpoint',  
    195                     toggleGroup: 'map' 
    196                 } 
    197             ); 
    198                  
    199             toolbar.addControl( 
     202            iconCls: 'drawpoint', 
     203            toggleGroup: 'map' 
     204        } 
     205                ); 
     206 
     207        toolbar.addControl( 
    200208                new OpenLayers.Control.DrawFeature(vectorLayer, OpenLayers.Handler.Path, { 
    201209                    title: 'Draw a linestring on the map' 
    202210                }), { 
    203                     iconCls: 'drawline',  
    204                     toggleGroup: 'map' 
    205                 } 
    206             ); 
    207                  
    208             toolbar.addControl( 
     211            iconCls: 'drawline', 
     212            toggleGroup: 'map' 
     213        } 
     214                ); 
     215 
     216        toolbar.addControl( 
    209217                new OpenLayers.Control.DrawFeature(vectorLayer, OpenLayers.Handler.Polygon, { 
    210218                    title: 'Draw a polygon on the map' 
    211219                }), { 
    212                     iconCls: 'drawpolygon',  
    213                     toggleGroup: 'map' 
    214                 } 
    215             ); 
    216                  
    217             addSeparator(); 
    218              
    219             var nav = new OpenLayers.Control.NavigationHistory(); 
    220             map.addControl(nav); 
    221             nav.activate(); 
    222                  
    223             var buttonPrevious = new Ext.Toolbar.Button({ 
    224                 iconCls: 'back', 
    225                 tooltip: 'Previous view',  
    226                 disabled: true, 
    227                 handler: nav.previous.trigger 
    228             }); 
    229                  
    230             var buttonNext = new Ext.Toolbar.Button({ 
    231                 iconCls: 'next', 
    232                 tooltip: 'Next view',  
    233                 disabled: true, 
    234                 handler: nav.next.trigger 
    235             }); 
    236                  
    237             toolbar.add(buttonPrevious); 
    238             toolbar.add(buttonNext); 
    239                  
    240             nav.previous.events.register( 
    241                 "activate",  
     220            iconCls: 'drawpolygon', 
     221            toggleGroup: 'map' 
     222        } 
     223                ); 
     224 
     225        addSeparator(); 
     226 
     227        var nav = new OpenLayers.Control.NavigationHistory(); 
     228        map.addControl(nav); 
     229        nav.activate(); 
     230 
     231        var buttonPrevious = new Ext.Toolbar.Button({ 
     232            iconCls: 'back', 
     233            tooltip: 'Previous view', 
     234            disabled: true, 
     235            handler: nav.previous.trigger 
     236        }); 
     237 
     238        var buttonNext = new Ext.Toolbar.Button({ 
     239            iconCls: 'next', 
     240            tooltip: 'Next view', 
     241            disabled: true, 
     242            handler: nav.next.trigger 
     243        }); 
     244 
     245        toolbar.add(buttonPrevious); 
     246        toolbar.add(buttonNext); 
     247 
     248        nav.previous.events.register( 
     249                "activate", 
    242250                buttonPrevious, 
    243                 function() {  
    244                     this.setDisabled(false);  
     251                function() { 
     252                    this.setDisabled(false); 
    245253                } 
    246             ); 
    247                  
    248             nav.previous.events.register( 
    249                 "deactivate",  
     254                ); 
     255 
     256        nav.previous.events.register( 
     257                "deactivate", 
    250258                buttonPrevious, 
    251                 function() {  
    252                     this.setDisabled(true);  
     259                function() { 
     260                    this.setDisabled(true); 
    253261                } 
    254             ); 
    255                  
    256             nav.next.events.register( 
    257                 "activate",  
    258                 buttonNext,  
    259                 function(){  
    260                     this.setDisabled(false);  
     262                ); 
     263 
     264        nav.next.events.register( 
     265                "activate", 
     266                buttonNext, 
     267                function() { 
     268                    this.setDisabled(false); 
    261269                } 
    262             ); 
    263                  
    264             nav.next.events.register( 
    265                 "deactivate",  
     270                ); 
     271 
     272        nav.next.events.register( 
     273                "deactivate", 
    266274                buttonNext, 
    267                 function() {  
    268                     this.setDisabled(true);  
     275                function() { 
     276                    this.setDisabled(true); 
    269277                } 
    270             ); 
    271                  
    272             addSeparator(); 
    273         } 
    274          
    275         // public space: 
    276         return { 
    277             // for debug, we make this property public: 
    278             vector: null, 
    279              
    280             setStatus: function(text) { 
    281                 Ext.getCmp('statusBar').body.dom.innerHTML = text; 
    282             }, 
    283              
    284             init: function() { 
    285                 createMap(); 
    286                 createWmsLayer( 
    287                     "OpenLayers WMS",  
     278                ); 
     279 
     280        addSeparator(); 
     281    } 
     282 
     283    // public space: 
     284    return { 
     285        // for debug, we make this property public: 
     286        vector: null, 
     287 
     288        setStatus: function(text) { 
     289            Ext.getCmp('statusBar').body.dom.innerHTML = text; 
     290        }, 
     291 
     292        init: function() { 
     293            createMap(); 
     294            createWmsLayer( 
     295                    "OpenLayers WMS", 
    288296                    "http://labs.metacarta.com/wms/vmap0", 
    289                     {layers: 'basic'},  
    290                     {isBaseLayer: true} 
    291                 ); 
    292                 createWmsLayer( 
     297            {layers: 'basic'}, 
     298            {isBaseLayer: true} 
     299                    ); 
     300            createWmsLayer( 
    293301                    "Summits", 
    294302                    "http://demo.mapfish.org/mapfishsample/trunk/wms", { 
    295                         layers: ['summits'],  
    296                         format: 'image/png',  
    297                         transparent: true, 
    298                         singleTile: true 
    299                     } 
    300                 ); 
    301                  
    302                 this.vector = createVectorLayer(); 
    303                 // vector layer is now accessible via toolbarExample.app.vector 
    304                  
    305                 addMapControls(); 
    306                 createToolbar(); 
    307                 createViewport(); 
    308                  
    309                 map.setCenter(new OpenLayers.LonLat(5,45), 6); 
    310                  
    311                 setToolbarContent(); 
    312                 toolbar.activate(); 
    313                  
    314                 // display some text in the status bar: 
    315                 this.setStatus('Status: example app ready'); 
    316             } 
    317         }; 
    318     }(); // end of app 
    319      
    320     Ext.onReady(toolbarExample.app.init, toolbarExample.app); 
    321       
    322      </script> 
    323      <style type="text/css"> 
    324         .float-left { 
    325           float: left; 
    326         } 
    327         .clear-left { 
    328           clear: left; 
    329         } 
    330         #north { 
    331             // uncomment this line to insert a banner : 
    332             /*background:transparent url(images/banner.jpg) repeat-x scroll 0 0;*/ 
    333         } 
    334      </style> 
    335   </head> 
     303                layers: ['summits'], 
     304                format: 'image/png', 
     305                transparent: true, 
     306                singleTile: true 
     307            } 
     308                    ); 
     309 
     310            this.vector = createVectorLayer(); 
     311            // vector layer is now accessible via toolbarExample.app.vector 
     312 
     313            addMapControls(); 
     314            createToolbar(); 
     315            createViewport(); 
     316 
     317            map.setCenter(new OpenLayers.LonLat(5, 45), 6); 
     318 
     319            setToolbarContent(); 
     320            toolbar.activate(); 
     321 
     322            // display some text in the status bar: 
     323            this.setStatus('Status: example app ready'); 
     324        } 
     325    }; 
     326}(); // end of app 
     327 
     328Ext.onReady(toolbarExample.app.init, toolbarExample.app); 
     329 
     330</script> 
     331<style type="text/css"> 
     332    .float-left { 
     333        float: left; 
     334    } 
     335 
     336    .clear-left { 
     337        clear: left; 
     338    } 
     339 
     340    #north { 
     341    / / uncomment this line to insert a banner : /*background:transparent url(images/banner.jpg) repeat-x scroll 0 0;*/ 
     342    } 
     343</style> 
     344</head> 
    336345 
    337   <body> 
    338     <div id="north">your banner here</div> 
    339     <div id="mymap"></div> 
    340   </body> 
     346<body> 
     347<div id="north"> 
     348    <h1 style="font-size:20px;color:#15428B;font-family:tahoma,arial,verdana,sans-serif">MapFish: Toolbar with MapPanel 
     349        example</h1> 
     350</div> 
     351<div id="mymap"></div> 
     352</body> 
    341353</html> 

  • MapFish/client/examples/shortcuts/shortcuts.html

     
    11<!DOCTYPE html> 
    22<html> 
    33<head> 
    4   <title>Shortcuts simple example</title> 
    5     <link rel="stylesheet" type="text/css" href="../../mfbase/ext/resources/css/ext-all.css" /> 
     4    <title>Shortcuts simple example</title> 
     5    <link rel="stylesheet" type="text/css" href="../../mfbase/ext/resources/css/ext-all.css"/> 
    66 
    77    <script type="text/javascript" src="../../mfbase/openlayers/lib/Firebug/firebug.js"></script> 
    88    <script type="text/javascript" src="../../mfbase/openlayers/lib/OpenLayers.js"></script> 
    … …  
    1111    <script type="text/javascript" src="../../mfbase/ext/ext-all-debug.js"></script> 
    1212 
    1313    <script type="text/javascript"> 
    14       // Because of a bug in Firefox 2 we need to specify the MapFish base path. 
    15       // See https://bugzilla.mozilla.org/show_bug.cgi?id=351282 
    16       var gMfLocation = "../../mfbase/mapfish/"; 
     14        // Because of a bug in Firefox 2 we need to specify the MapFish base path. 
     15        // See https://bugzilla.mozilla.org/show_bug.cgi?id=351282 
     16        var gMfLocation = "../../mfbase/mapfish/"; 
    1717    </script> 
    1818    <script type="text/javascript" src="../../mfbase/mapfish/MapFish.js"></script> 
    1919    <script type="text/javascript" src="../examples.js"></script> 
    20      
     20 
    2121    <style type="text/css"> 
    22         html, body { 
    23         font:normal 12px verdana; 
    24         margin: 10px; 
    25         padding:0; 
    26         border:0 none; 
    27         overflow:hidden; 
    28         height:100%; 
    29     } 
    30     #olmap { 
    31         width: 450px; 
    32         height: 300px; 
    33         border: 1px solid #aaa; 
    34     } 
     22        html, body { 
     23            font: normal 12px verdana; 
     24            margin: 10px; 
     25            padding: 0; 
     26            border: 0 none; 
     27            overflow: hidden; 
     28            height: 100%; 
     29        } 
     30 
     31        #olmap { 
     32            width: 450px; 
     33            height: 300px; 
     34            border: 1px solid #aaa; 
     35        } 
    3536    </style> 
    36         <script type="text/javascript"> 
    37    
    38     // reference local blank image 
    39     Ext.BLANK_IMAGE_URL = '../../mfbase/ext/resources/images/default/s.gif'; 
    40    
    41     var map; 
    42    
    43     Ext.onReady(function() { 
    44         map = new OpenLayers.Map('olmap'); 
     37    <script type="text/javascript"> 
     38 
     39        // reference local blank image 
     40        Ext.BLANK_IMAGE_URL = '../../mfbase/ext/resources/images/default/s.gif'; 
     41 
     42        var map; 
     43 
     44        Ext.onReady(function() { 
     45            map = new OpenLayers.Map('olmap'); 
    4546 
    46         var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",  
    47             "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}, {buffer: 0}); 
     47            var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", 
     48                    "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}, {buffer: 0}); 
    4849 
    49         map.addLayers([wms]); 
    50         map.addControl(new OpenLayers.Control.LayerSwitcher()); 
    51         map.setCenter(new OpenLayers.LonLat(17, 2), 2); 
    52      
    53         var store = new Ext.data.SimpleStore({ 
    54             fields: ['value', 'text', 'bbox'], 
    55             data : [['OC', 'Oceana', new OpenLayers.Bounds(56.0234375, -72.53125, 214.2265625, 32.9375)], 
     50            map.addLayers([wms]); 
     51            map.addControl(new OpenLayers.Control.LayerSwitcher()); 
     52            map.setCenter(new OpenLayers.LonLat(17, 2), 2); 
     53 
     54            var store = new Ext.data.SimpleStore({ 
     55                fields: ['value', 'text', 'bbox'], 
     56                data : [ 
     57                    ['OC', 'Oceana', new OpenLayers.Bounds(56.0234375, -72.53125, 214.2265625, 32.9375)], 
    5658                    ['NA', 'North America', new OpenLayers.Bounds(-186.37890625, -2.21875, -28.17578125, 103.25)], 
    5759                    ['SA', 'South America', new OpenLayers.Bounds(-146.828125, -71.828125, 11.375, 33.640625)], 
    5860                    ['AF', 'Africa', new OpenLayers.Bounds(-58.9375, -51.7890625, 99.265625, 53.6796875)], 
    5961                    ['EU', 'Europe', new OpenLayers.Bounds(-23.078125, 26.2578125, 56.0234375, 78.9921875)], 
    60                     ['AS', 'Asia', new OpenLayers.Bounds(15.59375, -21.90625, 173.796875, 83.5625)]] 
    61         }); 
    62      
    63         var shortcuts = new mapfish.widgets.Shortcuts({ 
    64             map: map, 
    65             el: 'myDiv', 
    66             store: store, 
    67             templates: { 
    68                 header: new Ext.Template("Choose a continent in the list"), 
    69                 footer: new Ext.Template("The map will automatically center to this location") 
    70             } 
    71         }); 
    72         shortcuts.render(); 
    73          
    74     }); 
    75         </script> 
     62                    ['AS', 'Asia', new OpenLayers.Bounds(15.59375, -21.90625, 173.796875, 83.5625)] 
     63                ] 
     64            }); 
     65 
     66            var shortcuts = new mapfish.widgets.Shortcuts({ 
     67                map: map, 
     68                el: 'myDiv', 
     69                store: store, 
     70                templates: { 
     71                    header: new Ext.Template("Choose a continent in the list"), 
     72                    footer: new Ext.Template("The map will automatically center to this location") 
     73                } 
     74            }); 
     75            shortcuts.render(); 
     76 
     77        }); 
     78    </script> 
    7679</head> 
    7780<body> 
    78   <div id="myDiv"> 
    79   </div> 
    80   <div id="olmap"></div> 
    81  </body> 
     81<div id="myDiv"> 
     82</div> 
     83<div id="olmap"></div> 
     84</body> 
    8285</html> 

  • MapFish/client/examples/map/multiple_maps.html

     
    11<!DOCTYPE html> 
    22<html> 
    3   <head> 
    4     <link rel="stylesheet" type="text/css" href="../../mfbase/ext/resources/css/ext-all.css" /> 
     3<head> 
     4    <link rel="stylesheet" type="text/css" href="../../mfbase/ext/resources/css/ext-all.css"/> 
    55 
    66    <script type="text/javascript" src="../../mfbase/openlayers/lib/Firebug/firebug.js"></script> 
    77    <script type="text/javascript" src="../../mfbase/openlayers/lib/OpenLayers.js"></script> 
    … …  
    1010    <script type="text/javascript" src="../../mfbase/ext/ext-all-debug.js"></script> 
    1111 
    1212    <script type="text/javascript"> 
    13       // Because of a bug in Firefox 2 we need to specify the MapFish base path. 
    14       // See https://bugzilla.mozilla.org/show_bug.cgi?id=351282 
    15       var gMfLocation = "../../mfbase/mapfish/"; 
     13        // Because of a bug in Firefox 2 we need to specify the MapFish base path. 
     14        // See https://bugzilla.mozilla.org/show_bug.cgi?id=351282 
     15        var gMfLocation = "../../mfbase/mapfish/"; 
    1616    </script> 
    1717    <script type="text/javascript" src="../../mfbase/mapfish/MapFish.js"></script> 
    1818    <script type="text/javascript" src="../examples.js"></script> 
    1919 
    2020    <script type="text/javascript"> 
    21      
    22     // reference local blank image 
    23     Ext.BLANK_IMAGE_URL = '../../mfbase/ext/resources/images/default/s.gif'; 
     21 
     22        // reference local blank image 
     23        Ext.BLANK_IMAGE_URL = '../../mfbase/ext/resources/images/default/s.gif'; 
    2424 
    25     function createFirstMap(e) { 
    26       var map = new OpenLayers.Map(e); 
    27       var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
    28                                        "http://labs.metacarta.com/wms/vmap0", 
    29                                        {layers: 'basic'} ); 
    30       map.addLayer(layer); 
    31       map.setCenter(new OpenLayers.LonLat(5, 40), 5); 
    32    
    33       return map; 
    34     } 
     25        function createFirstMap(e) { 
     26            var map = new OpenLayers.Map(e); 
     27            var layer = new OpenLayers.Layer.WMS("OpenLayers WMS", 
     28                    "http://labs.metacarta.com/wms/vmap0", 
     29            {layers: 'basic'}); 
     30            map.addLayer(layer); 
     31            map.setCenter(new OpenLayers.LonLat(5, 40), 5); 
     32 
     33            return map; 
     34        } 
    3535 
    36     function createSecondMap(e) { 
    37       var map = new OpenLayers.Map(e); 
    38    
    39       var ol_wms = new OpenLayers.Layer.WMS("World Map",  
    40                                              "http://labs.metacarta.com/wms-c/Basic.py?",  
    41                                              {layers: 'basic', format: 'image/png' } ); 
    42    
    43       var jpl_wms = new OpenLayers.Layer.WMS("Satellite", 
    44                                              "http://labs.metacarta.com/wms-c/Basic.py?",  
    45                                              {layers: 'satellite', format: 'image/png' } ); 
    46       var dm_wms = new OpenLayers.Layer.WMS("Canada", 
    47                                             "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap", 
    48                                             {layers: "bathymetry,land_fn,park,drain_fn,drainage," + 
    49                                                      "prov_bound,fedlimit,rail,road,popplace", 
    50                                              transparent: "true", format: "image/png" }); 
    51       dm_wms.setVisibility(false); 
    52       map.addLayers([jpl_wms, ol_wms, dm_wms]); 
    53       map.setCenter(new OpenLayers.LonLat(20, 35), 5); 
    54    
    55       return map; 
    56     } 
     36        function createSecondMap(e) { 
     37            var map = new OpenLayers.Map(e); 
     38 
     39            var ol_wms = new OpenLayers.Layer.WMS("World Map", 
     40                    "http://labs.metacarta.com/wms-c/Basic.py?", 
     41            {layers: 'basic', format: 'image/png' }); 
     42 
     43            var jpl_wms = new OpenLayers.Layer.WMS("Satellite", 
     44                    "http://labs.metacarta.com/wms-c/Basic.py?", 
     45            {layers: 'satellite', format: 'image/png' }); 
     46            var dm_wms = new OpenLayers.Layer.WMS("Canada", 
     47                    "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap", 
     48            {layers: "bathymetry,land_fn,park,drain_fn,drainage," + 
     49                     "prov_bound,fedlimit,rail,road,popplace", 
     50                transparent: "true", format: "image/png" }); 
     51            dm_wms.setVisibility(false); 
     52            map.addLayers([jpl_wms, ol_wms, dm_wms]); 
     53            map.setCenter(new OpenLayers.LonLat(20, 35), 5); 
     54 
     55            return map; 
     56        } 
    5757 
    58     Ext.onReady(function() { 
    59       var map, tree; 
    60        
    61       map = createFirstMap("firstMap"); 
    62       tree = new mapfish.widgets.LayerTree({map: map, el: 'firstTree'}); 
    63       tree.render(); 
     58        Ext.onReady(function() { 
     59            var map, tree; 
     60 
     61            map = createFirstMap("firstMap"); 
     62            tree = new mapfish.widgets.LayerTree({map: map, el: 'firstTree'}); 
     63            tree.render(); 
    6464 
    65       map = createSecondMap("secondMap"); 
    66       tree = new mapfish.widgets.LayerTree({map: map, el: 'secondTree'}); 
    67       tree.render(); 
    68        
    69     }, this); 
     65            map = createSecondMap("secondMap"); 
     66            tree = new mapfish.widgets.LayerTree({map: map, el: 'secondTree'}); 
     67            tree.render(); 
     68 
     69        }, this); 
    7070    </script> 
    71        
     71 
    7272    <style type="text/css"> 
    7373        .map, .mapContainer, #firstMap, #secondMap { 
    74            width: 300px; 
    75            height: 200px; 
    76            border: 1px solid #999; 
     74            width: 300px; 
     75            height: 200px; 
     76            border: 1px solid #999; 
    7777        } 
     78 
    7879        .tree, #firstTree, #secondTree { 
    79           width: 500px; 
    80           height: 100px; 
     80            width: 500px; 
     81            height: 100px; 
    8182        } 
     83 
    8284        .x-panel-body { 
    83           border: none !important; 
     85            border: none !important; 
    8486        } 
    8587    </style> 
    86   </head> 
     88</head> 
    8789 
    88   <body> 
    89     <div id="firstMap" class="map"></div> 
    90     <div id="firstTree" class="tree"></div> 
     90<body> 
     91<div id="firstMap" class="map"></div> 
     92<div id="firstTree" class="tree"></div> 
    9193 
    92     <div id="secondMap" class="map"></div> 
    93     <div id="secondTree" class="tree"></div> 
    94   </body> 
     94<div id="secondMap" class="map"></div> 
     95<div id="secondTree" class="tree"></div> 
     96</body> 
    9597</html> 

  • MapFish/client/examples/map/layout_spherical_mercator.html

     
    11<!DOCTYPE html> 
    22<html> 
    33<head> 
    4   <title>Google, Yahoo! and OSM maps</title> 
    5     <link rel="stylesheet" type="text/css" href="../../mfbase/ext/resources/css/ext-all.css" /> 
     4    <title>Google, Yahoo! and OSM maps</title> 
     5    <link rel="stylesheet" type="text/css" href="../../mfbase/ext/resources/css/ext-all.css"/> 
    66 
    77    <script type="text/javascript" src="../../mfbase/openlayers/lib/Firebug/firebug.js"></script> 
    88    <script type="text/javascript" src="../../mfbase/openlayers/lib/OpenLayers.js"></script> 
    … …  
    1010    <script type="text/javascript" src="../../mfbase/ext/adapter/ext/ext-base.js"></script> 
    1111    <script type="text/javascript" src="../../mfbase/ext/ext-all-debug.js"></script> 
    1212 
     13    <script type="text/javascript" src="../../mfbase/geoext/lib/GeoExt.js"></script> 
     14 
    1315    <script type="text/javascript"> 
    14       // Because of a bug in Firefox 2 we need to specify the MapFish base path. 
    15       // See https://bugzilla.mozilla.org/show_bug.cgi?id=351282 
    16       var gMfLocation = "../../mfbase/mapfish/"; 
     16        // Because of a bug in Firefox 2 we need to specify the MapFish base path. 
     17        // See https://bugzilla.mozilla.org/show_bug.cgi?id=351282 
     18        var gMfLocation = "../../mfbase/mapfish/"; 
    1719    </script> 
    1820    <script type="text/javascript" src="../../mfbase/mapfish/MapFish.js"></script> 
    1921    <script type="text/javascript" src="../examples.js"></script> 
    20      
     22 
    2123    <script src='http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js'></script> 
    2224    <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA05C9249WzNJ_bo8JW1_d1RR4mkyLzoxNxIarp_9bfNMlpzk1lBTKyrzDeVpecEf3n5k8eLOy20OHKg'></script> 
    2325    <script src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers"></script> 
    24      
    25         <style type="text/css"> 
    26         html, body { 
    27         font: normal 12px verdana; 
    28         margin: 0; 
    29         padding: 0; 
    30         border: 0 none; 
    31         overflow: hidden; 
    32         height: 100%; 
    33     } 
     26 
     27    <style type="text/css"> 
     28        html, body { 
     29            font: normal 12px verdana; 
     30            margin: 0; 
     31            padding: 0; 
     32            border: 0 none; 
     33            overflow: hidden; 
     34            height: 100%; 
     35        } 
    3436    </style> 
    35         <script type="text/javascript"> 
    36    
    37     // reference local blank image 
    38     Ext.BLANK_IMAGE_URL = '../../mfbase/ext/resources/images/default/s.gif'; 
    39    
    40     Ext.onReady(function() { 
    41          
    42         var options = { 
    43             projection: "EPSG:900913", 
    44             units: "m", 
    45             maxResolution: 156543.0339, 
    46             maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 
    47                                              20037508, 20037508.34) 
    48         }; 
    49         map = new OpenLayers.Map('center', options); 
     37    <script type="text/javascript"> 
     38 
     39        // reference local blank image 
     40        Ext.BLANK_IMAGE_URL = '../../mfbase/ext/resources/images/default/s.gif'; 
     41 
     42        Ext.onReady(function() { 
     43 
     44            var options = { 
     45                projection: "EPSG:900913", 
     46                units: "m", 
     47                maxResolution: 156543.0339, 
     48                maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 
     49                        20037508, 20037508.34) 
     50            }; 
     51            map = new OpenLayers.Map('center', options); 
    5052 
    51         // create Google Mercator layers 
    52         var gmap = new OpenLayers.Layer.Google( 
    53             "Google Streets", 
     53            // create Google Mercator layers 
     54            var gmap = new OpenLayers.Layer.Google( 
     55                    "Google Streets", 
    5456            {'sphericalMercator': true} 
    55         ); 
     57                    ); 
    5658 
    57         // create Yahoo layer 
    58         var yahoo = new OpenLayers.Layer.Yahoo( 
    59             "Yahoo Street", 
     59            // create Yahoo layer 
     60            var yahoo = new OpenLayers.Layer.Yahoo( 
     61                    "Yahoo Street", 
    6062            {'sphericalMercator': true} 
    61         ); 
    62         var yahoosat = new OpenLayers.Layer.Yahoo( 
    63             "Yahoo Sattelite", 
     63                    ); 
     64            var yahoosat = new OpenLayers.Layer.Yahoo( 
     65                    "Yahoo Sattelite", 
    6466            {'type': YAHOO_MAP_SAT, 'sphericalMercator': true} 
    65         ); 
    66         var yahoohyb = new OpenLayers.Layer.Yahoo( 
    67             "Yahoo Hybrid", 
     67                    ); 
     68            var yahoohyb = new OpenLayers.Layer.Yahoo( 
     69                    "Yahoo Hybrid", 
    6870            {'type': YAHOO_MAP_HYB, 'sphericalMercator': true} 
    69         ); 
     71                    ); 
    7072 
    71         // create OSM layer 
    72         var mapnik = new OpenLayers.Layer.TMS( 
    73             "OpenStreetMap", 
    74             "http://tile.openstreetmap.org/", 
     73            // create OSM layer 
     74            var mapnik = new OpenLayers.Layer.TMS( 
     75                    "OpenStreetMap", 
     76                    "http://tile.openstreetmap.org/", 
    7577            { 
    7678                type: 'png', getURL: osm_getTileURL, 
    7779                displayOutsideMaxExtent: true 
    7880            } 
    79         ); 
     81                    ); 
    8082 
    81         map.addLayers([gmap, yahoo, yahoosat, yahoohyb, mapnik]); 
    82                             
    83         map.setCenter(new OpenLayers.LonLat(17, 2), 2); 
     83            map.addLayers([gmap, yahoo, yahoosat, yahoohyb, mapnik]); 
     84 
     85            map.setCenter(new OpenLayers.LonLat(17, 2), 2); 
    8486 
    85          
    86         var mapcomponent = new mapfish.widgets.MapComponent({map: map}); 
    87         
    88         var viewport = new Ext.Viewport({ 
    89             layout:'border', 
    90             items:[ 
    91                 new Ext.BoxComponent({ // raw 
    92                     region: 'north', 
    93                     el: 'north', 
    94                     height: 32 
    95                 }),{ 
    96                     region: 'south', 
    97                     contentEl: 'south', 
    98                     split: true, 
    99                     height: 100, 
    100                     minSize: 100, 
    101                     maxSize: 200, 
    102                     collapsible: true, 
    103                     title: 'South', 
    104                     margins: '0 0 0 0' 
    105                 },{ 
    106                     region: 'west', 
    107                     id: 'west-panel', 
    108                     title: 'West', 
    109                     split: true, 
    110                     width: 200, 
    111                     minSize: 175, 
    112                     maxSize: 400, 
    113                     collapsible: true, 
    114                     margins: '0 0 0 5', 
    115                     layout: 'accordion', 
    116                     layoutConfig:{ 
    117                         animate: true 
    118                     }, 
    119                     items: [{ 
    120                         title: 'Layers', 
    121                         region: 'north', 
    122                         height: 100, 
    123                         xtype: 'layertree', 
    124                         map: map 
    125                     },{ 
    126                         title: 'Settings', 
    127                         html: '<p>Some settings in here.</p>', 
    128                         border: false, 
    129                         iconCls: 'settings' 
    130                     }] 
    131                 },{ 
    132                     region: 'center', 
    133                     title: 'Map', 
    134                     layout: 'fit', 
    135                     items: mapcomponent 
    136                 } 
    137              ] 
    138         }); 
    139     }); 
    140      
     87            var mapPanel = new GeoExt.MapPanel({map: map}); 
     88 
     89            var viewport = new Ext.Viewport({ 
     90                layout:'border', 
     91                items:[ 
     92                    new Ext.BoxComponent({ // raw 
     93                        region: 'north', 
     94                        el: 'north', 
     95                        height: 32, 
     96                        margins: {left: 5,top: 5} 
     97                    }),{ 
     98                        region: 'south', 
     99                        contentEl: 'south', 
     100                        split: true, 
     101                        height: 100, 
     102                        minSize: 100, 
     103                        maxSize: 200, 
     104                        collapsible: true, 
     105                        title: 'South', 
     106                        margins: '0 0 0 0' 
     107                    },{ 
     108                        region: 'west', 
     109                        id: 'west-panel', 
     110                        title: 'West', 
     111                        split: true, 
     112                        width: 200, 
     113                        minSize: 175, 
     114                        maxSize: 400, 
     115                        collapsible: true, 
     116                        margins: '0 0 0 5', 
     117                        layout: 'accordion', 
     118                        layoutConfig:{ 
     119                            animate: true 
     120                        }, 
     121                        items: [ 
     122                            { 
     123                                title: 'Layers', 
     124                                region: 'north', 
     125                                height: 100, 
     126                                xtype: 'layertree', 
     127                                map: map 
     128                            }, 
     129                            { 
     130                                title: 'Settings', 
     131                                html: '<p>Some settings in here.</p>', 
     132                                border: false, 
     133                                iconCls: 'settings' 
     134                            } 
     135                        ] 
     136                    },{ 
     137                        region: 'center', 
     138                        title: 'Map', 
     139                        layout: 'fit', 
     140                        items: mapPanel 
     141                    } 
     142                ] 
     143            }); 
     144        }); 
     145 
    141146 
    142     function osm_getTileURL(bounds) { 
    143         var res = this.map.getResolution(); 
    144         var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w)); 
    145         var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h)); 
    146         var z = this.map.getZoom(); 
    147         var limit = Math.pow(2, z); 
    148          
    149         if (y < 0 || y >= limit) { 
    150             return OpenLayers.Util.getImagesLocation() + "404.png"; 
    151         } else { 
    152             x = ((x % limit) + limit) % limit;             
    153             return this.url + z + "/" + x + "/" + y + "." + this.type; 
    154         } 
    155     } 
    156         </script> 
     147        function osm_getTileURL(bounds) { 
     148            var res = this.map.getResolution(); 
     149            var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w)); 
     150            var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h)); 
     151            var z = this.map.getZoom(); 
     152            var limit = Math.pow(2, z); 
     153 
     154            if (y < 0 || y >= limit) { 
     155                return OpenLayers.Util.getImagesLocation() + "404.png"; 
     156            } else { 
     157                x = ((x % limit) + limit) % limit; 
     158                return this.url + z + "/" + x + "/" + y + "." + this.type; 
     159            } 
     160        } 
     161    </script> 
    157162</head> 
    158163<body> 
    159   <div id="north"> 
    160     <p>MapFish</p> 
    161   </div> 
    162   <div id="center"> 
    163   </div> 
    164   <div id="south"> 
     164<div id="north"> 
     165    <h1 style="font-size:20px;color:#15428B;font-family:tahoma,arial,verdana,sans-serif">MapFish: Map panel in spherical 
     166        mercator example</h1> 
     167</div> 
     168<div id="center"> 
     169</div> 
     170<div id="south"> 
    165171    <p>south - generally for informational stuff, also could be for status bar</p> 
    166   </div> 
     172</div> 
    167173 
    168  </body> 
     174</body> 
    169175</html> 

  • MapFish/client/examples/map/layout.html

     
    11<!DOCTYPE html> 
    22<html> 
    33<head> 
    4   <title>Map in a Complex Layout</title> 
    5     <link rel="stylesheet" type="text/css" href="../../mfbase/ext/resources/css/ext-all.css" /> 
     4    <title>Map in a Complex Layout</title> 
     5    <link rel="stylesheet" type="text/css" href="../../mfbase/ext/resources/css/ext-all.css"/> 
    66 
    77    <script type="text/javascript" src="../../mfbase/openlayers/lib/Firebug/firebug.js"></script> 
    88    <script type="text/javascript" src="../../mfbase/openlayers/lib/OpenLayers.js"></script> 
    … …  
    1010    <script type="text/javascript" src="../../mfbase/ext/adapter/ext/ext-base.js"></script> 
    1111    <script type="text/javascript" src="../../mfbase/ext/ext-all-debug.js"></script> 
    1212 
     13    <script type="text/javascript" src="../../mfbase/geoext/lib/GeoExt.js"></script> 
     14 
    1315    <script type="text/javascript"> 
    14       // Because of a bug in Firefox 2 we need to specify the MapFish base path. 
    15       // See https://bugzilla.mozilla.org/show_bug.cgi?id=351282 
    16       var gMfLocation = "../../mfbase/mapfish/"; 
     16        // Because of a bug in Firefox 2 we need to specify the MapFish base path. 
     17        // See https://bugzilla.mozilla.org/show_bug.cgi?id=351282 
     18        var gMfLocation = "../../mfbase/mapfish/"; 
    1719    </script> 
    1820    <script type="text/javascript" src="../../mfbase/mapfish/MapFish.js"></script> 
    1921    <script type="text/javascript" src="../examples.js"></script> 
    20      
     22 
    2123    <style type="text/css"> 
    22     html, body { 
    23         font: normal 12px verdana; 
    24         margin: 0; 
    25         padding: 0; 
    26         border: 0 none; 
    27         overflow: hidden; 
    28         height: 100%; 
    29     } 
     24        html, body { 
     25            font: normal 12px verdana; 
     26            margin: 0; 
     27            padding: 0; 
     28            border: 0 none; 
     29            overflow: hidden; 
     30            height: 100%; 
     31        } 
    3032    </style> 
    3133    <script type="text/javascript"> 
    32    
    33     // reference local blank image 
    34     Ext.BLANK_IMAGE_URL = '../../mfbase/ext/resources/images/default/s.gif'; 
    35    
    36     Ext.onReady(function() { 
    37          
    38         var map = new OpenLayers.Map($('center')); 
     34 
     35        // reference local blank image 
     36        Ext.BLANK_IMAGE_URL = '../../mfbase/ext/resources/images/default/s.gif'; 
     37 
     38        Ext.onReady(function() { 
     39 
     40            var map = new OpenLayers.Map($('center')); 
    3941 
    40         var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",  
    41             "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}, {buffer: 0}); 
     42            var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", 
     43                    "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}, {buffer: 0}); 
    4244 
    43         map.addLayers([wms]); 
    44         map.addControl(new OpenLayers.Control.LayerSwitcher()); 
    45         map.setCenter(new OpenLayers.LonLat(17, 2), 2); 
     45            map.addLayers([wms]); 
     46            map.addControl(new OpenLayers.Control.LayerSwitcher()); 
     47            map.setCenter(new OpenLayers.LonLat(17, 2), 2); 
    4648 
    47         var viewport = new Ext.Viewport({ 
    48             layout:'border', 
    49             items:[ 
    50                 new Ext.BoxComponent({ // raw 
    51                     region: 'north', 
    52                     el: 'north', 
    53                     height: 32 
    54                 }),{ 
    55                     region: 'south', 
    56                     contentEl: 'south', 
    57                     split: true, 
    58                     height: 100, 
    59                     minSize: 100, 
    60                     maxSize: 200, 
    61                     collapsible: true, 
    62                     title: 'South', 
    63                     margins: '0 0 0 0' 
    64                 },{ 
    65                     region: 'west', 
    66                     id: 'west-panel', 
    67                     title: 'West', 
    68                     split: true, 
    69                     width: 200, 
    70                     minSize: 175, 
    71                     maxSize: 400, 
    72                     collapsible: true, 
    73                     margins: '0 0 0 5', 
    74                     layout: 'accordion', 
    75                     layoutConfig:{ 
    76                         animate: true 
    77                     }, 
    78                     items: [{ 
    79                         contentEl: 'west', 
    80                         title: 'Layer Tree', 
    81                         border: false, 
    82                         xtype: 'layertree', 
    83                         map: map 
    84                     },{ 
    85                         title: 'Settings', 
    86                         html: '<p>Some settings in here.</p>', 
    87                         border: false 
    88                     },{ 
    89                         id: 'recenter-widget', 
    90                         title: 'Recenter', 
    91                         xtype: 'coordsrecenter', 
    92                         map: map, 
    93                         labelAlign: 'top', 
    94                         hideMode: 'offsets', 
    95                         showCenter: true,      // boolean, indicates if a symbol must be shown at the new center 
    96                         scales: [1000000, 2500000, 5000000, 10000000, 25000000], 
    97                         bodyStyle: 'padding: 5px', 
    98                         defaults: { 
    99                            width: 170 
    100                         } 
    101                     }] 
    102                 },{ 
    103                     region: 'center', 
    104                     title: 'Map', 
    105                     layout: 'fit', 
    106                     xtype: 'mapcomponent', 
    107                     map: map 
    108                 } 
    109              ] 
    110         }); 
    111     }); 
     49            var viewport = new Ext.Viewport({ 
     50                layout:'border', 
     51                items:[ 
     52                    new Ext.BoxComponent({ // raw 
     53                        region: 'north', 
     54                        el: 'north', 
     55                        height: 32, 
     56                        margins: {left: 5,top: 5} 
     57                    }),{ 
     58                        region: 'south', 
     59                        contentEl: 'south', 
     60                        split: true, 
     61                        height: 100, 
     62                        minSize: 100, 
     63                        maxSize: 200, 
     64                        collapsible: true, 
     65                        title: 'South', 
     66                        margins: '0 0 0 0' 
     67                    },{ 
     68                        region: 'west', 
     69                        id: 'west-panel', 
     70                        title: 'West', 
     71                        split: true, 
     72                        width: 200, 
     73                        minSize: 175, 
     74                        maxSize: 400, 
     75                        collapsible: true, 
     76                        margins: '0 0 0 5', 
     77                        layout: 'accordion', 
     78                        layoutConfig:{ 
     79                            animate: true 
     80                        }, 
     81                        items: [ 
     82                            { 
     83                                contentEl: 'west', 
     84                                title: 'Layer Tree', 
     85                                border: false, 
     86                                xtype: 'layertree', 
     87                                map: map 
     88                            }, 
     89                            { 
     90                                title: 'Settings', 
     91                                html: '<p>Some settings in here.</p>', 
     92                                border: false 
     93                            }, 
     94                            { 
     95                                id: 'recenter-widget', 
     96                                title: 'Recenter', 
     97                                xtype: 'coordsrecenter', 
     98                                map: map, 
     99                                labelAlign: 'top', 
     100                                hideMode: 'offsets', 
     101                                showCenter: true, 
     102                                // boolean, indicates if a symbol must be shown at the new center 
     103                                scales: [1000000, 2500000, 5000000, 10000000, 25000000], 
     104                                bodyStyle: 'padding: 5px', 
     105                                defaults: { 
     106                                    width: 170 
     107                                } 
     108                            } 
     109                        ] 
     110                    },{ 
     111                        region: 'center', 
     112                        title: 'Map', 
     113                        layout: 'fit', 
     114                        xtype: 'gx_mappanel', 
     115                        map: map 
     116                    } 
     117                ] 
     118            }); 
     119        }); 
    112120    </script> 
    113121</head> 
    114122<body> 
    115   <div id="west"></div> 
    116   <div id="north"> 
    117     <p>MapFish</p> 
    118   </div> 
    119   <div id="center"></div> 
    120   <div id="south"> 
     123<div id="west"></div> 
     124<div id="north"> 
     125    <h1 style="font-size:20px;color:#15428B;font-family:tahoma,arial,verdana,sans-serif">MapFish: Map panel example</h1> 
     126</div> 
     127<div id="center"></div> 
     128<div id="south"> 
    121129    <p>south - generally for informational stuff, also could be for status bar</p> 
    122   </div> 
     130</div> 
    123131 
    124  </body> 
     132</body> 
    125133</html> 

  • MapFish/client/examples/map/window.html

     
    11<html> 
    22<head> 
    3   <title>Map in a Complex Layout</title> 
    4     <link rel="stylesheet" type="text/css" href="../../mfbase/ext/resources/css/ext-all.css" /> 
     3    <title>Map in a Complex Layout</title> 
     4    <link rel="stylesheet" type="text/css" href="../../mfbase/ext/resources/css/ext-all.css"/> 
    55 
    66    <script type="text/javascript" src="../../mfbase/openlayers/lib/Firebug/firebug.js"></script> 
    77    <script type="text/javascript" src="../../mfbase/openlayers/lib/OpenLayers.js"></script> 
    … …  
    99    <script type="text/javascript" src="../../mfbase/ext/adapter/ext/ext-base.js"></script> 
    1010    <script type="text/javascript" src="../../mfbase/ext/ext-all-debug.js"></script> 
    1111 
     12    <script type="text/javascript" src="../../mfbase/geoext/lib/GeoExt.js"></script> 
     13 
    1214    <script type="text/javascript"> 
    13       // Because of a bug in Firefox 2 we need to specify the MapFish base path. 
    14       // See https://bugzilla.mozilla.org/show_bug.cgi?id=351282 
    15       var gMfLocation = "../../mfbase/mapfish/"; 
     15        // Because of a bug in Firefox 2 we need to specify the MapFish base path. 
     16        // See https://bugzilla.mozilla.org/show_bug.cgi?id=351282 
     17        var gMfLocation = "../../mfbase/mapfish/"; 
    1618    </script> 
    1719    <script type="text/javascript" src="../../mfbase/mapfish/MapFish.js"></script> 
    1820    <script type="text/javascript" src="../examples.js"></script> 
    19      
    20         <style type="text/css"> 
    21         html, body { 
    22         font: normal 12px verdana; 
    23         margin: 0; 
    24         padding: 0; 
    25         border: 0 none; 
    26         overflow: hidden; 
    27         height: 100%; 
    28     } 
     21 
     22    <style type="text/css"> 
     23        html, body { 
     24            font: normal 12px verdana; 
     25            margin: 0; 
     26            padding: 0; 
     27            border: 0 none; 
     28            overflow: hidden; 
     29            height: 100%; 
     30        } 
     31 
     32        #north { 
     33            margin-top: 5px; 
     34            margin-left: 5px; 
     35        } 
    2936    </style> 
    30         <script type="text/javascript"> 
    31    
    32     // reference local blank image 
    33     Ext.BLANK_IMAGE_URL = '../../mfbase/ext/resources/images/default/s.gif'; 
    34    
    35     Ext.onReady(function(){ 
    36          
    37         var map = new OpenLayers.Map('olmap'); 
     37    <script type="text/javascript"> 
     38 
     39        // reference local blank image 
     40        Ext.BLANK_IMAGE_URL = '../../mfbase/ext/resources/images/default/s.gif'; 
     41 
     42        Ext.onReady(function() { 
     43 
     44            var map = new OpenLayers.Map('olmap'); 
    3845 
    39         var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",  
    40             "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}, {buffer: 0}); 
     46            var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", 
     47                    "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}, {buffer: 0}); 
    4148 
    42         map.addLayers([wms]); 
    43         map.addControl(new OpenLayers.Control.LayerSwitcher()); 
    44         map.setCenter(new OpenLayers.LonLat(17, 2), 2); 
    45              
    46         var window = new Ext.Window({ 
    47             title: 'Map', 
    48             width: 500, 
    49             height: 300, 
    50             minWidth: 300, 
    51             minHeight: 200, 
    52             layout: 'fit', 
    53             plain: true, 
    54             bodyStyle: 'padding:5px;', 
    55             items: [{ 
    56                 xtype: 'mapcomponent', 
    57                 map: map 
    58             }] 
    59         }); 
    60         window.show(); 
    61          
    62          
    63         var store = new Ext.data.SimpleStore({ 
    64             fields: ['value', 'text', 'bbox'], 
    65             data : [['OC', 'Oceana', new OpenLayers.Bounds(56.0234375, -72.53125, 214.2265625, 32.9375)], 
     49            map.addLayers([wms]); 
     50            map.addControl(new OpenLayers.Control.LayerSwitcher()); 
     51            map.setCenter(new OpenLayers.LonLat(17, 2), 2); 
     52 
     53            var window = new Ext.Window({ 
     54                title: 'Map', 
     55                width: 500, 
     56                height: 300, 
     57                minWidth: 300, 
     58                minHeight: 200, 
     59                layout: 'fit', 
     60                plain: true, 
     61                bodyStyle: 'padding:5px;', 
     62                items: [ 
     63                    { 
     64                        xtype: 'gx_mappanel', 
     65                        map: map 
     66                    } 
     67                ] 
     68            }); 
     69            window.show(); 
     70 
     71 
     72            var store = new Ext.data.SimpleStore({ 
     73                fields: ['value', 'text', 'bbox'], 
     74                data : [ 
     75                    ['OC', 'Oceana', new OpenLayers.Bounds(56.0234375, -72.53125, 214.2265625, 32.9375)], 
    6676                    ['NA', 'North America', new OpenLayers.Bounds(-186.37890625, -2.21875, -28.17578125, 103.25)], 
    6777                    ['SA', 'South America', new OpenLayers.Bounds(-146.828125, -71.828125, 11.375, 33.640625)], 
    6878                    ['AF', 'Africa', new OpenLayers.Bounds(-58.9375, -51.7890625, 99.265625, 53.6796875)], 
    6979                    ['EU', 'Europe', new OpenLayers.Bounds(-23.078125, 26.2578125, 56.0234375, 78.9921875)], 
    70                     ['AS', 'Asia', new OpenLayers.Bounds(15.59375, -21.90625, 173.796875, 83.5625)]] 
    71         }); 
    72          
    73         var window = new Ext.Window({ 
    74             title: 'Shortcuts', 
    75             width: 200, 
    76             height: 100, 
    77             minWidth: 200, 
    78             minHeight: 100, 
    79             layout: 'fit', 
    80             plain: true, 
    81             bodyStyle: 'padding: 5px;', 
    82             items: [{ 
    83                 xtype: 'shortcuts', 
    84                 map: map, 
    85                 store: store, 
    86                 templates: { 
    87                     header: new Ext.Template("Choose a continent in the list"), 
    88                     footer: new Ext.Template("The map will automatically center to this location") 
    89                 } 
    90             }] 
    91         }); 
    92         window.setPagePosition(20, 40); 
     80                    ['AS', 'Asia', new OpenLayers.Bounds(15.59375, -21.90625, 173.796875, 83.5625)] 
     81                ] 
     82            }); 
     83 
     84            var window = new Ext.Window({ 
     85                title: 'Shortcuts', 
     86                width: 200, 
     87                height: 100, 
     88                minWidth: 200, 
     89                minHeight: 100, 
     90                layout: 'fit', 
     91                plain: true, 
     92                bodyStyle: 'padding: 5px;', 
     93                items: [ 
     94                    { 
     95                        xtype: 'shortcuts', 
     96                        map: map, 
     97                        store: store, 
     98                        templates: { 
     99                            header: new Ext.Template("Choose a continent in the list"), 
     100                            footer: new Ext.Template("The map will automatically center to this location") 
     101                        } 
     102                    } 
     103                ] 
     104            }); 
     105            window.setPagePosition(20, 40); 
    93106 
    94         window.show(); 
    95     }); 
    96         </script> 
     107            window.show(); 
     108        }); 
     109    </script> 
    97110</head> 
    98111<body> 
    99   <!-- 
    100       body element must not start with text to prevent IE bug 
    101       http://extjs.com/forum/showthread.php?t=7912&highlight=createRange 
    102   --> 
    103   <h1>MapFish example</h1> 
    104   This example shows how to use the MapComponent class to integrate a OL map into a window layout. 
    105   <div id="olmap"> 
    106   </div> 
     112<!-- 
     113    body element must not start with text to prevent IE bug 
     114    http://extjs.com/forum/showthread.php?t=7912&highlight=createRange 
     115--> 
     116<div id="north"> 
     117    <h1 style="font-size:20px;color:#15428B;font-family:tahoma,arial,verdana,sans-serif">MapFish: Map panel example</h1> 
     118</div> 
     119<div id="olmap"> 
     120</div> 
    107121 
    108  </body> 
     122</body> 
    109123</html> 

  • MapFish/client/examples/recenter/index.html

     
    11<!DOCTYPE html> 
    22<html> 
    33<head> 
    4   <title>Recenter examples</title> 
     4    <title>Recenter examples</title> 
    55</head> 
    66<body> 
    7   <h1 class="page-title">Recenter examples</h1> 
    8   <div id="content"> 
     7<h1 class="page-title">Recenter examples</h1> 
     8 
     9<div id="content"> 
    910    <ul> 
    10       <li><a href="basic.html">Basic recenter example (DataField widget)</a></li> 
     11        <li><a href="basic.html">Basic recenter example (DataField widget)</a></li> 
    1112    </ul> 
    12   </div> 
     13</div> 
    1314</body> 
    1415</html> 
    1516 

  • MapFish/client/examples/search/c2corg.html

     
    11<!DOCTYPE html> 
    22<html> 
    3   <head> 
     3<head> 
    44    <title>Search</title> 
    5     <link rel="stylesheet" type="text/css" href="../../mfbase/ext/resources/css/ext-all.css" /> 
     5    <link rel="stylesheet" type="text/css" href="../../mfbase/ext/resources/css/ext-all.css"/> 
    66 
    77    <script type="text/javascript" src="../../mfbase/openlayers/lib/Firebug/firebug.js"></script> 
    88    <script type="text/javascript" src="../../mfbase/openlayers/lib/OpenLayers.js"></script> 
    99 
    1010    <script type="text/javascript" src="../../mfbase/ext/adapter/ext/ext-base.js"></script> 
    1111    <script type="text/javascript" src="../../mfbase/ext/ext-all-debug.js"></script> 
    12                      
     12 
    1313 
    1414    <script type="text/javascript"> 
    15       // Because of a bug in Firefox 2 we need to specify the MapFish base path. 
    16       // See https://bugzilla.mozilla.org/show_bug.cgi?id=351282 
    17       var gMfLocation = "../../mfbase/mapfish/"; 
     15        // Because of a bug in Firefox 2 we need to specify the MapFish base path. 
     16        // See https://bugzilla.mozilla.org/show_bug.cgi?id=351282 
     17        var gMfLocation = "../../mfbase/mapfish/"; 
    1818    </script> 
    1919    <script type="text/javascript" src="../../mfbase/mapfish/MapFish.js"></script> 
    2020    <script type="text/javascript" src="../examples.js"></script> 
    … …  
    2929        Ext.onReady(function() { 
    3030 
    3131            var vectorStyle = OpenLayers.Util.extend( 
    32                 {}, OpenLayers.Feature.Vector.style['default'] 
    33             ); 
     32            {}, OpenLayers.Feature.Vector.style['default'] 
     33                    ); 
    3434            vectorStyle.externalGraphic = "AQUA.png"; 
    3535            vectorStyle.graphicWidth = 20; 
    3636            vectorStyle.graphicHeight = 20; 
    … …  
    4343                865124.6923828125, 432562.34619140625, 216281.17309570312, 108140.58654785156, 
    4444                54070.29327392578 
    4545            ]; 
    46          
     46 
    4747            var options = { 
    4848                projection: "EPSG:4326", 
    49                 controls: [new OpenLayers.Control.Navigation()] ,  
     49                controls: [new OpenLayers.Control.Navigation()] , 
    5050                maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90), 
    5151                scales: scales 
    5252            }; 
    53          
     53 
    5454            map = new OpenLayers.Map('map', options); 
    5555 
    5656            var layer; 
    57              
    58             layer = new OpenLayers.Layer.WMS("OpenLayers WMS",  
    59                 "http://labs.metacarta.com/wms/vmap0", 
    60                 {layers: 'basic'},  
    61                 {isBaseLayer: true} 
    62             ); 
     57 
     58            layer = new OpenLayers.Layer.WMS("OpenLayers WMS", 
     59                    "http://labs.metacarta.com/wms/vmap0", 
     60            {layers: 'basic'}, 
     61            {isBaseLayer: true} 
     62                    ); 
    6363            layer.setVisibility(true); 
    6464            map.addLayer(layer); 
    6565 
    66             layer = new OpenLayers.Layer.WMS( "World Map",  
    67                 "http://world.freemap.in/cgi-bin/mapserv?",  
    68                 { 
    69                     map: '/www/freemap.in/world/map/factbooktrans.map', 
    70                     transparent: true, 
    71                     layers: 'factbook', 
    72                     format: 'image/png' 
    73                 } 
    74             ); 
     66            layer = new OpenLayers.Layer.WMS("World Map", 
     67                    "http://world.freemap.in/cgi-bin/mapserv?", 
     68            { 
     69                map: '/www/freemap.in/world/map/factbooktrans.map', 
     70                transparent: true, 
     71                layers: 'factbook', 
     72                format: 'image/png' 
     73            } 
     74                    ); 
    7575            layer.setVisibility(false); 
    7676            map.addLayer(layer); 
    77            
     77 
    7878            layer = new OpenLayers.Layer.WMS("Summits", 
    79                 "http://demo.mapfish.org/mapfishsample/trunk/wms?", 
    80                 {layers: ['summits'], format: 'image/png', transparent: true, 
    81                  singleTile: true} 
    82             ); 
     79                    "http://demo.mapfish.org/mapfishsample/trunk/wms?", 
     80            {layers: ['summits'], format: 'image/png', transparent: true, 
     81                singleTile: true} 
     82                    ); 
    8383            layer.setVisibility(true); 
    84             map.addLayer(layer);   
     84            map.addLayer(layer); 
    8585 
    8686            vectorLayer = new OpenLayers.Layer.Vector("vector", { 
    8787                style: vectorStyle, 
    8888                displayInLayerSwitcher: false 
    8989            }); 
    9090            map.addLayer(vectorLayer); 
    91          
    92             map.setCenter(new OpenLayers.LonLat(5,45), 6); 
     91 
     92            map.setCenter(new OpenLayers.LonLat(5, 45), 6); 
    9393            map.addControl(new OpenLayers.Control.PanZoomBar()); 
    9494 
    9595            // we need to wrap the MapFish protocol in a trigger event 
    … …  
    113113 
    114114            map.addControl(searcher); 
    115115 
    116             var tree = new mapfish.widgets.LayerTree({map: map,  
    117                                                       useArrows: true, 
    118                                                       el: 'tree'}); 
     116            var tree = new mapfish.widgets.LayerTree({map: map, 
     117                useArrows: true, 
     118                el: 'tree'}); 
    119119            tree.render(); 
    120120 
    121121        }); 
    122122 
    123        function activate() { 
    124            var checked = document.getElementById("active").checked; 
    125            if (checked) { 
    126                searcher.activate(); 
    127            } else { 
    128                searcher.deactivate(); 
    129            } 
    130        } 
     123        function activate() { 
     124            var checked = document.getElementById("active").checked; 
     125            if (checked) { 
     126                searcher.activate(); 
     127            } else { 
     128                searcher.deactivate(); 
     129            } 
     130        } 
    131131 
    132      </script> 
    133      <style type="text/css"> 
     132    </script> 
     133    <style type="text/css"> 
    134134        html, body { 
    135           font-family: arial,tahoma,helvetica,sans-serif; 
    136           font-size: 14px; 
    137           font-size-adjust: none; 
    138           font-style: normal; 
    139           font-variant: normal; 
    140           font-weight: normal; 
    141           line-height: normal; 
     135            font-family: arial, tahoma, helvetica, sans-serif; 
     136            font-size: 14px; 
     137            font-size-adjust: none; 
     138            font-style: normal; 
     139            font-variant: normal; 
     140            font-weight: normal; 
     141            line-height: normal; 
    142142        } 
     143 
    143144        .float-left { 
    144           float: left; 
    145           margin-left: 20px; 
     145            float: left; 
     146            margin-left: 20px; 
    146147        } 
     148 
    147149        .clear-left { 
    148           clear: left; 
     150            clear: left; 
    149151        } 
     152 
    150153        #map { 
    151           width: 600px; 
    152           height: 400px; 
    153           border: 1px solid black; 
     154            width: 600px; 
     155            height: 400px; 
     156            border: 1px solid black; 
    154157        } 
     158 
    155159        #tree { 
    156           height: 180px; 
    157           width: 200px; 
     160            height: 180px; 
     161            width: 200px; 
    158162        } 
     163 
    159164        #text { 
    160           width: 400px; 
     165            width: 400px; 
    161166        } 
    162      </style> 
    163   </head> 
     167        #north { 
     168            margin-top: 5px; 
     169            margin-left: 5px; 
     170        } 
     171    </style> 
     172</head> 
    164173 
    165   <body> 
    166     <h1 class="page-title">Search Example</h1> 
    167     <div id="content"> 
    168       <div id="map" class="float-left"></div> 
    169       <div class="float-left"> 
     174<body> 
     175<div id="north"> 
     176    <h1 style="font-size:20px;color:#15428B;font-family:tahoma,arial,verdana,sans-serif">MapFish: Search 
     177        example</h1> 
     178    <br> 
     179</div> 
     180 
     181<div id="content"> 
     182    <div id="map" class="float-left"></div> 
     183    <div class="float-left"> 
    170184        <div id="tree"></div> 
    171185        <div id="text"> 
    172           <p>Click on the map or draw a box to query the summits layer, check the checkbox to activate the searcher.</p> 
    173           <ul id="searcher"> 
    174             <li> 
    175               <input id="active" type="checkbox" name="hover" onchange="javascript:activate()" /> 
    176               <label for="active">Activate searcher</label> 
    177             </li> 
    178           </ul> 
     186            <p>Click on the map or draw a box to query the summits layer, check the checkbox to activate the 
     187                searcher.</p> 
     188            <ul id="searcher"> 
     189                <li> 
     190                    <input id="active" type="checkbox" name="hover" onchange="javascript:activate()"/> 
     191                    <label for="active">Activate searcher</label> 
     192                </li> 
     193            </ul> 
    179194        </div> 
    180       </div> 
    181       <div class="clear-left"></div> 
    182     </div> 
    183   </body> 
     195    </div> 
     196    <div class="clear-left"></div> 
     197</div> 
     198</body> 
    184199</html> 

  • MapFish/client/examples/shortcuts/index.html

     
    11<!DOCTYPE html> 
    22<html> 
    33<head> 
    4   <title>Tree examples</title> 
     4    <title>Tree examples</title> 
    55</head> 
    66<body> 
    7   <h1 class="page-title">Shortcuts examples</h1> 
    8   <div id="content"> 
     7<h1 class="page-title">Shortcuts examples</h1> 
     8 
     9<div id="content"> 
    910    <ul> 
    10       <li><a href="shortcuts.html">Simple shorcuts example</a></li> 
    11       <li><a href="layout.html">Shortcuts in a complex layout</a></li> 
     11        <li><a href="shortcuts.html">Simple shorcuts example</a></li> 
     12        <li><a href="layout.html">Shortcuts in a complex layout</a></li> 
    1213    </ul> 
    13   </div> 
     14</div> 
    1415</body> 
    1516</html> 
    1617 

  • MapFish/client/examples/recenter/basic.html

     
    11<!DOCTYPE html> 
    22<html> 
    33<head> 
    4 <title>Map recenter with autocompletion</title> 
    5 <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    6 <link rel="stylesheet" type="text/css" 
    7       href="../../mfbase/ext/resources/css/ext-all.css"/> 
    8 <link rel="stylesheet" type="text/css" 
    9       href="../../mfbase/mapfish/mapfish.css"/> 
     4    <title>Map recenter with autocompletion</title> 
     5    <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     6    <link rel="stylesheet" type="text/css" 
     7          href="../../mfbase/ext/resources/css/ext-all.css"/> 
     8    <link rel="stylesheet" type="text/css" 
     9          href="../../mfbase/mapfish/mapfish.css"/> 
    1010 
    11 <script type="text/javascript" 
    12         src="../../mfbase/openlayers/lib/OpenLayers.js"></script> 
     11    <script type="text/javascript" 
     12            src="../../mfbase/openlayers/lib/OpenLayers.js"></script> 
    1313 
    14 <script type="text/javascript" 
    15         src="../../mfbase/ext/adapter/ext/ext-base.js"></script> 
    16 <script type="text/javascript" src="../../mfbase/ext/ext-all-debug.js"></script> 
     14    <script type="text/javascript" 
     15            src="../../mfbase/ext/adapter/ext/ext-base.js"></script> 
     16    <script type="text/javascript" src="../../mfbase/ext/ext-all-debug.js"></script> 
    1717 
    18 <script type="text/javascript" 
    19         src="../../mfbase/geoext/lib/GeoExt.js"></script> 
     18    <script type="text/javascript" 
     19            src="../../mfbase/geoext/lib/GeoExt.js"></script> 
    2020 
    21 <script type="text/javascript"> 
    22   // Because of a bug in Firefox 2 we need to specify the MapFish base path. 
    23   // See https://bugzilla.mozilla.org/show_bug.cgi?id=351282 
    24   var gMfLocation = "../../mfbase/mapfish/"; 
    25 </script> 
    26 <script type="text/javascript" src="../../mfbase/mapfish/MapFish.js"></script> 
    27 <script type="text/javascript" src="../examples.js"></script> 
     21    <script type="text/javascript"> 
     22        // Because of a bug in Firefox 2 we need to specify the MapFish base path. 
     23        // See https://bugzilla.mozilla.org/show_bug.cgi?id=351282 
     24        var gMfLocation = "../../mfbase/mapfish/"; 
     25    </script> 
     26    <script type="text/javascript" src="../../mfbase/mapfish/MapFish.js"></script> 
     27    <script type="text/javascript" src="../examples.js"></script> 
    2828 
    29 <style type="text/css"> 
    30   html, body { 
    31     font: normal 12px verdana; 
    32     margin: 0; 
    33     padding: 0; 
    34     border: 0 none; 
    35     overflow: hidden; 
    36     height: 100%; 
    37   } 
    38 </style> 
    39 <script type="text/javascript"> 
    40   // reference local blank image 
    41   Ext.BLANK_IMAGE_URL = '../../mfbase/ext/resources/images/default/s.gif'; 
    42   Ext.onReady(function() { 
     29    <style type="text/css"> 
     30        html, body { 
     31            font: normal 12px verdana; 
     32            margin: 0; 
     33            padding: 0; 
     34            border: 0 none; 
     35            overflow: hidden; 
     36            height: 100%; 
     37        } 
     38 
     39        #north { 
     40            margin-top: 5px; 
     41            margin-left: 5px; 
     42        } 
     43    </style> 
     44    <script type="text/javascript"> 
     45        // reference local blank image 
     46        Ext.BLANK_IMAGE_URL = '../../mfbase/ext/resources/images/default/s.gif'; 
     47        Ext.onReady(function() { 
    4348 
    44     var map = new OpenLayers.Map($('center')); 
     49            var map = new OpenLayers.Map($('center')); 
    4550 
    46     var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", 
    47             "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}, {buffer: 0}); 
    48     map.addLayers([wms]); 
     51            var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", 
     52                    "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}, {buffer: 0}); 
     53            map.addLayers([wms]); 
    4954 
    50     var viewport = new Ext.Viewport({ 
    51       layout:'border', 
    52       items:[ 
    53         new Ext.BoxComponent({ // raw 
    54           region: 'north', 
    55           el: 'north', 
    56           height: 32 
    57         }), 
    58         { 
    59           region: 'west', 
    60           id: 'west-panel', 
    61           title: 'West', 
    62           split: true, 
    63           width: 320, 
    64           minSize: 175, 
    65           maxSize: 400, 
    66           collapsible: true, 
    67           margins: '0 0 0 5', 
    68           layout: 'accordion', 
    69           defaults: { 
    70             collapsed: true 
    71           }, 
    72           layoutConfig:{ 
    73             animate: true, 
    74             activeOnTop: false 
    75           }, 
    76           items: [ 
    77             { 
    78               xtype: 'datafieldrecenter', 
    79               title: 'Recenter', 
    80               bodyStyle: 'padding: 7px;', 
    81               collapsed: false, 
    82               url: mapfish.SERVER_BASE_URL + "countries", 
    83               map: map, 
    84               fieldLabel: "Africa country", 
    85               displayField: "country" 
    86             } 
    87           ] 
    88         },{ 
    89             region: 'center', 
    90             title: 'Map', 
    91             layout: 'fit', 
    92             xtype: 'mapcomponent', 
    93             map: map 
    94         }] 
    95     }); 
     55            var viewport = new Ext.Viewport({ 
     56                layout:'border', 
     57                items:[ 
     58                    new Ext.BoxComponent({ // raw 
     59                        region: 'north', 
     60                        el: 'north', 
     61                        height: 32 
     62                    }), 
     63                    { 
     64                        region: 'west', 
     65                        id: 'west-panel', 
     66                        title: 'West', 
     67                        split: true, 
     68                        width: 320, 
     69                        minSize: 175, 
     70                        maxSize: 400, 
     71                        collapsible: true, 
     72                        margins: '0 0 0 5', 
     73                        layout: 'accordion', 
     74                        defaults: { 
     75                            collapsed: true 
     76                        }, 
     77                        layoutConfig:{ 
     78                            animate: true, 
     79                            activeOnTop: false 
     80                        }, 
     81                        items: [ 
     82                            { 
     83                                xtype: 'datafieldrecenter', 
     84                                title: 'Recenter', 
     85                                bodyStyle: 'padding: 7px;', 
     86                                collapsed: false, 
     87                                url: mapfish.SERVER_BASE_URL + "countries", 
     88                                map: map, 
     89                                fieldLabel: "Africa country", 
     90                                displayField: "country" 
     91                            } 
     92                        ] 
     93                    },{ 
     94                        region: 'center', 
     95                        title: 'Map', 
     96                        layout: 'fit', 
     97                        xtype: 'gx_mappanel', 
     98                        map: map 
     99                    }] 
     100            }); 
    96101 
    97     map.setCenter(new OpenLayers.LonLat(8.5, 0), 3); 
    98   }); 
    99 </script> 
     102            map.setCenter(new OpenLayers.LonLat(8.5, 0), 3); 
     103        }); 
     104    </script> 
    100105</head> 
    101106<body> 
    102   <div id="west"></div> 
    103   <div id="north"> 
    104     <p style="font-size:14pt" align="center">MapFish recenter</p> 
    105   </div> 
    106   <div id="center"></div> 
     107<div id="west"></div> 
     108<div id="north"> 
     109    <h1 style="font-size:20px;color:#15428B;font-family:tahoma,arial,verdana,sans-serif">MapFish: Recenter example</h1> 
     110</div> 
     111<div id="center"></div> 
    107112</body> 
    108113</html> 

  • MapFish/client/examples/geostat/index.html

     
    11<!DOCTYPE html> 
    22<html> 
    33<head> 
    4   <title>GeoStat examples</title> 
     4    <title>GeoStat examples</title> 
    55</head> 
    66<body> 
    7   <h1 class="page-title">GeoStat examples</h1> 
    8   <div id="content"> 
     7<h1 class="page-title">GeoStat examples</h1> 
     8 
     9<div id="content"> 
    910    <ul> 
    10       <li><a href="choropleths.html">Choropleths</a></li> 
    11       <li><a href="proportionalSymbols.html">Proportional Symbols</a></li> 
     11        <li><a href="choropleths.html">Choropleths</a></li> 
     12        <li><a href="proportionalSymbols.html">Proportional Symbols</a></li> 
    1213    </ul> 
    13   </div> 
     14</div> 
    1415 
    1516</body> 
    1617</html> 

  • MapFish/client/examples/shortcuts/layout.html

     
    11<!DOCTYPE html> 
    22<html> 
    33<head> 
    4   <title>Shortcuts example in a Complex Layout</title> 
    5     <link rel="stylesheet" type="text/css" href="../../mfbase/ext/resources/css/ext-all.css" /> 
     4    <title>Shortcuts example in a Complex Layout</title> 
     5    <link rel="stylesheet" type="text/css" href="../../mfbase/ext/resources/css/ext-all.css"/> 
    66 
    77    <script type="text/javascript" src="../../mfbase/openlayers/lib/Firebug/firebug.js"></script> 
    88    <script type="text/javascript" src="../../mfbase/openlayers/lib/OpenLayers.js"></script> 
    … …  
    1010    <script type="text/javascript" src="../../mfbase/ext/adapter/ext/ext-base.js"></script> 
    1111    <script type="text/javascript" src="../../mfbase/ext/ext-all-debug.js"></script> 
    1212 
     13    <script type="text/javascript" src="../../mfbase/geoext/lib/GeoExt.js"></script> 
     14 
    1315    <script type="text/javascript"> 
    14       // Because of a bug in Firefox 2 we need to specify the MapFish base path. 
    15       // See https://bugzilla.mozilla.org/show_bug.cgi?id=351282 
    16       var gMfLocation = "../../mfbase/mapfish/"; 
     16        // Because of a bug in Firefox 2 we need to specify the MapFish base path. 
     17        // See https://bugzilla.mozilla.org/show_bug.cgi?id=351282 
     18        var gMfLocation = "../../mfbase/mapfish/"; 
    1719    </script> 
    1820    <script type="text/javascript" src="../../mfbase/mapfish/MapFish.js"></script> 
    1921    <script type="text/javascript" src="../examples.js"></script> 
    20      
    21         <style type="text/css"> 
    22         html, body { 
    23         font:normal 12px verdana; 
    24         margin:0; 
    25         padding:0; 
    26         border:0 none; 
    27         overflow:hidden; 
    28         height:100%; 
    29     } 
     22 
     23    <style type="text/css"> 
     24        html, body { 
     25            font: normal 12px verdana; 
     26            margin: 0; 
     27            padding: 0; 
     28            border: 0 none; 
     29            overflow: hidden; 
     30            height: 100%; 
     31        } 
    3032    </style> 
    31         <script type="text/javascript"> 
    32    
    33     // reference local blank image 
    34     Ext.BLANK_IMAGE_URL = '../../mfbase/ext/resources/images/default/s.gif'; 
    35    
    36     Ext.onReady(function(){ 
    37         Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); 
    38          
    39          
    40         var map = new OpenLayers.Map('olmap'); 
     33    <script type="text/javascript"> 
     34 
     35        // reference local blank image 
     36        Ext.BLANK_IMAGE_URL = '../../mfbase/ext/resources/images/default/s.gif'; 
     37 
     38        Ext.onReady(function() { 
     39            Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); 
     40 
     41 
     42            var map = new OpenLayers.Map('olmap'); 
    4143 
    42         var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",  
    43             "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}, {buffer: 0}); 
     44            var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", 
     45                    "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}, {buffer: 0}); 
    4446 
    45         map.addLayers([wms]); 
    46         map.addControl(new OpenLayers.Control.LayerSwitcher()); 
    47         map.setCenter(new OpenLayers.LonLat(17, 2), 2); 
    48          
    49         var store = new Ext.data.SimpleStore({ 
    50             fields: ['value', 'text', 'bbox'], 
    51             data : [['OC', 'Oceana', new OpenLayers.Bounds(56.0234375, -72.53125, 214.2265625, 32.9375)], 
     47            map.addLayers([wms]); 
     48            map.addControl(new OpenLayers.Control.LayerSwitcher()); 
     49            map.setCenter(new OpenLayers.LonLat(17, 2), 2); 
     50 
     51            var store = new Ext.data.SimpleStore({ 
     52                fields: ['value', 'text', 'bbox'], 
     53                data : [ 
     54                    ['OC', 'Oceana', new OpenLayers.Bounds(56.0234375, -72.53125, 214.2265625, 32.9375)], 
    5255                    ['NA', 'North America', new OpenLayers.Bounds(-186.37890625, -2.21875, -28.17578125, 103.25)], 
    5356                    ['SA', 'South America', new OpenLayers.Bounds(-146.828125, -71.828125, 11.375, 33.640625)], 
    5457                    ['AF', 'Africa', new OpenLayers.Bounds(-58.9375, -51.7890625, 99.265625, 53.6796875)], 
    5558                    ['EU', 'Europe', new OpenLayers.Bounds(-23.078125, 26.2578125, 56.0234375, 78.9921875)], 
    56                     ['AS', 'Asia', new OpenLayers.Bounds(15.59375, -21.90625, 173.796875, 83.5625)]] 
    57         }); 
    58          
    59         var shortcuts = new mapfish.widgets.Shortcuts({ 
    60             map: map, 
    61             store: store, 
    62             templates: { 
    63                 header: new Ext.Template("Choose a continent in the list"), 
    64                 footer: new Ext.Template("The map will automatically center to this location") 
    65             } 
    66         }); 
    67         
    68         var viewport = new Ext.Viewport({ 
    69             layout:'border', 
    70             items:[ 
    71                 new Ext.BoxComponent({ // raw 
    72                     region:'north', 
    73                     el: 'north', 
    74                     height:32 
    75                 }),{ 
    76                     region:'south', 
    77                     contentEl: 'south', 
    78                     split:true, 
    79                     height: 100, 
    80                     minSize: 100, 
    81                     maxSize: 200, 
    82                     collapsible: true, 
    83                     title:'South', 
    84                     margins:'0 0 0 0' 
    85                 },{ 
    86                     region:'west', 
    87                     id:'west-panel', 
    88                     title:'West', 
    89                     split:true, 
    90                     width: 200, 
    91                     minSize: 175, 
    92                     maxSize: 400, 
    93                     collapsible: true, 
    94                     margins:'0 0 0 5', 
    95                     layout:'anchor', 
    96                     layoutConfig:{ 
    97                         animate:true 
    98                     }, 
    99                     items: [{ 
    100                         contentEl: 'west', 
    101                         title:'Navigation', 
    102                         border:false, 
    103                         iconCls:'nav' 
    104                     },{ 
    105                         title:'Settings', 
    106                         html:'<p>Some settings in here.</p>', 
    107                         border:false, 
    108                         iconCls:'settings' 
    109                     },{ 
    110                         title:'Shortcuts', 
    111                         items: shortcuts, 
    112                         border:false 
    113                     }] 
    114                 },{ 
    115                     region:'center', 
    116                     title: 'Map', 
    117                     layout: 'fit', 
    118                     xtype: 'mapcomponent', 
    119                     map: map 
    120                 } 
    121              ] 
    122         }); 
    123     }); 
    124         </script> 
     59                    ['AS', 'Asia', new OpenLayers.Bounds(15.59375, -21.90625, 173.796875, 83.5625)] 
     60                ] 
     61            }); 
     62 
     63            var shortcuts = new mapfish.widgets.Shortcuts({ 
     64                map: map, 
     65                store: store, 
     66                templates: { 
     67                    header: new Ext.Template("Choose a continent in the list"), 
     68                    footer: new Ext.Template("The map will automatically center to this location") 
     69                } 
     70            }); 
     71 
     72            var viewport = new Ext.Viewport({ 
     73                layout:'border', 
     74                items:[ 
     75                    new Ext.BoxComponent({ // raw 
     76                        region:'north', 
     77                        el: 'north', 
     78                        height:32, 
     79                        margins: {left: 5,top: 5} 
     80                    }),{ 
     81                        region:'south', 
     82                        contentEl: 'south', 
     83                        split:true, 
     84                        height: 100, 
     85                        minSize: 100, 
     86                        maxSize: 200, 
     87                        collapsible: true, 
     88                        title:'South', 
     89                        margins:'0 0 0 0' 
     90                    },{ 
     91                        region:'west', 
     92                        id:'west-panel', 
     93                        title:'West', 
     94                        split:true, 
     95                        width: 200, 
     96                        minSize: 175, 
     97                        maxSize: 400, 
     98                        collapsible: true, 
     99                        margins:'0 0 0 5', 
     100                        layout:'anchor', 
     101                        layoutConfig:{ 
     102                            animate:true 
     103                        }, 
     104                        items: [ 
     105                            { 
     106                                contentEl: 'west', 
     107                                title:'Navigation', 
     108                                border:false, 
     109                                iconCls:'nav' 
     110                            }, 
     111                            { 
     112                                title:'Settings', 
     113                                html:'<p>Some settings in here.</p>', 
     114                                border:false, 
     115                                iconCls:'settings' 
     116                            }, 
     117                            { 
     118                                title:'Shortcuts', 
     119                                items: shortcuts, 
     120                                border:false 
     121                            } 
     122                        ] 
     123                    },{ 
     124                        region:'center', 
     125                        title: 'Map', 
     126                        layout: 'fit', 
     127                        xtype: 'gx_mappanel', 
     128                        map: map 
     129                    } 
     130                ] 
     131            }); 
     132        }); 
     133    </script> 
    125134</head> 
    126135<body> 
    127   <div id="west"> 
     136<div id="west"> 
    128137    <p>Hi. I'm the west panel.</p> 
    129   </div> 
    130   <div id="north"> 
    131     <p>MapFish</p> 
    132   </div> 
    133   <div id="olmap"> 
    134   </div> 
    135   <div id="south"> 
     138</div> 
     139<div id="north"> 
     140    <h1 style="font-size:20px;color:#15428B;font-family:tahoma,arial,verdana,sans-serif">MapFish: Shortcuts 
     141        example</h1> 
     142</div> 
     143<div id="olmap"> 
     144</div> 
     145<div id="south"> 
    136146    <p>south - generally for informational stuff, also could be for status bar</p> 
    137   </div> 
     147</div> 
    138148 
    139  </body> 
     149</body> 
    140150</html> 

  • MapFish/client/examples/geostat/proportionalSymbols.html

     
    11<!DOCTYPE html> 
    22<html xmlns="http://www.w3.org/1999/xhtml"> 
    3   <head> 
     3<head> 
    44    <title>Proportional symbols</title> 
    5     <link rel="stylesheet" type="text/css" href="../../mfbase/ext/resources/css/ext-all.css" /> 
     5    <link rel="stylesheet" type="text/css" href="../../mfbase/ext/resources/css/ext-all.css"/> 
    66 
    77    <script type="text/javascript" src="../../mfbase/openlayers/lib/Firebug/firebug.js"></script> 
    88    <script type="text/javascript" src="../../mfbase/openlayers/lib/OpenLayers.js"></script> 
    99 
    1010    <script type="text/javascript" src="../../mfbase/ext/adapter/ext/ext-base.js"></script> 
    1111    <script type="text/javascript" src="../../mfbase/ext/ext-all-debug.js"></script> 
    12      
     12 
    1313    <script type="text/javascript"> 
    14       // Because of a bug in Firefox 2 we need to specify the MapFish base path. 
    15       // See https://bugzilla.mozilla.org/show_bug.cgi?id=351282 
    16       var gMfLocation = "../../mfbase/mapfish/"; 
     14        // Because of a bug in Firefox 2 we need to specify the MapFish base path. 
     15        // See https://bugzilla.mozilla.org/show_bug.cgi?id=351282 
     16        var gMfLocation = "../../mfbase/mapfish/"; 
    1717    </script> 
    1818    <script type="text/javascript" src="../../mfbase/mapfish/MapFish.js"></script> 
    1919    <script type="text/javascript" src="../examples.js"></script> 
    20      
     20 
    2121    <!-- A Localization Script File comes here --> 
    22     <script type="text/javascript">      
    23       var propSymbol; 
     22    <script type="text/javascript"> 
     23        var propSymbol; 
    2424 
    25       function createMap(mapDiv) { 
    26           var map = new OpenLayers.Map('olmap'); 
     25        function createMap(mapDiv) { 
     26            var map = new OpenLayers.Map('olmap'); 
    2727 
    28           var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",  
    29               "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}, {buffer: 0}); 
     28            var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", 
     29                    "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}, {buffer: 0}); 
    3030 
    31           map.addLayers([wms]); 
    32           map.addControl(new OpenLayers.Control.LayerSwitcher()); 
    33           map.setCenter(new OpenLayers.LonLat(0, 0), 1); 
    34            
    35           return map; 
    36       } 
     31            map.addLayers([wms]); 
     32            map.addControl(new OpenLayers.Control.LayerSwitcher()); 
     33            map.setCenter(new OpenLayers.LonLat(0, 0), 1); 
     34 
     35            return map; 
     36        } 
    3737 
    38       // reference local blank image 
    39       Ext.BLANK_IMAGE_URL = '../../mfbase/ext/resources/images/default/s.gif'; 
     38        // reference local blank image 
     39        Ext.BLANK_IMAGE_URL = '../../mfbase/ext/resources/images/default/s.gif'; 
    4040 
    41       Ext.onReady(function() { 
    42         var map = createMap("map"); 
    43          
    44         propSymbol = new mapfish.widgets.geostat.ProportionalSymbol({ 
    45             'map': map, 
    46             'nameAttribute': 'name', 
    47             'indicators': [['population', 'Population']], 
    48             'url': mapfish.SERVER_BASE_URL + "cities", 
    49             'loadMask' : {msg: 'Loading Data...', msgCls: 'x-mask-loading'} 
    50         }); 
    51         propSymbol.render('myPropSymbDiv'); 
     41        Ext.onReady(function() { 
     42            var map = createMap("map"); 
     43 
     44            propSymbol = new mapfish.widgets.geostat.ProportionalSymbol({ 
     45                'map': map, 
     46                'nameAttribute': 'name', 
     47                'indicators': [ 
     48                    ['population', 'Population'] 
     49                ], 
     50                'url': mapfish.SERVER_BASE_URL + "cities", 
     51                'loadMask' : {msg: 'Loading Data...', msgCls: 'x-mask-loading'} 
     52            }); 
     53            propSymbol.render('myPropSymbDiv'); 
    5254 
    53       }, this); 
    54        
     55        }, this); 
     56 
    5557    </script> 
    56      
     58 
    5759    <style type="text/css"> 
    5860        #right { 
    59             float:right; 
    60             width:28%; 
     61            float: right; 
     62            width: 28%; 
    6163        } 
     64 
    6265        #olmap { 
    6366            width: 65%; 
    6467            height: 400px; 
    6568            border: 1px solid black; 
    6669        } 
     70 
     71        #north { 
     72            margin-top: 5px; 
     73            margin-left: 5px; 
     74        } 
    6775    </style> 
    68   </head> 
    69   <body> 
    70     <h1 class="page-title">Proportional symbols Example</h1> 
     76</head> 
     77<body> 
     78<div id="north"> 
     79    <h1 style="font-size:20px;color:#15428B;font-family:tahoma,arial,verdana,sans-serif">MapFish: Proportional Symbols 
     80        example</h1> 
     81    <br> 
    7182 
    7283    <div id="content"> 
    73       <div id="right"> 
    74         <div id="myPropSymbDiv"></div> 
    75       </div> 
    76       <div id="olmap"></div> 
     84        <div id="right"> 
     85            <div id="myPropSymbDiv"></div> 
     86        </div> 
     87        <div id="olmap"></div> 
    7788    </div> 
    78   </body> 
     89</body> 
    7990</html> 

  • MapFish/client/examples/editing/list.html

     
    11<html> 
    22<head> 
    3   <title>Grid for editing features</title> 
    4   <link rel="stylesheet" type="text/css" href="../../mfbase/ext/resources/css/ext-all.css"/> 
     3    <title>Grid for editing features</title> 
     4    <link rel="stylesheet" type="text/css" href="../../mfbase/ext/resources/css/ext-all.css"/> 
    55 
    6   <style type="text/css"> 
    7     html, body { 
    8       font: normal 12px verdana; 
    9       margin: 0; 
    10       padding: 0; 
    11       border: 0 none; 
    12       overflow: hidden; 
    13       height: 100%; 
    14       width: 100%; 
    15     } 
     6    <style type="text/css"> 
     7        html, body { 
     8            font: normal 12px verdana; 
     9            margin: 0; 
     10            padding: 0; 
     11            border: 0 none; 
     12            overflow: hidden; 
     13            height: 100%; 
     14            width: 100%; 
     15        } 
    1616 
    17     ul.list { 
    18       list-style-type: disc; 
    19       font-size: 11px; 
    20       padding: 0 0 0 16px; 
    21     } 
    22   </style> 
     17        ul.list { 
     18            list-style-type: disc; 
     19            font-size: 11px; 
     20            padding: 0 0 0 16px; 
     21        } 
     22    </style> 
    2323</head> 
    2424<body> 
    25   <div id="title"> 
    26     <h1 style="font-size:20px">MapFish, FeatureList example</h1> 
    27   </div> 
    28   <div id="olmap"> 
    29   </div> 
    30   <div id="help"> 
     25<div id="north"> 
     26    <h1 style="font-size:20px;color:#15428B;font-family:tahoma,arial,verdana,sans-serif;">MapFish: FeatureList 
     27        example</h1> 
     28</div> 
     29<div id="olmap"> 
     30</div> 
     31<div id="help"> 
    3132    <!-- if somebody can tell me why the squares are not shown, I'll be happy! --> 
    3233    <ul class="list"> 
    33       <li class="list">If you want to change the features' order, you can drag&drop them in the list.</li> 
    34       <li>In manual mode, to edit a geometry, click on the yellow icon in the "Geo" column.</li> 
    35       <li>In automatic mode, to edit a geometry, just click on it.</li> 
    36       <li>The currently edited geometry (if any), is marked with a blue icon in the "Geo" column.</li> 
    37       <li>The columns "Enabled", "Name" and "+" are just examples of editable attributes.</li> 
    38       <li>To add a feature, click on the "Add ..." button (click the arrow besides the button to create another type).</li> 
    39       <li>To delete a feature, select it and click the "Delete" button.</li> 
     34        <li class="list">If you want to change the features' order, you can drag&drop them in the list.</li> 
     35        <li>In manual mode, to edit a geometry, click on the yellow icon in the "Geo" column.</li> 
     36        <li>In automatic mode, to edit a geometry, just click on it.</li> 
     37        <li>The currently edited geometry (if any), is marked with a blue icon in the "Geo" column.</li> 
     38        <li>The columns "Enabled", "Name" and "+" are just examples of editable attributes.</li> 
     39        <li>To add a feature, click on the "Add ..." button (click the arrow besides the button to create another 
     40            type). 
     41        </li> 
     42        <li>To delete a feature, select it and click the "Delete" button.</li> 
    4043    </ul> 
    41   </div> 
     44</div> 
    4245</body> 
    4346 
    4447<script type="text/javascript" src="../../mfbase/openlayers/lib/Firebug/firebug.js"></script> 
    … …  
    4750<script type="text/javascript" src="../../mfbase/ext/adapter/ext/ext-base.js"></script> 
    4851<script type="text/javascript" src="../../mfbase/ext/ext-all-debug.js"></script> 
    4952 
     53<script type="text/javascript" src="../../mfbase/geoext/lib/GeoExt.js"></script> 
     54 
    5055<script type="text/javascript"> 
    51   // Because of a bug in Firefox 2 we need to specify the MapFish base path. 
    52   // See https://bugzilla.mozilla.org/show_bug.cgi?id=351282 
    53   var gMfLocation = "../../mfbase/mapfish/"; 
     56    // Because of a bug in Firefox 2 we need to specify the MapFish base path. 
     57    // See https://bugzilla.mozilla.org/show_bug.cgi?id=351282 
     58    var gMfLocation = "../../mfbase/mapfish/"; 
    5459</script> 
    5560<script type="text/javascript" src="../../mfbase/mapfish/MapFish.js"></script> 
    5661<script type="text/javascript" src="../examples.js"></script> 
    … …  
    7681    renderer: null, 
    7782 
    7883    grid: null, 
    79    
     84 
    8085    init : function(grid) { 
    8186        this.grid = grid; 
    8287        this.grid.on('render', function() { 
    … …  
    98103    renderer : function(v, p, record) { 
    99104        p.css += ' x-grid3-check-col-td'; 
    100105        return '<div class="x-grid3-check-col' 
    101                + (v ? '-on' : '') 
    102                + ' x-grid3-cc-' 
    103                + this.id 
    104                + '">&#160;</div>'; 
     106                + (v ? '-on' : '') 
     107                + ' x-grid3-cc-' 
     108                + this.id 
     109                + '">&#160;</div>'; 
    105110    } 
    106111}; 
    107112 
    … …  
    114119    var map = new OpenLayers.Map('olmap'); 
    115120 
    116121    var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", 
    117         "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}, {buffer: 0}); 
     122            "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}, {buffer: 0}); 
    118123 
    119124    map.addLayers([wms]); 
    120125    map.addControl(new OpenLayers.Control.LayerSwitcher()); 
    … …  
    124129     * Define record type. 
    125130     */ 
    126131    var FeatureType = mapfish.widgets.editing.FeatureList.createRecord([ 
    127         {name: 'name', type: 'string'}, 
    128         {name: 'enabled', type: 'bool'}, 
    129         {name: 'positive', type: 'bool'}, 
    130         {name: 'geometry', type: 'geo'}  // represents the feature geometry 
     132        { 
     133            name: 'name', 
     134            type: 'string' 
     135        }, 
     136        { 
     137            name: 'enabled', 
     138            type: 'bool' 
     139        }, 
     140        { 
     141            name: 'positive', 
     142            type: 'bool' 
     143        }, 
     144        { 
     145            name: 'geometry', 
     146            type: 'geo' 
     147        }  // represents the feature geometry 
    131148    ]); 
    132149 
    133150    /* 
    … …  
    136153    var ds = new Ext.data.Store({ 
    137154        reader: new Ext.data.JsonReader({root: 'features'}, FeatureType) 
    138155    }); 
    139      
     156 
    140157    /* 
    141158     * Define factory functions to create features. 
    142159     */ 
    … …  
    148165        addButton.setHandler(factory); 
    149166        addButton.setText("Add " + name); 
    150167    } 
     168 
    151169    function addPolyline() { 
    152170        var extent = map.getExtent(); 
    153171        var marginW = extent.getWidth() / 5; 
    … …  
    158176            positive: true, 
    159177            geometry: new OpenLayers.Geometry.LineString([ 
    160178                new OpenLayers.Geometry.Point( 
    161                     extent.left + marginW, extent.bottom + marginH), 
     179                        extent.left + marginW, extent.bottom + marginH), 
    162180                new OpenLayers.Geometry.Point( 
    163                     extent.right - marginW, extent.top - marginH), 
     181                        extent.right - marginW, extent.top - marginH), 
    164182            ]) 
    165183        }, "Polyline", addPolyline); 
    166184    } 
     185 
    167186    function addPolygon() { 
    168187        var extent = map.getExtent(); 
    169188        var marginW = extent.getWidth() / 5; 
    … …  
    175194            geometry: new OpenLayers.Geometry.Polygon([ 
    176195                new OpenLayers.Geometry.LinearRing([ 
    177196                    new OpenLayers.Geometry.Point( 
    178                         extent.left+marginW, extent.bottom + marginH), 
     197                            extent.left + marginW, extent.bottom + marginH), 
    179198                    new OpenLayers.Geometry.Point( 
    180                         extent.right - marginW, extent.bottom + marginH), 
     199                            extent.right - marginW, extent.bottom + marginH), 
    181200                    new OpenLayers.Geometry.Point( 
    182                         extent.right - marginW, extent.top - marginH) 
     201                            extent.right - marginW, extent.top - marginH) 
    183202                ]) 
    184203            ]) 
    185204        }, "Polygon", addPolygon); 
    … …  
    192211        text: 'Add Polygon', 
    193212        handler: addPolygon, 
    194213        menu: {items: [ 
    195             {text: 'Polygon', handler: addPolygon }, 
    196             {text: 'Polyline', handler: addPolyline} 
     214            { 
     215                text: 'Polygon', 
     216                handler: addPolygon 
     217            }, 
     218            { 
     219                text: 'Polyline', 
     220                handler: addPolyline 
     221            } 
    197222        ]} 
    198223    }); 
    199224 
    … …  
    209234 
    210235    /* 
    211236     * Define "Special" boolean columns 
    212      */  
     237     */ 
    213238    var enabledColumn = new Ext.grid.CheckColumn({ 
    214239        header: 'Enabled', 
    215240        dataIndex: 'enabled', 
    … …  
    232257        ds: ds, 
    233258        editGeometryVisual: function(geometry, record, edited) {  //how to render geometries 
    234259            return geometry ? 
    235                 '<img width="15" height="15" style="cursor: pointer;" src="geometry' + (edited ? 'On' : 'Off') + '.png" />' : ''; 
     260                   '<img width="15" height="15" style="cursor: pointer;" src="geometry' + (edited ? 'On' : 'Off') + '.png" />' : ''; 
    236261        }, 
    237262        viewConfig: { 
    238263            //autoFill: true, 
    239264            forceFit: true, 
    240265            scrollOffset: 20 
    241266        }, 
    242         columns: [ // definition of the columns 
    243             {header: 'Geo', dataIndex: 'geometry', width: 25}, 
     267        columns: [ 
     268            // definition of the columns 
     269            { 
     270                header: 'Geo', 
     271                dataIndex: 'geometry', 
     272                width: 25 
     273            }, 
    244274            enabledColumn, 
    245             {header: 'Name', dataIndex: 'name', width: 100, editor: new Ext.form.TextField()}, 
     275            { 
     276                header: 'Name', 
     277                dataIndex: 'name', 
     278                width: 100, 
     279                editor: new Ext.form.TextField() 
     280            }, 
    246281            positiveColumn 
    247282        ], 
    248283        plugins: [enabledColumn, positiveColumn],  // trick for the boolean columns 
    … …  
    275310        var mode = (featureList.autoFocusMode + 1) % 3; 
    276311        featureList.autoFocusMode = mode; 
    277312        focusMode.setText(mode == 0 ? "Focus: none" : 
    278                                       (mode == 1 ? "Focus: feature" : 
    279                                                    "Focus: expand")); 
     313                          (mode == 1 ? "Focus: feature" : 
     314                           "Focus: expand")); 
    280315    }); 
    281316    var displayMode = new Ext.Button({ 
    282317        text: 'Display: all', 
    … …  
    296331     */ 
    297332    var viewport = new Ext.Viewport({ 
    298333        layout: 'border', 
    299         items: [{ 
     334        items: [ 
     335            { 
    300336                xtype: 'panel', 
    301337                frame: true, 
    302338                border: true, 
    303339                region: 'north', 
    304                 contentEl: 'title' 
    305             }, { 
     340                contentEl: 'north' 
     341            }, 
     342            { 
    306343                region: 'east', 
    307344                title: 'Feature editing', 
    308345                split: true, 
    … …  
    318355                    border: true, 
    319356                    frame: true 
    320357                }, 
    321                 items: [{ 
     358                items: [ 
     359                    { 
    322360                        xtype: 'panel', 
    323361                        title: 'Settings', 
    324362                        region: 'north', 
    … …  
    331369                            displayMode 
    332370                        ] 
    333371                    }, 
    334                     featureList, { 
     372                    featureList, 
     373                    { 
    335374                        title: 'Help', 
    336375                        height: 250, 
    337376                        minSize: 100, 
    … …  
    341380                        autoScroll: true, 
    342381                        region: 'south', 
    343382                        contentEl: 'help' 
    344                 }] 
    345             }, { 
     383                    } 
     384                ] 
     385            }, 
     386            { 
    346387                region:'center', 
    347388                title: 'Map', 
    348                 xtype: 'mapcomponent', 
     389                xtype: 'gx_mappanel', 
    349390                map: map 
    350         }] 
     391            } 
     392        ] 
    351393    }); 
    352394    viewport.render(); 
    353395}); 

  • MapFish/client/examples/search/index.html

     
    11<!DOCTYPE html> 
    22<html> 
    33<head> 
    4   <title>Search examples</title> 
     4    <title>Search examples</title> 
    55</head> 
    66<body> 
    7   <h1 class="page-title">Search examples</h1> 
    8   <div id="content"> 
     7<h1 class="page-title">Search examples</h1> 
     8 
     9<div id="content"> 
    910    <ul> 
    10       <li><a href="c2corg.html">Search example</a></li> 
     11        <li><a href="c2corg.html">Search example</a></li> 
    1112    </ul> 
    12   </div> 
     13</div> 
    1314</body> 
    1415</html> 
    1516 

  • MapFish/client/examples/print/index.html

     
    11<!DOCTYPE html> 
    22<html> 
    33<head> 
    4   <title>Print examples</title> 
     4    <title>Print examples</title> 
    55</head> 
    66<body> 
    7   <h1 class="page-title">Print examples</h1> 
    8   <div id="content"> 
     7<h1 class="page-title">Print examples</h1> 
     8 
     9<div id="content"> 
    910    <ul> 
    10       <li><a href="simple.html">Print example</a></li> 
    11       <li><a href="basic.html">Basic print example (single page pdf)</a></li> 
     11        <li><a href="simple.html">Print example</a></li> 
     12        <li><a href="basic.html">Basic print example (single page pdf)</a></li> 
    1213    </ul> 
    13   </div> 
     14</div> 
    1415</body> 
    1516</html> 
    1617 

  • MapFish/client/examples/editing/editing-panel.html

     
    11<!DOCTYPE html> 
    22<html> 
    33<head> 
    4   <title>Feature editing panel example</title> 
    5     <link rel="stylesheet" type="text/css" href="../../mfbase/ext/resources/css/ext-all.css" /> 
    6     <link rel="stylesheet" type="text/css" href="../../mfbase/mapfish/mapfish.css" /> 
     4    <title>Feature editing panel example</title> 
     5    <link rel="stylesheet" type="text/css" href="../../mfbase/ext/resources/css/ext-all.css"/> 
     6    <link rel="stylesheet" type="text/css" href="../../mfbase/mapfish/mapfish.css"/> 
    77 
    88    <script type="text/javascript" src="../../mfbase/openlayers/lib/Firebug/firebug.js"></script> 
    99    <script type="text/javascript" src="../../mfbase/openlayers/lib/OpenLayers.js"></script> 
    … …  
    1111    <script type="text/javascript" src="../../mfbase/ext/adapter/ext/ext-base.js"></script> 
    1212    <script type="text/javascript" src="../../mfbase/ext/ext-all-debug.js"></script> 
    1313 
     14    <script type="text/javascript" src="../../mfbase/geoext/lib/GeoExt.js"></script> 
     15 
    1416    <script type="text/javascript"> 
    15       // Because of a bug in Firefox 2 we need to specify the MapFish base path. 
    16       // See https://bugzilla.mozilla.org/show_bug.cgi?id=351282 
    17       var gMfLocation = "../../mfbase/mapfish/"; 
     17        // Because of a bug in Firefox 2 we need to specify the MapFish base path. 
     18        // See https://bugzilla.mozilla.org/show_bug.cgi?id=351282 
     19        var gMfLocation = "../../mfbase/mapfish/"; 
    1820    </script> 
    1921    <script type="text/javascript" src="../../mfbase/mapfish/MapFish.js"></script> 
    2022    <script type="text/javascript" src="../examples.js"></script> 
    21      
     23 
    2224    <style type="text/css"> 
    23         html, body { 
    24         font:normal 12px verdana; 
    25         margin: 0; 
    26         padding:0; 
    27     } 
    28     ul.list { 
    29       list-style-type: disc; 
    30       font-size: 11px; 
    31       padding: 0 0 0 16px; 
    32     } 
    33     /* change the modal window z-index so that the combobox of the editing panel 
    34        is still active when the attributes form is disabled */ 
    35     .ext-el-mask { 
    36       z-index: 10999; 
    37     } 
     25        html, body { 
     26            font: normal 12px verdana; 
     27            margin: 0; 
     28            padding: 0; 
     29        } 
     30 
     31        ul.list { 
     32            list-style-type: disc; 
     33            font-size: 11px; 
     34            padding: 0 0 0 16px; 
     35        } 
     36 
     37            /* change the modal window z-index so that the combobox of the editing panel 
     38   is still active when the attributes form is disabled */ 
     39        .ext-el-mask { 
     40            z-index: 10999; 
     41        } 
    3842    </style> 
    39         <script type="text/javascript"> 
    40    
    41     // reference local blank image 
    42     Ext.BLANK_IMAGE_URL = '../../mfbase/ext/resources/images/default/s.gif'; 
    43    
    44     var map; 
    45    
    46     Ext.onReady(function() { 
    47         Ext.QuickTips.init(); 
    48          
    49         map = new OpenLayers.Map('olmap'); 
    50  
    51         var setupMap = function(viewport) { 
    52             var map = viewport.findById('map').map; 
    53             var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",  
    54                 "http://labs.metacarta.com/wms/vmap0", 
    55                 {layers: 'basic'}, 
    56                 {buffer: 0} 
    57             ); 
     43    <script type="text/javascript"> 
     44 
     45        // reference local blank image 
     46        Ext.BLANK_IMAGE_URL = '../../mfbase/ext/resources/images/default/s.gif'; 
     47 
     48        var map; 
     49 
     50        Ext.onReady(function() { 
     51            Ext.QuickTips.init(); 
     52 
     53            map = new OpenLayers.Map(); 
     54            var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", 
     55                    "http://labs.metacarta.com/wms/vmap0", 
     56            {layers: 'basic'}, 
     57            {buffer: 0} 
     58                    ); 
    5859            map.addLayers([wms]); 
    5960            map.addControl(new OpenLayers.Control.LayerSwitcher()); 
    6061            map.setCenter(new OpenLayers.LonLat(17, 2), 3); 
    61         }; 
    62          
    63         var layerConfig = { 
    64             polygons: { 
    65                 text: 'Polygons', 
    66                 protocol: new mapfish.Protocol.MapFish({ 
    67                     url: mapfish.Util.formatURL( 
    68                         mapfish.SERVER_BASE_URL + 'polygons' 
    69                     ) 
    70                 }), 
    71                 featuretypes: { 
    72                     geometry: { 
    73                         type: OpenLayers.Geometry.Polygon 
    74                     }, 
    75                     properties: [ 
    76                         new mapfish.widgets.editing.StringProperty( 
     62 
     63            var layerConfig = { 
     64                polygons: { 
     65                    text: 'Polygons', 
     66                    protocol: new mapfish.Protocol.MapFish({ 
     67                        url: mapfish.Util.formatURL( 
     68                                mapfish.SERVER_BASE_URL + 'polygons' 
     69                                ) 
     70                    }), 
     71                    featuretypes: { 
     72                        geometry: { 
     73                            type: OpenLayers.Geometry.Polygon 
     74                        }, 
     75                        properties: [ 
     76                            new mapfish.widgets.editing.StringProperty( 
    7777                            {name: 'name', showInGrid: true}) 
    78                     ] 
    79                 } 
    80             }, 
    81             lines: { 
    82                 text: 'Lines', 
    83                 protocol: new mapfish.Protocol.MapFish({ 
    84                     url: mapfish.Util.formatURL( 
    85                         mapfish.SERVER_BASE_URL + 'lines' 
    86                     ) 
    87                 }), 
    88                 featuretypes: { 
    89                     geometry: { 
    90                         type: OpenLayers.Geometry.LineString 
    91                     }, 
    92                     properties: [ 
    93                         new mapfish.widgets.editing.StringProperty( 
     78                        ] 
     79                    } 
     80                }, 
     81                lines: { 
     82                    text: 'Lines', 
     83                    protocol: new mapfish.Protocol.MapFish({ 
     84                        url: mapfish.Util.formatURL( 
     85                                mapfish.SERVER_BASE_URL + 'lines' 
     86                                ) 
     87                    }), 
     88                    featuretypes: { 
     89                        geometry: { 
     90                            type: OpenLayers.Geometry.LineString 
     91                        }, 
     92                        properties: [ 
     93                            new mapfish.widgets.editing.StringProperty( 
    9494                            {name: 'name', showInGrid: true}) 
    95                     ] 
    96                      
    97                 } 
    98             }, 
    99             points: { 
    100                 text: 'Points', 
    101                 protocol: new mapfish.Protocol.MapFish({ 
    102                     url: mapfish.Util.formatURL( 
    103                         mapfish.SERVER_BASE_URL + 'points' 
    104                     ) 
    105                 }), 
    106                 featuretypes: { 
    107                     geometry: { 
    108                         type: OpenLayers.Geometry.Point 
    109                     }, 
    110                     properties: [ 
    111                         new mapfish.widgets.editing.StringProperty( 
     95                        ] 
     96 
     97                    } 
     98                }, 
     99                points: { 
     100                    text: 'Points', 
     101                    protocol: new mapfish.Protocol.MapFish({ 
     102                        url: mapfish.Util.formatURL( 
     103                                mapfish.SERVER_BASE_URL + 'points' 
     104                                ) 
     105                    }), 
     106                    featuretypes: { 
     107                        geometry: { 
     108                            type: OpenLayers.Geometry.Point 
     109                        }, 
     110                        properties: [ 
     111                            new mapfish.widgets.editing.StringProperty( 
    112112                            {name: 'name', showInGrid: true}) 
    113                     ] 
    114                      
    115                 } 
    116             } 
    117         }; 
     113                        ] 
     114 
     115                    } 
     116                } 
     117            }; 
    118118 
    119         new Ext.Viewport({ 
    120             layout: 'border', 
    121             listeners: {'afterlayout': {'fn': setupMap}}, 
    122             items: [ 
    123                 new Ext.BoxComponent({ 
    124                     region: 'north', 
    125                     el: 'north', 
    126                     height: 32 
    127                 }), { 
    128                     region: 'east', 
    129                     id: 'east-panel', 
    130                     title: 'Tools', 
    131                     width: 400, 
    132                     items: [{ 
    133                             title: 'Editing', 
    134                             id: 'editing-panel', 
    135                             bodyStyle: 'padding: 3px', 
    136                             layerConfig: layerConfig, 
    137                             map: map, 
    138                             xtype: 'featureediting' 
    139                         }, { 
    140                             title: 'Help', 
    141                             id: 'help', 
    142                             contentEl: 'helptext' 
    143                     }] 
    144                 }, { 
    145                     region: 'center', 
    146                     id: 'map', 
    147                     title: 'Map', 
    148                     map: map, 
    149                     xtype: 'mapcomponent' 
    150                 } 
    151             ] 
    152         }); 
    153     }); 
    154         </script> 
     119            new Ext.Viewport({ 
     120                layout: 'border', 
     121                items: [ 
     122                    new Ext.BoxComponent({ 
     123                        region: 'north', 
     124                        el: 'north', 
     125                        height: 32, 
     126                        margins: {left: 5,top: 5} 
     127                    }), { 
     128                        region: 'east', 
     129                        id: 'east-panel', 
     130                        title: 'Tools', 
     131                        width: 400, 
     132                        items: [ 
     133                            { 
     134                                title: 'Editing', 
     135                                id: 'editing-panel', 
     136                                bodyStyle: 'padding: 3px', 
     137                                layerConfig: layerConfig, 
     138                                map: map, 
     139                                xtype: 'featureediting' 
     140                            }, 
     141                            { 
     142                                title: 'Help', 
     143                                id: 'help', 
     144                                contentEl: 'helptext' 
     145                            } 
     146                        ] 
     147                    }, { 
     148                        region: 'center', 
     149                        title: 'Map', 
     150                        map: map, 
     151                        xtype: "gx_mappanel" 
     152                    } 
     153                ] 
     154            }); 
     155        }); 
     156    </script> 
    155157</head> 
    156158<body> 
    157   <div id="north"></div> 
    158     <p>Feature editing panel example</p> 
    159   </div> 
    160   <div id="olmap"></div> 
    161   <div id="helptext"> 
     159<div id="north"> 
     160    <h1 style="font-size:20px;color:#15428B;font-family:tahoma,arial,verdana,sans-serif">MapFish: Editing panel 
     161        example</h1> 
     162</div> 
     163<div id="helptext"> 
    162164    <ul class="list"> 
    163       <li class="list">Choose a layer in the list of layers to edit</li> 
    164       <li>Import data for the current extent to edit existing data</li> 
    165       <li>Select a feature by clicking on it, modify its vertices and/or attributes</li> 
    166       <li>To delete a feature, click on it and hit the Delete button</li> 
    167       <li>To create a feature, select the drawing tool and draw the feature</li> 
    168       <li>Modified/Inserted/Deleted features appear in the grouping grid</li> 
    169       <li>When done with editing, click on commit to save modifications</li> 
     165        <li class="list">Choose a layer in the list of layers to edit</li> 
     166        <li>Import data for the current extent to edit existing data</li> 
     167        <li>Select a feature by clicking on it, modify its vertices and/or attributes</li> 
     168        <li>To delete a feature, click on it and hit the Delete button</li> 
     169        <li>To create a feature, select the drawing tool and draw the feature</li> 
     170        <li>Modified/Inserted/Deleted features appear in the grouping grid</li> 
     171        <li>When done with editing, click on commit to save modifications</li> 
    170172    </ul> 
    171   </div> 
    172  </body> 
     173</div> 
     174</body> 
    173175</html>