HowToUseWidgets: window.html

File window.html, 2.9 kB (added by pgiraud, 1 year ago)

window.html example

Line 
1 <html>
2 <head>
3   <title>MapFish Tutorial - How To Use Widgets</title>
4   <link rel="stylesheet" type="text/css" href="/path/to/mfbase/ext/resources/css/ext-all.css" />
5  
6   <script type="text/javascript" src="/path/to/mfbase/openlayers/lib/OpenLayers.js"></script>
7  
8   <script type="text/javascript" src="/path/to/mfbase/ext/adapter/ext/ext-base.js"></script>
9   <script type="text/javascript" src="/path/to/mfbase/ext/ext-all-debug.js"></script>
10  
11   <script type="text/javascript" src="/path/to/mfbase/mapfish/MapFish.js"></script>
12  
13   <script type="text/javascript">
14     Ext.onReady(function() {
15         var map = new OpenLayers.Map($('olmap'));
16
17         var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",
18             "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}, {buffer: 0});
19
20         map.addLayers([wms]);
21         map.addControl(new OpenLayers.Control.LayerSwitcher());
22         map.zoomToMaxExtent();
23        
24         var store = new Ext.data.SimpleStore({
25             fields: ['value', 'text', 'bbox'],
26             data : [['OC', 'Oceana', new OpenLayers.Bounds(56.0234375, -72.53125, 214.2265625, 32.9375)],
27                     ['NA', 'North America', new OpenLayers.Bounds(-186.37890625, -2.21875, -28.17578125, 103.25)],
28                     ['SA', 'South America', new OpenLayers.Bounds(-146.828125, -71.828125, 11.375, 33.640625)],
29                     ['AF', 'Africa', new OpenLayers.Bounds(-58.9375, -51.7890625, 99.265625, 53.6796875)],
30                     ['EU', 'Europe', new OpenLayers.Bounds(-23.078125, 26.2578125, 56.0234375, 78.9921875)],
31                     ['AS', 'Asia', new OpenLayers.Bounds(15.59375, -21.90625, 173.796875, 83.5625)]]
32         });
33    
34         var shortcuts = new mapfish.widgets.Shortcuts({
35             map: map,
36             store: store,
37             templates: {
38                 header: new Ext.Template("Choose a continent in the list"),
39                 footer: new Ext.Template("The map will automatically center to this location")
40             }
41         });
42        
43         var mapcomponent = new mapfish.widgets.MapComponent({map: map});
44        
45         var window = new Ext.Window({
46             title: 'Map',
47             width: 500,
48             height:300,
49             minWidth: 300,
50             minHeight: 200,
51             layout: 'fit',
52             plain:true,
53             bodyStyle:'padding:5px;',
54             items: mapcomponent
55         });
56         window.show();
57        
58         var window = new Ext.Window({
59             title: 'Shortcuts',
60             width: 200,
61             height:150,
62             minWidth: 200,
63             minHeight: 100,
64             layout: 'fit',
65             plain:true,
66             bodyStyle:'padding:5px;',
67             items: shortcuts
68         });
69         window.setPagePosition(20, 40);
70
71         window.show();
72     });
73   </script>
74 </head>
75 <body>
76   <span></span>
77   <div id="myDiv"></div>
78   <div id="olmap" style="width:450px;height:300px;background-color:#999;"></div>
79  </body>
80 </html>