[Commits] r844 - in apps/opengeo/geoexplorer/trunk: . lib/GeoExplorer lib/GeoExplorer/Embed
commits at geoext.org
commits at geoext.org
Fri May 22 19:57:55 CEST 2009
Author: dwins
Date: 2009-05-22 19:57:55 +0200 (Fri, 22 May 2009)
New Revision: 844
Added:
apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/LayerMenuItem.js
Modified:
apps/opengeo/geoexplorer/trunk/embed-example.html
apps/opengeo/geoexplorer/trunk/embed.html
apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/Embed/Embed.js
Log:
Replace layer tree with a collapsible menu in GeoExplorer.Embed
Modified: apps/opengeo/geoexplorer/trunk/embed-example.html
===================================================================
--- apps/opengeo/geoexplorer/trunk/embed-example.html 2009-05-22 16:49:23 UTC (rev 843)
+++ apps/opengeo/geoexplorer/trunk/embed-example.html 2009-05-22 17:57:55 UTC (rev 844)
@@ -5,7 +5,7 @@
</head>
<body>
<h2> Embedded GeoExplorer </h2>
- <p> You can embed a GeoExplorer application inside of other web pages, using the <code> GeoExplorer.Embedded </code> class. This supports all of the persisted options available in the full version, including layers, styles, tools, and metadata, but with GUI components optimized for inclusion in a larger page such as a blog post.
+ <p> You can embed a GeoExplorer application inside of other web pages, using the <code> GeoExplorer.Embed </code> class. This supports all of the persisted options available in the full version, including layers, styles, tools, and metadata, but with GUI components optimized for inclusion in a larger page such as a blog post.
</p>
<iframe style="height: 400; width: 600; border: 0px" src="embed.html">
If you see this text, your browser doesn't handle frames properly. Try a recent version of <a href="http://www.mozilla.com/en-US/firefox/">Firefox</a>.
Modified: apps/opengeo/geoexplorer/trunk/embed.html
===================================================================
--- apps/opengeo/geoexplorer/trunk/embed.html 2009-05-22 16:49:23 UTC (rev 843)
+++ apps/opengeo/geoexplorer/trunk/embed.html 2009-05-22 17:57:55 UTC (rev 844)
@@ -31,8 +31,8 @@
<script type="text/javascript" src="lib/GeoExplorer.js"></script>
<script type="text/javascript" src="lib/GeoExplorer/MapToolMenu.js"></script>
<script type="text/javascript" src="lib/GeoExplorer/MapToolSplitToggle.js"></script>
- <script type="text/javascript" src="lib/GeoExplorer/MassGetFeatureInfo.js"></script>
<script type="text/javascript" src="lib/GeoExplorer/Embed/Embed.js"></script>
+ <script type="text/javascript" src="lib/GeoExplorer/LayerMenuItem.js"></script>
<script>
Ext.BLANK_IMAGE_URL = "theme/img/blank.gif";
Modified: apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/Embed/Embed.js
===================================================================
--- apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/Embed/Embed.js 2009-05-22 16:49:23 UTC (rev 843)
+++ apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/Embed/Embed.js 2009-05-22 17:57:55 UTC (rev 844)
@@ -1,3 +1,144 @@
+/** api: (define)
+ * module = GeoExplorer
+ * class = Embed
+ * base_link = `GeoExplorer <http://extjs.com/deploy/dev/docs/?class=Ext.Panel>`_
+ */
+Ext.namespace("GeoExplorer");
+
+/** api: constructor
+ * ..class:: GeoExplorer.Embed(config)
+ *
+ * Create a GeoExplorer application suitable for embedding in larger pages.
+ */
GeoExplorer.Embed = Ext.extend(GeoExplorer, {
- // To be filled out.
+ /**
+ * api: method[createLayout]
+ * Create the various parts that compose the layout.
+ */
+ createLayout: function() {
+
+ // create the map
+ // TODO: check this.initialConfig.map for any map options
+ this.map = new OpenLayers.Map({
+ allOverlays: true,
+ controls: [new OpenLayers.Control.PanPanel(),
+ new OpenLayers.Control.ZoomPanel()]
+ });
+
+ //** Remove this code when OpenLayers #2069 is closed **
+ var onDoubleClick = function(ctrl, evt) {
+ OpenLayers.Event.stop(evt ? evt : window.event);
+ };
+ var controls = this.map.controls[0].controls;
+ for(var i = 0; i < controls.length; i++){
+ OpenLayers.Event.observe(controls[i].panel_div, "dblclick",
+ OpenLayers.Function.bind(onDoubleClick, this.map.controls[0], controls[i]));
+ }
+ //******************************************************
+
+ //TODO: make this more configurable
+ this.map.events.on({
+ "preaddlayer" : function(evt){
+ if(evt.layer.mergeNewParams){
+ var maxExtent = evt.layer.maxExtent;
+ evt.layer.mergeNewParams({
+ transparent: true,
+ format: "image/png",
+ tiled: true,
+ tilesorigin: [maxExtent.left, maxExtent.bottom]
+ });
+ }
+ },
+ scope : this
+ });
+
+
+ // place map in panel
+ var mapConfig = this.initialConfig.map || {};
+ this.mapPanel = new GeoExt.MapPanel({
+ layout: "anchor",
+ border: true,
+ region: "center",
+ map: this.map,
+ // TODO: update the OpenLayers.Map constructor to accept an initial center
+ center: mapConfig.center && new OpenLayers.LonLat(mapConfig.center[0], mapConfig.center[1]),
+ // TODO: update the OpenLayers.Map constructor to accept an initial zoom
+ zoom: mapConfig.zoom,
+ items: [
+ {
+ xtype: "gx_scaleslider",
+ vertical: true,
+ height: 100,
+ plugins: new GeoExt.ScaleSliderTip({
+ template: "<div>Zoom Level: {zoom}</div>"
+ })
+ },
+ this.createMapOverlay()
+ ]
+ });
+
+ // create layer store
+ this.layers = this.mapPanel.layers;
+
+ var addLayerButton = new Ext.Button({
+ tooltip : "Add Layers",
+ disabled: true,
+ iconCls: "icon-addlayers",
+ handler : this.showCapabilitiesGrid,
+ scope: this
+ });
+ this.on("ready", function() {addLayerButton.enable();});
+
+ var toolbar = new Ext.Toolbar({
+ xtype: "toolbar",
+ region: "north",
+ disabled: true,
+ items: this.createTools()
+ });
+ this.on("ready", function() {toolbar.enable();});
+
+ var viewport = new Ext.Viewport({
+ layout: "fit",
+ hideBorders: true,
+ items: {
+ layout: "border",
+ deferredRender: false,
+ items: [
+ toolbar,
+ this.mapPanel
+ ]
+ }
+ });
+ },
+
+ /**
+ * api: method[createTools]
+ * Create the various parts that compose the layout.
+ */
+ createTools: function() {
+ var tools =
+ GeoExplorer.Embed.superclass.createTools.apply(this, arguments);
+
+ var layerChooser = new Ext.Button({
+ text: 'Layers',
+ // iconCls: 'bmenu',
+ handler: function(item, evt) {
+ var menu = new Ext.menu.Menu({items:
+ ['<h3> <img height="24" width="48" src="http://www.google.com/logos/us_doodle4google09.gif"></img> Layers </h3>']
+ });
+
+ this.mapPanel.layers.each(function(x) {
+ menu.addItem(new GeoExplorer.LayerMenuItem({
+ layerRecord: x
+ }));
+ });
+
+ menu.show(evt.getTarget());
+ },
+ scope: this
+ });
+
+ tools.unshift(layerChooser);
+ return tools;
+ }
});
Added: apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/LayerMenuItem.js
===================================================================
--- apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/LayerMenuItem.js (rev 0)
+++ apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/LayerMenuItem.js 2009-05-22 17:57:55 UTC (rev 844)
@@ -0,0 +1,46 @@
+/**
+ * @author David Winslow <dwinslow at opengeo.org>
+ */
+
+GeoExplorer.LayerMenuItem = function(config) {
+ config.layout = config.layout || 'column';
+ Ext.menu.DateItem.superclass.constructor.call(this, new Ext.Panel(config), config);
+
+ this.panel = this.component;
+ var layerRecord = config.layerRecord;
+
+ var queryRadio = null;
+ if (layerRecord.get("queryable")){
+ queryRadio = new Ext.form.Radio({checked: false, name: 'query'});
+ } else {
+ queryRadio = new Ext.Panel();
+ }
+
+ var visibilityField = null;
+
+ if (layerRecord.get("layer").isBaseLayer) {
+ visibilityField = new Ext.form.Radio({
+ checked: layerRecord.get("layer").getVisibility(),
+ handler: function(radio, checked) {
+ layerRecord.get('layer').setVisibility(checked);
+ }
+ });
+ } else {
+ visibilityField = new Ext.form.Checkbox({
+ checked: layerRecord.get("layer").getVisibility(),
+ handler: function (checkbox, checked) {
+ layerRecord.get("layer").setVisibility(checked);
+ }
+ });
+ }
+
+ this.panel.add(visibilityField);
+ this.panel.add(queryRadio);
+ this.panel.add({html: '<b>' + layerRecord.get("title") + '</b>', border: false});
+
+ this.panel.on("render", function(panel){
+ panel.getEl().swallowEvent("click");
+ });
+};
+
+Ext.extend(GeoExplorer.LayerMenuItem, Ext.menu.Adapter);
More information about the Commits
mailing list