<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="Content-Type">
</head>
<body text="#000000" bgcolor="#ffffff">
<pre style="font-family: Consolas; font-size: 13px; color: black; background: none repeat scroll 0% 0% white;">Hi,
this is our control. It uses jQuery for animation and has a pin map function, when a user doesn't want to pan or zoom. I shorten the comments I hope it's self-explaining.
OpenLayers.Control.MinimizeMaximizeMapControl = OpenLayers.Class(OpenLayers.Control,
{
EVENT_TYPES: [<span style="color: maroon;">"minimizedMap"</span>, <span style="color: maroon;">"maximizedMap"</span>, <span style="color: maroon;">"pinned"</span>, <span style="color: maroon;">"unpinned"</span>],
minimizeDiv: <span style="color: blue;">null</span>,
maximizeDiv: <span style="color: blue;">null</span>,
pinMapDiv: <span style="color: blue;">null</span>,
mapPinned: <span style="color: blue;">false</span>,
initialize: <span style="color: blue;">function</span> (options) {
<span style="color: blue;">this</span>.EVENT_TYPES =
OpenLayers.Control.MinimizeMaximizeMapControl.prototype.EVENT_TYPES.concat(
OpenLayers.Control.prototype.EVENT_TYPES);
OpenLayers.Control.prototype.initialize.apply(<span style="color: blue;">this</span>, [options]);
},
destroy: <span style="color: blue;">function</span> () {
OpenLayers.Event.stopObservingElement(<span style="color: blue;">this</span>.minimizeDiv);
OpenLayers.Event.stopObservingElement(<span style="color: blue;">this</span>.maximizeDiv);
OpenLayers.Control.prototype.destroy.apply(<span style="color: blue;">this</span>, arguments);
},
draw: <span style="color: blue;">function</span> () {
<span style="color: blue;">var</span> div = OpenLayers.Control.prototype.draw.apply(<span style="color: blue;">this</span>, arguments);
div.style.top = <span style="color: maroon;">"0px"</span>;
div.style.right = <span style="color: maroon;">"0px"</span>;
div.style.width = <span style="color: maroon;">"81px"</span>;
div.style.height = <span style="color: maroon;">"24px"</span>;
<span style="color: blue;">this</span>.maximizeDiv = document.createElement(<span style="color: maroon;">"div"</span>);
<span style="color: blue;">this</span>.minimizeDiv = document.createElement(<span style="color: maroon;">"div"</span>);
<span style="color: blue;">this</span>.pinMapDiv = document.createElement(<span style="color: maroon;">"div"</span>);
<span style="color: blue;">this</span>.maximizeDiv.className = <span style="color: maroon;">"maximizeDiv"</span>;
<span style="color: blue;">this</span>.minimizeDiv.className = <span style="color: maroon;">"minimizeDiv"</span>;
<span style="color: blue;">this</span>.pinMapDiv.className = <span style="color: maroon;">"pinDiv"</span>;
<span style="color: blue;">this</span>.maximizeDiv.title = <span style="color: maroon;">"Karte maximieren"</span>;
<span style="color: blue;">this</span>.minimizeDiv.title = <span style="color: maroon;">"Karte minimieren"</span>;
<span style="color: blue;">this</span>.pinMapDiv.title = <span style="color: maroon;">"Karte festhalten"</span>;
OpenLayers.Event.observe(<span style="color: blue;">this</span>.pinMapDiv, <span style="color: maroon;">"click"</span>, OpenLayers.Function.bindAsEventListener(<span style="color: blue;">this</span>.pinMap, <span style="color: blue;">this</span>));
OpenLayers.Event.observe(<span style="color: blue;">this</span>.pinMapDiv, <span style="color: maroon;">"mouseup"</span>, OpenLayers.Function.bindAsEventListener(OpenLayers.Event.stop, <span style="color: blue;">this</span>));
OpenLayers.Event.observe(<span style="color: blue;">this</span>.pinMapDiv, <span style="color: maroon;">"mousedown"</span>, OpenLayers.Function.bindAsEventListener(OpenLayers.Event.stop, <span style="color: blue;">this</span>));
div.appendChild(<span style="color: blue;">this</span>.pinMapDiv);
OpenLayers.Event.observe(<span style="color: blue;">this</span>.minimizeDiv, <span style="color: maroon;">"click"</span>, OpenLayers.Function.bindAsEventListener(<span style="color: blue;">this</span>.minimizeWindow, <span style="color: blue;">this</span>));
OpenLayers.Event.observe(<span style="color: blue;">this</span>.minimizeDiv, <span style="color: maroon;">"mouseup"</span>, OpenLayers.Function.bindAsEventListener(OpenLayers.Event.stop, <span style="color: blue;">this</span>));
OpenLayers.Event.observe(<span style="color: blue;">this</span>.minimizeDiv, <span style="color: maroon;">"mousedown"</span>, OpenLayers.Function.bindAsEventListener(OpenLayers.Event.stop, <span style="color: blue;">this</span>));
div.appendChild(<span style="color: blue;">this</span>.minimizeDiv);
OpenLayers.Event.observe(<span style="color: blue;">this</span>.maximizeDiv, <span style="color: maroon;">"click"</span>, OpenLayers.Function.bindAsEventListener(<span style="color: blue;">this</span>.maximizeWindow, <span style="color: blue;">this</span>));
OpenLayers.Event.observe(<span style="color: blue;">this</span>.maximizeDiv, <span style="color: maroon;">"mouseup"</span>, OpenLayers.Function.bindAsEventListener(OpenLayers.Event.stop, <span style="color: blue;">this</span>));
OpenLayers.Event.observe(<span style="color: blue;">this</span>.maximizeDiv, <span style="color: maroon;">"mousedown"</span>, OpenLayers.Function.bindAsEventListener(OpenLayers.Event.stop, <span style="color: blue;">this</span>));
div.appendChild(<span style="color: blue;">this</span>.maximizeDiv);
<span style="color: blue;">return</span> div;
},
pinMap: <span style="color: blue;">function</span> (evt) {
<span style="color: blue;">this</span>.mapPinned = !<span style="color: blue;">this</span>.mapPinned;
<span style="color: blue;">this</span>.setNavigationControls();
<span style="color: blue;">this</span>.events.triggerEvent(<span style="color: blue;">this</span>.mapPinned ? <span style="color: maroon;">"pinned"</span> : <span style="color: maroon;">"unpinned"</span>);
},
setNavigationControls: <span style="color: blue;">function</span> () {
<span style="color: blue;">var</span> movecontrols = <span style="color: blue;">this</span>.map.getControlsByClass(<span style="color: maroon;">"OpenLayers.Control.Navigation"</span>).concat(
<span style="color: blue;">this</span>.map.getControlsByClass(<span style="color: maroon;">"OpenLayers.Control.PanZoom"</span>),
<span style="color: blue;">this</span>.map.getControlsByClass(<span style="color: maroon;">"OpenLayers.Control.PanZoomBar"</span>),
<span style="color: blue;">this</span>.map.getControlsByClass(<span style="color: maroon;">"OpenLayers.Control.PanPanel"</span>),
<span style="color: blue;">this</span>.map.getControlsByClass(<span style="color: maroon;">"OpenLayers.Control.NavToolbar"</span>),
<span style="color: blue;">this</span>.map.getControlsByClass(<span style="color: maroon;">"OpenLayers.Control.ZoomBox"</span>),
<span style="color: blue;">this</span>.map.getControlsByClass(<span style="color: maroon;">"OpenLayers.Control.ZoomPanel"</span>));
<span style="color: blue;">for</span> (<span style="color: blue;">var</span> i = 0; i < movecontrols.length; i++) {
<span style="color: blue;">if</span> (<span style="color: blue;">this</span>.mapPinned) {
movecontrols[i].deactivate();
} <span style="color: blue;">else</span> {
movecontrols[i].activate();
}
}
<span style="color: blue;">this</span>.pinMapDiv.className = <span style="color: blue;">this</span>.mapPinned ? <span style="color: maroon;">"pinPinnedDiv"</span> : <span style="color: maroon;">"pinDiv"</span>;
},
minimizeWindow: <span style="color: blue;">function</span> (evt) {
<span style="color: blue;">if</span> (!<span style="color: blue;">this</span>.mapPinned) {
jQuery(<span style="color: maroon;">"#mapOpenLayer"</span>).animate({ height: <span style="color: maroon;">"400px"</span>, width: <span style="color: maroon;">"958px"</span> }, 600);
jQuery(<span style="color: maroon;">"#wrapheader"</span>).animate({ height: <span style="color: maroon;">"100px"</span> }, <span style="color: maroon;">"slow"</span>);
jQuery(<span style="color: maroon;">".sitelogo"</span>).animate({ height: <span style="color: maroon;">"90px"</span> }, <span style="color: maroon;">"slow"</span>);
jQuery(<span style="color: maroon;">".adw"</span>).animate({ height: <span style="color: maroon;">"80px"</span> }, <span style="color: maroon;">"slow"</span>);
jQuery(<span style="color: maroon;">".AspNet-Menu-Horizontal"</span>).animate({ width: <span style="color: maroon;">"960px"</span> }, <span style="color: maroon;">"slow"</span>);
jQuery(<span style="color: maroon;">"#wrapwebsite"</span>).animate({ width: <span style="color: maroon;">"960px"</span> }, <span style="color: maroon;">"slow"</span>);
tempMap = <span style="color: blue;">this</span>.map;
setTimeout(<span style="color: maroon;">"tempMap.updateSize()"</span>, 700);
<span style="color: blue;">this</span>.events.triggerEvent(<span style="color: maroon;">"minimizedMap"</span>);
<span style="color: blue;">if</span> (evt != <span style="color: blue;">null</span>) {
OpenLayers.Event.stop(evt);
}
}
},
maximizeWindow: <span style="color: blue;">function</span> (evt) {
<span style="color: blue;">if</span> (!<span style="color: blue;">this</span>.mapPinned) {
jQuery(<span style="color: maroon;">"#mapOpenLayer"</span>).animate({ height: (jQuery(window).height() - 85) + <span style="color: maroon;">"px"</span>, width: Math.max(960, (jQuery(window).width() - 220)) + <span style="color: maroon;">"px"</span> }, 600);
jQuery(<span style="color: maroon;">"#wrapheader"</span>).animate({ height: <span style="color: maroon;">"0px"</span> }, <span style="color: maroon;">"slow"</span>);
jQuery(<span style="color: maroon;">".sitelogo"</span>).animate({ height: <span style="color: maroon;">"0px"</span> }, <span style="color: maroon;">"slow"</span>);
jQuery(<span style="color: maroon;">".adw"</span>).animate({ height: <span style="color: maroon;">"0px"</span> }, <span style="color: maroon;">"slow"</span>);
jQuery(<span style="color: maroon;">".AspNet-Menu-Horizontal"</span>).animate({ width: Math.max(960, (jQuery(window).width() - 220)) + <span style="color: maroon;">"px"</span> }, <span style="color: maroon;">"slow"</span>);
jQuery(<span style="color: maroon;">"#wrapwebsite"</span>).animate({ width: Math.max(960, (jQuery(window).width() - 220)) + <span style="color: maroon;">"px"</span> }, <span style="color: maroon;">"slow"</span>);
tempMap = <span style="color: blue;">this</span>.map;
setTimeout(<span style="color: maroon;">"tempMap.updateSize()"</span>, 700);
<span style="color: blue;">this</span>.events.triggerEvent(<span style="color: maroon;">"maximizedMap"</span>);
<span style="color: blue;">if</span> (evt != <span style="color: blue;">null</span>) {
OpenLayers.Event.stop(evt);
}
}
},
CLASS_NAME: <span style="color: maroon;">"OpenLayers.Control.MinimizeMaximizeMapControl"</span>
});</pre>
</body>
</html>