GeoExt

Table Of Contents

Previous topic

GeoExt.WMSLegend

Next topic

GeoExt.LayerOpacitySliderTip

GeoExt.ZoomSlider

Extends
xtype
gx_zoomslider
class GeoExt.ZoomSlider(config)
Create a slider for controlling a map’s zoom level.

Example Use

Sample code to render a slider outside the map viewport:

var slider = new GeoExt.ZoomSlider({
    renderTo: document.body,
    width: 200,
    map: map
});

Sample code to add a slider to a map panel:

var panel = new GeoExt.MapPanel({
    renderTo: document.body,
    height: 300,
    width: 400,
    map: {
        controls: [new OpenLayers.Control.Navigation()]
    },
    layers: [new OpenLayers.Layer.WMS(
        "Global Imagery",
        "http://maps.opengeo.org/geowebcache/service/wms",
        {layers: "bluemarble"}
    )],
    extent: [-5, 35, 15, 55],
    items: [{
        xtype: "gx_zoomslider",
        aggressive: true,
        vertical: true,
        height: 100,
        x: 10,
        y: 20
    }]
});

Config Options

Configuration properties in addition to those listed for Ext.slider.SingleSlider.

aggressive
Boolean If set to true, the map is zoomed as soon as the thumb is moved. Otherwise the map is zoomed when the thumb is released (default).
baseCls
String The CSS class name for the slider elements. Default is “gx-zoomslider”.
map
OpenLayers.Map or GeoExt.MapPanel The map that the slider controls.

Public Methods

Public methods in addition to those listed for Ext.slider.SingleSlider.

ZoomSlider.getResolution()
Returns:Number The map resolution.

Get the resolution for the associated map based on the slider value.

ZoomSlider.getScale()
Returns:Number The map scale denominator.

Get the scale denominator for the associated map based on the slider value.

ZoomSlider.getZoom()
Returns:Number The map zoom level.

Get the zoom level for the associated map based on the slider value.