HowToUseWidgets: simple.html

File simple.html, 2.2 kB (added by pgiraud, 1 year ago)

simple.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             el: 'myDiv',
37             store: store,
38             templates: {
39                 header: new Ext.Template("Choose a continent in the list"),
40                 footer: new Ext.Template("The map will automatically center to this location")
41             }
42         });
43         shortcuts.render();
44     });
45   </script>
46 </head>
47 <body>
48   <span></span>
49   <div id="myDiv"></div>
50   <div id="olmap" style="width:450px;height:300px;background-color:#999;"></div>
51  </body>
52 </html>