Skip to content

Instantly share code, notes, and snippets.

@zackd
Created May 11, 2010 18:01
Show Gist options
  • Save zackd/397608 to your computer and use it in GitHub Desktop.
Save zackd/397608 to your computer and use it in GitHub Desktop.
custom zoom control panel for openLayers (no pan controls)
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment