zackd · May 11, 2010 18:01
diff --git a/ol_zoom_slider.html b/ol_zoom_slider.html
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
 <head>
 <title>openLayers</title>
 <style>
    html,body {
        height: 99%;
        width: 99%;
    }
    #map {
        width: 600px;
        height: 600px;
        border: 1px solid black;
    }
        /*
        .olControlPanel .olControlZoomInItemInactive {
            width:  18px;
            height: 18px;
            margin: 5px 0px 0px 5px;
            background: url("/openlayers/img/zoom-plus-mini.png") 0 0 no-repeat;
        }

        .olControlPanel .olControlZoomOutItemInactive {
            width:  18px;
            height: 18px;
            margin: 5px 0px 0px 5px;
            background: url("/openlayers/img/zoom-minus-mini.png") 0 0 no-repeat;
        }
        */
        .olControlPanZoomBar {
            display: block;
            width: 45px;
            height: 140px;
            margin: 0px;
            background: #fff;
            -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
        }
 </style>

 <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
 <script src='http://openlayers.org/api/OpenLayers.js'></script>

 <script type="text/javascript">
 var lon = 4.40796;
 var lat = 51.94087;
 var zoom = 7;
 var map, layer;

 function init(){
    OpenLayers.DOTS_PER_INCH = 72;
    var options = {
        minResolution: "auto",
        minExtent: new OpenLayers.Bounds(-1, -1, 1, 1),
        maxResolution: "auto",
        maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90),
        tileSize: new OpenLayers.Size(200,200),
        controls: []
    };

    map = new OpenLayers.Map('map', options);

    var layer = new OpenLayers.Layer.WMS("OpenLayers WMS",
            "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'});
    map.addLayer(layer);


    function zoomSlider(options) {
        
        this.control = new OpenLayers.Control.PanZoomBar(options);

        OpenLayers.Util.extend(this.control,{
            draw: function(px) {
                // initialize our internal div
                OpenLayers.Control.prototype.draw.apply(this, arguments);
                px = this.position.clone();

                // place the controls
                this.buttons = [];

                var sz = new OpenLayers.Size(18,18);
                var centered = new OpenLayers.Pixel(px.x+sz.w/2, px.y);
                
                this._addButton("zoomin", "zoom-plus-mini.png", centered.add(0, 5), sz);
                centered = this._addZoomBar(centered.add(0, sz.h + 5));
                this._addButton("zoomout", "zoom-minus-mini.png", centered, sz);
                return this.div;
            }
        });
        return this.control;
    }

    
    var panel = new OpenLayers.Control.Panel();
    panel.addControls([
        new zoomSlider({zoomStopHeight:11}),
        new OpenLayers.Control.LayerSwitcher({'ascending':false}),
    ]);
    map.addControl(panel);
    //
    map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
 }
 </script>
 </head>

 <body onload="init()">

  <h1>openLayers</h1>
  <h2>OpenLayers.Util.extend</h2>
  <p>Create a new class extending an OpenLayers.Controls class.</p>
  <div id="map"></div>

 </body>
 </html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
	<head>
	<title>openLayers</title>
	<style>
	html,body {
	height: 99%;
	width: 99%;
	}
	#map {
	width: 600px;
	height: 600px;
	border: 1px solid black;
	}
	/*
	.olControlPanel .olControlZoomInItemInactive {
	width: 18px;
	height: 18px;
	margin: 5px 0px 0px 5px;
	background: url("/openlayers/img/zoom-plus-mini.png") 0 0 no-repeat;
	}

	.olControlPanel .olControlZoomOutItemInactive {
	width: 18px;
	height: 18px;
	margin: 5px 0px 0px 5px;
	background: url("/openlayers/img/zoom-minus-mini.png") 0 0 no-repeat;
	}
	*/
	.olControlPanZoomBar {
	display: block;
	width: 45px;
	height: 140px;
	margin: 0px;
	background: #fff;
	-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
	}
	</style>

	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
	<script src='http://openlayers.org/api/OpenLayers.js'></script>

	<script type="text/javascript">
	var lon = 4.40796;
	var lat = 51.94087;
	var zoom = 7;
	var map, layer;

	function init(){
	OpenLayers.DOTS_PER_INCH = 72;
	var options = {
	minResolution: "auto",
	minExtent: new OpenLayers.Bounds(-1, -1, 1, 1),
	maxResolution: "auto",
	maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90),
	tileSize: new OpenLayers.Size(200,200),
	controls: []
	};

	map = new OpenLayers.Map('map', options);

	var layer = new OpenLayers.Layer.WMS("OpenLayers WMS",
	"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'});
	map.addLayer(layer);


	function zoomSlider(options) {

	this.control = new OpenLayers.Control.PanZoomBar(options);

	OpenLayers.Util.extend(this.control,{
	draw: function(px) {
	// initialize our internal div
	OpenLayers.Control.prototype.draw.apply(this, arguments);
	px = this.position.clone();

	// place the controls
	this.buttons = [];

	var sz = new OpenLayers.Size(18,18);
	var centered = new OpenLayers.Pixel(px.x+sz.w/2, px.y);

	this._addButton("zoomin", "zoom-plus-mini.png", centered.add(0, 5), sz);
	centered = this._addZoomBar(centered.add(0, sz.h + 5));
	this._addButton("zoomout", "zoom-minus-mini.png", centered, sz);
	return this.div;
	}
	});
	return this.control;
	}


	var panel = new OpenLayers.Control.Panel();
	panel.addControls([
	new zoomSlider({zoomStopHeight:11}),
	new OpenLayers.Control.LayerSwitcher({'ascending':false}),
	]);
	map.addControl(panel);
	//
	map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
	}
	</script>
	</head>

	<body onload="init()">

	<h1>openLayers</h1>
	<h2>OpenLayers.Util.extend</h2>
	<p>Create a new class extending an OpenLayers.Controls class.</p>
	<div id="map"></div>

	</body>
	</html>