zackd/ol_zoom_slider2.html

## ol_zoom_slider2.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: 143px;
            margin: 0px;
            background: #fff;
            -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
        }
</style>

<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 = {
        // various ways of specifying similar things
        //
        //resolutions: [1.40625,0.703125,0.3515625,0.17578125,0.087890625,0.0439453125,0.02197265625,0.010986328125,0.0054931640625,0.00274658203125,0.00137329101],
        //scales: [50000000, 10000000],
        //maxResolution: 0.17578125,
        //minResolution: 0.0439453125,
        maxScale: 50000,
        minScale: 20000000,
        //numZoomLevels: 5,
        //units: "dd",
        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);

    /// custom controls (zoom, no pan)
    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 customControls = [
        new OpenLayers.Control.DragPan(), // mousedrag functionality
        new zoomSlider({zoomStopHeight:10}),
        new OpenLayers.Control.LayerSwitcher({'ascending':false})
    ];
    for (var i=0; i<customControls.length; i++) {
      var control = customControls[i];
      map.addControl(control);
      control.activate();
    }

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

    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: 143px;
	margin: 0px;
	background: #fff;
	-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
	}
	</style>

	<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 = {
	// various ways of specifying similar things
	//
	//resolutions: [1.40625,0.703125,0.3515625,0.17578125,0.087890625,0.0439453125,0.02197265625,0.010986328125,0.0054931640625,0.00274658203125,0.00137329101],
	//scales: [50000000, 10000000],
	//maxResolution: 0.17578125,
	//minResolution: 0.0439453125,
	maxScale: 50000,
	minScale: 20000000,
	//numZoomLevels: 5,
	//units: "dd",
	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);

	/// custom controls (zoom, no pan)
	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 customControls = [
	new OpenLayers.Control.DragPan(), // mousedrag functionality
	new zoomSlider({zoomStopHeight:10}),
	new OpenLayers.Control.LayerSwitcher({'ascending':false})
	];
	for (var i=0; i<customControls.length; i++) {
	var control = customControls[i];
	map.addControl(control);
	control.activate();
	}

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

	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>