Created
May 12, 2010 10:07
-
-
Save zackd/398408 to your computer and use it in GitHub Desktop.
improved: custom zoom control panel for openLayers (no pan controls)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment