GeoExt.ZoomSlider

Extends

• Ext.slider.SingleSlider

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.