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: ["minimizedMap","maximizedMap","pinned","unpinned"],
minimizeDiv:null,
maximizeDiv:null,
pinMapDiv:null,
mapPinned:false,
initialize:function (options) {
this.EVENT_TYPES =
OpenLayers.Control.MinimizeMaximizeMapControl.prototype.EVENT_TYPES.concat(
OpenLayers.Control.prototype.EVENT_TYPES);
OpenLayers.Control.prototype.initialize.apply(this, [options]);
},
destroy:function () {
OpenLayers.Event.stopObservingElement(this.minimizeDiv);
OpenLayers.Event.stopObservingElement(this.maximizeDiv);
OpenLayers.Control.prototype.destroy.apply(this, arguments);
},
draw:function () {
var div = OpenLayers.Control.prototype.draw.apply(this, arguments);
div.style.top ="0px";
div.style.right ="0px";
div.style.width ="81px";
div.style.height ="24px";
this.maximizeDiv = document.createElement("div");
this.minimizeDiv = document.createElement("div");
this.pinMapDiv = document.createElement("div");
this.maximizeDiv.className ="maximizeDiv";
this.minimizeDiv.className ="minimizeDiv";
this.pinMapDiv.className ="pinDiv";
this.maximizeDiv.title ="Karte maximieren";
this.minimizeDiv.title ="Karte minimieren";
this.pinMapDiv.title ="Karte festhalten";
OpenLayers.Event.observe(this.pinMapDiv,"click",
OpenLayers.Function.bindAsEventListener(this.pinMap,this));
OpenLayers.Event.observe(this.pinMapDiv,"mouseup",
OpenLayers.Function.bindAsEventListener(OpenLayers.Event.stop,this));
OpenLayers.Event.observe(this.pinMapDiv,"mousedown",
OpenLayers.Function.bindAsEventListener(OpenLayers.Event.stop,this));
div.appendChild(this.pinMapDiv);
OpenLayers.Event.observe(this.minimizeDiv,"click",
OpenLayers.Function.bindAsEventListener(this.minimizeWindow,this));
OpenLayers.Event.observe(this.minimizeDiv,"mouseup",
OpenLayers.Function.bindAsEventListener(OpenLayers.Event.stop,this));
OpenLayers.Event.observe(this.minimizeDiv,"mousedown",
OpenLayers.Function.bindAsEventListener(OpenLayers.Event.stop,this));
div.appendChild(this.minimizeDiv);
OpenLayers.Event.observe(this.maximizeDiv,"click",
OpenLayers.Function.bindAsEventListener(this.maximizeWindow,this));
OpenLayers.Event.observe(this.maximizeDiv,"mouseup",
OpenLayers.Function.bindAsEventListener(OpenLayers.Event.stop,this));
OpenLayers.Event.observe(this.maximizeDiv,"mousedown",
OpenLayers.Function.bindAsEventListener(OpenLayers.Event.stop,this));
div.appendChild(this.maximizeDiv);
return div;
},
pinMap:function (evt) {
this.mapPinned = !this.mapPinned;
this.setNavigationControls();
this.events.triggerEvent(this.mapPinned ?"pinned" :"unpinned");
},
setNavigationControls:function () {
var movecontrols
=this.map.getControlsByClass("OpenLayers.Control.Navigation").concat(
this.map.getControlsByClass("OpenLayers.Control.PanZoom"),
this.map.getControlsByClass("OpenLayers.Control.PanZoomBar"),
this.map.getControlsByClass("OpenLayers.Control.PanPanel"),
this.map.getControlsByClass("OpenLayers.Control.NavToolbar"),
this.map.getControlsByClass("OpenLayers.Control.ZoomBox"),
this.map.getControlsByClass("OpenLayers.Control.ZoomPanel"));
for (var i = 0; i< movecontrols.length; i++) {
if (this.mapPinned) {
movecontrols[i].deactivate();
}else {
movecontrols[i].activate();
}
}
this.pinMapDiv.className =this.mapPinned ?"pinPinnedDiv" :"pinDiv";
},
minimizeWindow:function (evt) {
if (!this.mapPinned) {
jQuery("#mapOpenLayer").animate({ height:"400px", width:"958px" },
600);
jQuery("#wrapheader").animate({ height:"100px" },"slow");
jQuery(".sitelogo").animate({ height:"90px" },"slow");
jQuery(".adw").animate({ height:"80px" },"slow");
jQuery(".AspNet-Menu-Horizontal").animate({ width:"960px"
},"slow");
jQuery("#wrapwebsite").animate({ width:"960px" },"slow");
tempMap =this.map;
setTimeout("tempMap.updateSize()", 700);
this.events.triggerEvent("minimizedMap");
if (evt !=null) {
OpenLayers.Event.stop(evt);
}
}
},
maximizeWindow:function (evt) {
if (!this.mapPinned) {
jQuery("#mapOpenLayer").animate({ height: (jQuery(window).height() - 85)
+"px", width: Math.max(960, (jQuery(window).width() - 220)) +"px" }, 600);
jQuery("#wrapheader").animate({ height:"0px" },"slow");
jQuery(".sitelogo").animate({ height:"0px" },"slow");
jQuery(".adw").animate({ height:"0px" },"slow");
jQuery(".AspNet-Menu-Horizontal").animate({ width: Math.max(960,
(jQuery(window).width() - 220)) +"px" },"slow");
jQuery("#wrapwebsite").animate({ width: Math.max(960, (jQuery(window).width() - 220))
+"px" },"slow");
tempMap =this.map;
setTimeout("tempMap.updateSize()", 700);
this.events.triggerEvent("maximizedMap");
if (evt !=null) {
OpenLayers.Event.stop(evt);
}
}
},
CLASS_NAME:"OpenLayers.Control.MinimizeMaximizeMapControl"
});
_______________________________________________
Users mailing list
[email protected]
http://lists.osgeo.org/mailman/listinfo/openlayers-users
