HowToCreateWidgets: locations_layout.html

File locations_layout.html, 2.3 kB (added by pgiraud, 1 year ago)
Line 
1 <html>
2 <head>
3   <title>MapFish Tutorial - How To Create 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" src="Locations.js"></script>
14  
15   <script type="text/javascript">
16     Ext.onReady(function() {
17         var map = new OpenLayers.Map($('olmap'));
18
19         var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",
20             "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}, {buffer: 0});
21
22         map.addLayers([wms]);
23         map.addControl(new OpenLayers.Control.LayerSwitcher());
24         map.zoomToMaxExtent();
25        
26         var data = [['Paris', new OpenLayers.LonLat(2.3333333, 48.8666667), 6],
27                     ['Buenos Aires', new OpenLayers.LonLat(-58.6725, -34.5875), 6],
28                     ['Amsterdam', new OpenLayers.LonLat(4.9166667, 52.35), 6],
29                     ['Dakar', new OpenLayers.LonLat(-17.4380556, 14.6708333), 6]];
30        
31         var locations = new mapfish.widgets.Locations({
32             map: map,
33             data: data
34         });
35        
36         var mapcomponent = new mapfish.widgets.MapComponent({map: map});
37        
38         var window = new Ext.Window({
39             title: 'Map',
40             width: 500,
41             height:300,
42             minWidth: 300,
43             minHeight: 200,
44             layout: 'fit',
45             plain:true,
46             bodyStyle:'padding:5px;',
47             items: mapcomponent
48         });
49         window.show();
50        
51         var window = new Ext.Window({
52             title: 'Cities',
53             width: 200,
54             height:150,
55             minWidth: 200,
56             minHeight: 100,
57             layout: 'fit',
58             plain:true,
59             bodyStyle:'padding:5px;',
60             items: locations
61         });
62         window.setPagePosition(20, 40);
63         window.show();
64     });
65   </script>
66 </head>
67 <body>
68   <span></span>
69   <div id="myDiv"></div>
70   <div id="olmap" style="width:450px;height:300px;background-color:#999;"></div>
71  </body>
72 </html>