source:
trunk/workshop-routing-foss4g/web/GeoExt/examples/popup-more.js
@
81
Revision 76, 2.9 KB checked in by djay, 13 years ago (diff) | |
---|---|
|
Rev | Line | |
---|---|---|
[76] | 1 | /** |
2 | * Copyright (c) 2008-2010 The Open Source Geospatial Foundation | |
3 | * | |
4 | * Published under the BSD license. | |
5 | * See http://svn.geoext.org/core/trunk/geoext/license.txt for the full text | |
6 | * of the license. | |
7 | */ | |
8 | ||
9 | /** api: example[popup-more] | |
10 | * Modifying Popups | |
11 | * ---------------- | |
12 | * Update a popup with information from multiple locations. | |
13 | */ | |
14 | ||
15 | var mapPanel, popup; | |
16 | ||
17 | Ext.onReady(function() { | |
18 | ||
19 | function addToPopup(loc) { | |
20 | ||
21 | // create the popup if it doesn't exist | |
22 | if (!popup) { | |
23 | popup = new GeoExt.Popup({ | |
24 | title: "Popup", | |
25 | width: 200, | |
26 | maximizable: true, | |
27 | collapsible: true, | |
28 | map: mapPanel.map, | |
29 | anchored: true, | |
30 | listeners: { | |
31 | close: function() { | |
32 | // closing a popup destroys it, but our reference is truthy | |
33 | popup = null; | |
34 | } | |
35 | } | |
36 | }); | |
37 | } | |
38 | ||
39 | // add some content to the popup (this can be any Ext component) | |
40 | popup.add({ | |
41 | xtype: "box", | |
42 | autoEl: { | |
43 | html: "You clicked on (" + loc.lon.toFixed(2) + ", " + loc.lat.toFixed(2) + ")" | |
44 | } | |
45 | }); | |
46 | ||
47 | // reset the popup's location | |
48 | popup.location = loc; | |
49 | ||
50 | popup.doLayout(); | |
51 | ||
52 | // since the popup is anchored, calling show will move popup to this location | |
53 | popup.show(); | |
54 | } | |
55 | ||
56 | // create Ext window including a map panel | |
57 | var mapPanel = new GeoExt.MapPanel({ | |
58 | title: "Map", | |
59 | renderTo: "container", | |
60 | width: 650, height: 356, | |
61 | layers: [ | |
62 | new OpenLayers.Layer.WMS( | |
63 | "Global Imagery", | |
64 | "http://maps.opengeo.org/geowebcache/service/wms", | |
65 | {layers: "bluemarble"} | |
66 | ) | |
67 | ], | |
68 | center: [0, 0], | |
69 | zoom: 2 | |
70 | }); | |
71 | ||
72 | var control = new OpenLayers.Control.Click({ | |
73 | trigger: function(evt) { | |
74 | var loc = mapPanel.map.getLonLatFromViewPortPx(evt.xy); | |
75 | addToPopup(loc); | |
76 | } | |
77 | }); | |
78 | ||
79 | mapPanel.map.addControl(control); | |
80 | control.activate(); | |
81 | ||
82 | }); | |
83 | ||
84 | // simple control to handle user clicks on the map | |
85 | ||
86 | OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { | |
87 | ||
88 | defaultHandlerOptions: { | |
89 | single: true, | |
90 | double: false, | |
91 | pixelTolerance: 0, | |
92 | stopSingle: true | |
93 | }, | |
94 | ||
95 | initialize: function(options) { | |
96 | ||
97 | this.handlerOptions = OpenLayers.Util.extend( | |
98 | options && options.handlerOptions || {}, | |
99 | this.defaultHandlerOptions | |
100 | ); | |
101 | OpenLayers.Control.prototype.initialize.apply( | |
102 | this, arguments | |
103 | ); | |
104 | this.handler = new OpenLayers.Handler.Click( | |
105 | this, | |
106 | { | |
107 | click: this.trigger | |
108 | }, | |
109 | this.handlerOptions | |
110 | ); | |
111 | }, | |
112 | ||
113 | CLASS_NAME: "OpenLayers.Control.Click" | |
114 | ||
115 | }); |
Note: See TracBrowser
for help on using the repository browser.