[Commits] r2223 - core/trunk/geoext/examples
commits at geoext.org
commits at geoext.org
Wed Jun 16 21:13:58 CEST 2010
Author: tschaub
Date: 2010-06-16 21:13:58 +0200 (Wed, 16 Jun 2010)
New Revision: 2223
Added:
core/trunk/geoext/examples/popup-more.html
core/trunk/geoext/examples/popup-more.js
Log:
Adding another popup example to demonstrate how popup content and location can be updated.
Added: core/trunk/geoext/examples/popup-more.html
===================================================================
--- core/trunk/geoext/examples/popup-more.html (rev 0)
+++ core/trunk/geoext/examples/popup-more.html 2010-06-16 19:13:58 UTC (rev 2223)
@@ -0,0 +1,37 @@
+<html>
+ <head>
+ <title>GeoExt Modified Popup Example</title>
+
+ <script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2.1/adapter/ext/ext-base.js"></script>
+ <script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2.1/ext-all.js"></script>
+ <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css" />
+ <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/examples/shared/examples.css" />
+ <link rel="stylesheet" type="text/css" href="../resources/css/geoext-all-debug.css" />
+ <script src="http://www.openlayers.org/api/2.9/OpenLayers.js"></script>
+ <script type="text/javascript" src="../lib/GeoExt.js"></script>
+
+ <script type="text/javascript" src="popup-more.js"></script>
+
+ <style type="text/css">
+ #container {
+ margin: 1em;
+ }
+ </style>
+ </head>
+ <body>
+ <h1>Modified Popup Example</h1>
+ <p>
+ This example demonstrates the use of a single popup to display
+ content from multiple locations.
+ <p>
+ <div id="container"></div>
+ <p>
+ Clicking on the map will open a popup displaying the click location.
+ Subsequent clicks will update the content and the position. Close
+ the popup to start over.
+ <p>
+ See the <a href="popup-more.js">popup-more.js</a> source for more
+ detail.
+ </p>
+ </body>
+</html>
Added: core/trunk/geoext/examples/popup-more.js
===================================================================
--- core/trunk/geoext/examples/popup-more.js (rev 0)
+++ core/trunk/geoext/examples/popup-more.js 2010-06-16 19:13:58 UTC (rev 2223)
@@ -0,0 +1,122 @@
+/**
+ * Copyright (c) 2008-2010 The Open Source Geospatial Foundation
+ *
+ * Published under the BSD license.
+ * See http://svn.geoext.org/core/trunk/geoext/license.txt for the full text
+ * of the license.
+ */
+
+/** api: example[popup-more]
+ * Modifying Popups
+ * ----------------
+ * Update a popup with information from multiple locations.
+ */
+
+var mapPanel, popup;
+
+Ext.onReady(function() {
+
+ function addToPopup(loc) {
+
+ // create the popup if it doesn't exist
+ if (!popup) {
+ popup = new GeoExt.Popup({
+ title: "Popup",
+ width: 200,
+ maximizable: true,
+ collapsible: true,
+ map: mapPanel.map,
+ anchored: true,
+ listeners: {
+ close: function() {
+ // closing a popup destroys it, but our reference is truthy
+ popup = null;
+ }
+ }
+ });
+ }
+
+ // This is awkward, but for now we need to create a feature to update
+ // the popup position. TODO: fix this for 1.0
+ var feature = new OpenLayers.Feature.Vector(
+ new OpenLayers.Geometry.Point(loc.lon, loc.lat)
+ );
+
+
+ // add some content to the popup (this can be any Ext component)
+ popup.add({
+ xtype: "box",
+ autoEl: {
+ html: "You clicked on (" + loc.lon.toFixed(2) + ", " + loc.lat.toFixed(2) + ")"
+ }
+ });
+
+ // reset the popup's location
+ popup.feature = feature;
+
+ popup.doLayout();
+
+ // since the popup is anchored, calling show will move popup to this location
+ popup.show();
+ }
+
+ // create Ext window including a map panel
+ var mapPanel = new GeoExt.MapPanel({
+ title: "Map",
+ renderTo: "container",
+ width: 650, height: 356,
+ layers: [
+ new OpenLayers.Layer.WMS(
+ "Global Imagery",
+ "http://maps.opengeo.org/geowebcache/service/wms",
+ {layers: "bluemarble"}
+ )
+ ],
+ center: [0, 0],
+ zoom: 2
+ });
+
+ var control = new OpenLayers.Control.Click({
+ trigger: function(evt) {
+ var loc = mapPanel.map.getLonLatFromViewPortPx(evt.xy);
+ addToPopup(loc);
+ }
+ });
+
+ mapPanel.map.addControl(control);
+ control.activate();
+
+});
+
+// simple control to handle user clicks on the map
+
+OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
+
+ defaultHandlerOptions: {
+ single: true,
+ double: false,
+ pixelTolerance: 0,
+ stopSingle: true
+ },
+
+ initialize: function(options) {
+
+ this.handlerOptions = OpenLayers.Util.extend(
+ options && options.handlerOptions || {},
+ this.defaultHandlerOptions
+ );
+ OpenLayers.Control.prototype.initialize.apply(
+ this, arguments
+ );
+ this.handler = new OpenLayers.Handler.Click(
+ this,
+ {
+ click: this.trigger
+ },
+ this.handlerOptions
+ );
+ },
+
+ CLASS_NAME: "OpenLayers.Control.Click"
+
+});
More information about the Commits
mailing list