[Commits] r423 - in sandbox/opengeo/geoexplorer: . examples lib lib/GeoExt/widgets lib/GeoExt/widgets/tips
commits at geoext.org
commits at geoext.org
Sat Apr 18 18:23:22 CEST 2009
Author: tschaub
Date: 2009-04-18 18:23:22 +0200 (Sat, 18 Apr 2009)
New Revision: 423
Added:
sandbox/opengeo/geoexplorer/examples/scaleslider.html
sandbox/opengeo/geoexplorer/examples/scaleslider.js
sandbox/opengeo/geoexplorer/lib/GeoExt/widgets/ScaleSlider.js
sandbox/opengeo/geoexplorer/lib/GeoExt/widgets/tips/
sandbox/opengeo/geoexplorer/lib/GeoExt/widgets/tips/ScaleSliderTip.js
sandbox/opengeo/geoexplorer/lib/GeoExt/widgets/tips/SliderTip.js
Modified:
sandbox/opengeo/geoexplorer/lib/GeoExt.js
sandbox/opengeo/geoexplorer/modifications.txt
Log:
Add scale slider and tips (patch for #16)
Added: sandbox/opengeo/geoexplorer/examples/scaleslider.html
===================================================================
--- sandbox/opengeo/geoexplorer/examples/scaleslider.html (rev 0)
+++ sandbox/opengeo/geoexplorer/examples/scaleslider.html 2009-04-18 16:23:22 UTC (rev 423)
@@ -0,0 +1,20 @@
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="../../ext/resources/css/ext-all.css"></link>
+ <link rel="stylesheet" type="text/css" href="../../ext/examples/shared/examples.css"></link>
+ <script type="text/javascript" src="../../openlayers/lib/OpenLayers.js"></script>
+ <script type="text/javascript" src="../../ext/adapter/ext/ext-base.js"></script>
+ <script type="text/javascript" src="../../ext/ext-all.js"></script>
+ <script type="text/javascript" src="../lib/GeoExt.js"></script>
+ <script type="text/javascript" src="scaleslider.js"></script>
+ </head>
+ <body>
+ <h1>GeoExt.ScaleSlider</h1>
+ <p>The ScaleSlider is a replacement for the ZoomPanel, using an Ext.Slider.
+ It is also possible to add a special tooltip plugin, ScaleSliderTip, which
+ will show the zoom level, scale and resolution while dragging the slider
+ (the content is configurable).<p>
+ <p>The js is not minified so it is readable. See <a href="scaleslider.js">scaleslider.js</a>.</p>
+ <div id="map-container"></div>
+ </body>
+</html>
Added: sandbox/opengeo/geoexplorer/examples/scaleslider.js
===================================================================
--- sandbox/opengeo/geoexplorer/examples/scaleslider.js (rev 0)
+++ sandbox/opengeo/geoexplorer/examples/scaleslider.js 2009-04-18 16:23:22 UTC (rev 423)
@@ -0,0 +1,40 @@
+var panel, slider;
+
+Ext.onReady(function() {
+
+ // create a map panel with an embedded slider
+ panel = new GeoExt.MapPanel({
+ title: "Map",
+ renderTo: "map-container",
+ height: 300,
+ width: 400,
+ map: {
+ controls: [new OpenLayers.Control.Navigation()]
+ },
+ layers: [new OpenLayers.Layer.WMS(
+ "bluemarble",
+ "http://sigma.openplans.org/geoserver/wms?",
+ {layers: 'bluemarble'}
+ )],
+ extent: "-5,35,15,55",
+ items: [{
+ xtype: "gx_scaleslider",
+ vertical: true,
+ height: 100,
+ x: 10,
+ y: 20,
+ plugins: new GeoExt.ScaleSliderTip()
+ }]
+ });
+
+ // create a separate slider bound to the map but displayed elsewhere
+ slider = new GeoExt.ScaleSlider({
+ map: panel.map,
+ width: 200,
+ plugins: new GeoExt.ScaleSliderTip({
+ template: "<div>Zoom Level: {zoom}</div>"
+ }),
+ renderTo: document.body
+ });
+
+});
Added: sandbox/opengeo/geoexplorer/lib/GeoExt/widgets/ScaleSlider.js
===================================================================
--- sandbox/opengeo/geoexplorer/lib/GeoExt/widgets/ScaleSlider.js (rev 0)
+++ sandbox/opengeo/geoexplorer/lib/GeoExt/widgets/ScaleSlider.js 2009-04-18 16:23:22 UTC (rev 423)
@@ -0,0 +1,210 @@
+/**
+ * Copyright (c) 2008 The Open Planning Project
+ */
+
+Ext.namespace("GeoExt");
+
+/**
+ * Class: GeoExt.ScaleSlider
+ */
+GeoExt.ScaleSlider = Ext.extend(Ext.Slider, {
+
+ /**
+ * Property: map
+ * {OpenLayers.Map} The map that this slider is connected to
+ */
+ map: null,
+
+ // private overrides
+ minValue: null,
+ maxValue: null,
+
+ /**
+ * Property: baseCls
+ */
+ baseCls: "gx-scaleslider",
+
+ /**
+ * Property: updating
+ * {Boolean} The slider position is being updated by itself (based on
+ * map zoomend).
+ */
+ updating: false,
+
+ // private override
+ initComponent: function() {
+ GeoExt.ScaleSlider.superclass.initComponent.call(this);
+
+ if(this.map) {
+ this.bind(this.map);
+ }
+ this.on({
+ "changecomplete": this.changeHandler,
+ "beforedestroy": this.unbind,
+ scope: this
+ });
+
+ },
+
+ /**
+ * Override onRender to set base css class.
+ */
+ onRender: function() {
+ GeoExt.ScaleSlider.superclass.onRender.apply(this, arguments);
+ this.el.addClass(this.baseCls);
+ },
+
+ /**
+ * Override afterRender because the render event is fired too early
+ * to call update.
+ */
+ afterRender : function(){
+ Ext.Slider.superclass.afterRender.apply(this, arguments);
+ this.update();
+ },
+
+ /**
+ * Method: addToMap
+ * Called by a MapPanel if this component is one of the items in the panel.
+ */
+ addToMap: function(panel) {
+ this.on({
+ render: function() {
+ var el = this.getEl();
+ el.setStyle({
+ position: "absolute",
+ zIndex: panel.map.Z_INDEX_BASE.Control
+ });
+ el.on({
+ mousedown: this.stopMouseEvents,
+ click: this.stopMouseEvents
+ });
+ },
+ scope: this
+ });
+ this.bind(panel.map);
+ },
+
+ /**
+ * Method: stopMouseEvents
+ */
+ stopMouseEvents: function(e) {
+ e.stopEvent();
+ },
+
+ /**
+ * Method: removeFromMap
+ * Called by a MapPanel if this component is one of the items in the panel.
+ */
+ removeFromMap: function(panel) {
+ var el = this.getEl();
+ el.un("mousedown", this.stopMouseEvents);
+ el.un("click", this.stopMouseEvents);
+ this.unbind();
+ },
+
+ /**
+ * Method: bind
+ *
+ * Parameters:
+ * map - {OpenLayers.Map}
+ */
+ bind: function(map) {
+ this.map = map;
+ this.map.events.on({
+ zoomend: this.update,
+ changebaselayer: this.initZoomValues,
+ scope: this
+ });
+ if(this.map.baseLayer) {
+ this.initZoomValues();
+ }
+ },
+
+ /**
+ * Method: unbind
+ */
+ unbind: function() {
+ if(this.map) {
+ this.map.events.un({
+ zoomend: this.update,
+ changebaselayer: this.initZoomValues,
+ scope: this
+ });
+ }
+ },
+
+ /**
+ * Method: initZoomValues
+ * Set the min/max values for the slider if not set in the config.
+ */
+ initZoomValues: function() {
+ var layer = this.map.baseLayer;
+ if(this.initialConfig.minValue === undefined) {
+ this.minValue = layer.minZoomLevel || 0;
+ }
+ if(this.initialConfig.maxValue === undefined) {
+ this.maxValue = layer.maxZoomLevel || layer.numZoomLevels;
+ }
+ },
+
+ /**
+ * Method: getZoom
+ * Get the zoom level for the associated map based on the slider value.
+ *
+ * Returns:
+ * {Number} The map zoom level.
+ */
+ getZoom: function() {
+ return this.getValue();
+ },
+
+ /**
+ * Method: getScale
+ * Get the scale denominator for the associated map based on the slider value.
+ *
+ * Returns:
+ * {Number} The map scale denominator.
+ */
+ getScale: function() {
+ return OpenLayers.Util.getScaleFromResolution(
+ this.map.getResolutionForZoom(this.getValue()),
+ this.map.getUnits()
+ );
+ },
+
+ /**
+ * Method: getResolution
+ * Get the resolution for the associated map based on the slider value.
+ *
+ * Returns:
+ * {Number} The map resolution.
+ */
+ getResolution: function() {
+ return this.map.getResolutionForZoom(this.getValue());
+ },
+
+ /**
+ * Method: changeHandler
+ * Registered as a listener for slider changecomplete. Zooms the map.
+ */
+ changeHandler: function() {
+ if(this.map && !this.updating) {
+ this.map.zoomTo(this.getValue());
+ }
+ },
+
+ /**
+ * Method: update
+ * Registered as a listener for map zoomend. Updates the value of the slider.
+ */
+ update: function() {
+ if(this.rendered && this.map) {
+ this.updating = true;
+ this.setValue(this.map.getZoom());
+ this.updating = false;
+ }
+ }
+
+});
+Ext.reg('gx_scaleslider', GeoExt.ScaleSlider);
Added: sandbox/opengeo/geoexplorer/lib/GeoExt/widgets/tips/ScaleSliderTip.js
===================================================================
--- sandbox/opengeo/geoexplorer/lib/GeoExt/widgets/tips/ScaleSliderTip.js (rev 0)
+++ sandbox/opengeo/geoexplorer/lib/GeoExt/widgets/tips/ScaleSliderTip.js 2009-04-18 16:23:22 UTC (rev 423)
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2008 The Open Planning Project
+ */
+
+/**
+ * @include GeoExt/widgets/tips/SliderTip.js
+ */
+
+Ext.namespace("GeoExt");
+
+/**
+ * Class: GeoExt.ScaleSliderTip
+ * A slider to control and show the current scale of a map.
+ */
+GeoExt.ScaleSliderTip = Ext.extend(GeoExt.SliderTip, {
+
+ /**
+ * Property: template
+ * {String} Template for the tip. Can be customized using the following
+ * keywords in curly braces:
+ * - *zoom* the zoom level
+ * - *resolution* the resolution
+ * - *scale* the scale denominator
+ */
+ template: '<div>Zoom Level: {zoom}</div>' +
+ '<div>Resolution: {resolution}</div>' +
+ '<div>Scale: 1 : {scale}</div>',
+
+ /**
+ * Property: compiledTemplate
+ * {Ext.Template} The template compiled from the <template> string on init.
+ */
+ compiledTemplate: null,
+
+ /**
+ * Method: init
+ */
+ init: function(slider) {
+ this.compiledTemplate = new Ext.Template(this.template);
+ GeoExt.ScaleSliderTip.superclass.init.call(this, slider);
+ },
+
+ /**
+ * Method: getText
+ *
+ * Parameters:
+ * slider - {Ext.Slider} the slider this tip is attached to.
+ */
+ getText : function(slider) {
+ var data = {
+ zoom: slider.getZoom(),
+ resolution: slider.getResolution(),
+ scale: Math.round(slider.getScale())
+ };
+ return this.compiledTemplate.apply(data);
+ }
+});
Added: sandbox/opengeo/geoexplorer/lib/GeoExt/widgets/tips/SliderTip.js
===================================================================
--- sandbox/opengeo/geoexplorer/lib/GeoExt/widgets/tips/SliderTip.js (rev 0)
+++ sandbox/opengeo/geoexplorer/lib/GeoExt/widgets/tips/SliderTip.js 2009-04-18 16:23:22 UTC (rev 423)
@@ -0,0 +1,58 @@
+Ext.namespace("GeoExt");
+
+GeoExt.SliderTip = Ext.extend(Ext.Tip, {
+
+ /**
+ * Property: hover
+ * {Boolean} Display the tip when hovering over the thumb. If false, tip
+ * will only be displayed while dragging. Default is true.
+ */
+ hover: true,
+
+ /**
+ * Property: dragging
+ * {Boolean} The thumb is currently being dragged.
+ */
+ dragging: false,
+
+ minWidth: 10,
+ minWidth: 10,
+ offsets : [0, -10],
+ init : function(slider){
+ slider.on('dragstart', this.onSlide, this);
+ slider.on('drag', this.onSlide, this);
+ slider.on('dragend', this.hide, this);
+ slider.on('destroy', this.destroy, this);
+ if(this.hover) {
+ slider.on('render', this.registerThumbListeners, this);
+ }
+ this.slider = slider;
+ },
+
+ registerThumbListeners: function() {
+ this.slider.thumb.on({
+ "mouseover": function() {
+ this.onSlide(this.slider);
+ this.dragging = false;
+ },
+ "mouseout": function() {
+ if(!this.dragging) {
+ this.hide.apply(this, arguments);
+ }
+ },
+ scope: this
+ });
+ },
+
+ onSlide : function(slider) {
+ this.dragging = true;
+ this.show();
+ this.body.update(this.getText(slider));
+ this.doAutoWidth();
+ this.el.alignTo(slider.thumb, 'b-t?', this.offsets);
+ },
+
+ getText : function(slider) {
+ return slider.getValue();
+ }
+});
Modified: sandbox/opengeo/geoexplorer/lib/GeoExt.js
===================================================================
--- sandbox/opengeo/geoexplorer/lib/GeoExt.js 2009-04-18 16:21:32 UTC (rev 422)
+++ sandbox/opengeo/geoexplorer/lib/GeoExt.js 2009-04-18 16:23:22 UTC (rev 423)
@@ -72,6 +72,9 @@
"GeoExt/widgets/LegendPanel.js",
"GeoExt/widgets/MapPanel.js",
"GeoExt/widgets/Popup.js",
+ "GeoExt/widgets/ScaleSlider.js",
+ "GeoExt/widgets/tips/SliderTip.js",
+ "GeoExt/widgets/tips/ScaleSliderTip.js",
"GeoExt/widgets/tree/TristateCheckboxNode.js",
"GeoExt/widgets/tree/LayerNode.js",
"GeoExt/widgets/tree/LayerContainer.js"
Modified: sandbox/opengeo/geoexplorer/modifications.txt
===================================================================
--- sandbox/opengeo/geoexplorer/modifications.txt 2009-04-18 16:21:32 UTC (rev 422)
+++ sandbox/opengeo/geoexplorer/modifications.txt 2009-04-18 16:23:22 UTC (rev 423)
@@ -13,4 +13,5 @@
* Add reordering support to LegendPanel (geoext #2)
* Rename anchor to anchorPopup (see #44)
* Let components do special processing before being added to or removed from a MapPanel (#45)
+ * Add ScaleSlider and tips (#16)
More information about the Commits
mailing list