Hi,
Is it possible to add a control/container to the map similar to the overlayswitcher?
What I have in mind is to use this custom container for map tools and allow the user to minimize the container to retain the maximum space for the map. I can do from controls outside of the map if required but would prefer if there was something available out of the box.
Rgds,
Liam
Liam,
Sure, it’s possible if you just want to make a custom map tool that is similar to OverlayerSwitcher. Can you detail it further? And we can give you some helpful hints about how to get it. The map tools in WebEdition are based on OpenLayers.Control class on client side. If want a custom map tool, we need to make the Custom map tool inherited from OpenLayers.Control on client side, and then define the MapTool on server side to synchronize the information between client and server side.
Additionally, I hope some answers that are included in your description:
1. Where your custom MapTool overlays? Out of map or in the map?
2. What control will be included in the custom MapTool?
Thanks and looking forward to your requirements.
Johnny
Hi Johnny,
Thanks but just to clarify.
The overlay switcher that comes out of the box is fine for overlays. This is what we are using for overlays contained within the map and the map semi transparent panel that contains the overlay checkboxes is fine.
The type of controls that we would include in this new map panel would be standard controls for searching for vehicles and other items of interest to us. Also it would be a container for map controls such a measure tools geo fences map config etc.
Attached below is a mock up of what I have in mind. It appears in a modified version of the Description panel from your samples.
The idea is to have the controls here contained within a map control similar to the overlay switcher so they can be easily contained within the map and minimized out if the way.
I'm afraid I don't fully understand your statement above - sorry. Can you clarify?
If want a custom map tool, we need to make the Custom map tool inherited from OpenLayers.Control on client side, and then define the MapTool on server side to synchronize the information between client and server side.
Rgds,
Liam
Liam,
Sorry for “If want a custom map tool, we need to make the Custom map tool inherited from OpenLayers.Control on client side, and then define the MapTool on server side to synchronize the information between client and server side.”, I just want to explain how to made a custom server side control in WebEdition generally. It seems that you don’t need this.
I was curious why you want the “Auto Size Custom Control” to be contained within a map control. The map controls, such as OverlaySwitcher, is a part of map and will be redrawn for each map refresh. However, from your scenario, the controls in the panel don’t change during each map refresh. I think it should be out of the map instead of a map control. Anyway, here are sample codes about how to get a custom control following your description:
<script type="text/javascript" language="javascript">
var OnMapCreating = function(map) {
// Define the custom control named with "ManagementControl".
OpenLayers.Control.ManagementControl = OpenLayers.Class(OpenLayers.Control, {
minimizeImagePath: null,
maximizeImagePath: null,
initialize: function(options) {
OpenLayers.Control.prototype.initialize.apply(this, arguments);
this.layerStates = [];
},
destroy: function() {
OpenLayers.Event.stopObservingElement(this.div);
OpenLayers.Event.stopObservingElement(this.minimizeDiv);
OpenLayers.Event.stopObservingElement(this.maximizeDiv);
OpenLayers.Control.prototype.destroy.apply(this, arguments);
},
setMap: function(map) {
OpenLayers.Control.prototype.setMap.apply(this, arguments);
},
draw: function() {
OpenLayers.Control.prototype.draw.apply(this);
// create layout divs
this.loadContents();
// set mode to minimize
if (!this.outsideViewport) {
this.minimizeControl();
}
// populate div with current info
// this.redraw();
this.div.style.width = 200;
this.div.style.height = 200;
return this.div;
},
loadContents: function() {
// layers list div
this.layersDiv = document.createElement("div");
this.layersDiv.id = this.id + "_layersDiv";
OpenLayers.Element.addClass(this.layersDiv, "layersDiv");
this.div.appendChild(this.layersDiv);
if (this.roundedCorner) {
OpenLayers.Rico.Corner.round(this.div, {
corners: "tl bl",
bgColor: "transparent",
color: this.roundedCornerColor,
blend: false
});
OpenLayers.Rico.Corner.changeOpacity(this.layersDiv, 0.75);
}
var sz = new OpenLayers.Size(18, 18);
// maximize button div
var img = this.maximizeImagePath;
this.maximizeDiv = OpenLayers.Util.createAlphaImageDiv("OpenLayers_Control_MaximizeDiv", null, sz, img, "absolute");
OpenLayers.Element.addClass(this.maximizeDiv, "maximizeDiv");
this.maximizeDiv.style.display = "none";
OpenLayers.Event.observe(this.maximizeDiv, "click", OpenLayers.Function.bindAsEventListener(this.maximizeControl, this));
this.div.appendChild(this.maximizeDiv);
// minimize button div
var img = this.minimizeImagePath;
var sz = new OpenLayers.Size(18, 18);
this.minimizeDiv = OpenLayers.Util.createAlphaImageDiv("OpenLayers_Control_MinimizeDiv", null, sz, img, "absolute");
OpenLayers.Element.addClass(this.minimizeDiv, "minimizeDiv");
this.minimizeDiv.style.display = "none";
OpenLayers.Event.observe(this.minimizeDiv, "click", OpenLayers.Function.bindAsEventListener(this.minimizeControl, this));
this.div.appendChild(this.minimizeDiv);
},
maximizeControl: function(e) {
// set the div's width and height to empty values, so
// the div dimensions can be controlled by CSS
this.div.style.width = "";
this.div.style.height = "";
this.showControls(false);
if (e != null) {
OpenLayers.Event.stop(e);
}
},
minimizeControl: function(e) {
// to minimize the control we set its div's width
// and height to 0px, we cannot just set "display"
// to "none" because it would hide the maximize
// div
this.div.style.width = "0px";
this.div.style.height = "0px";
this.showControls(true);
if (e != null) {
OpenLayers.Event.stop(e);
}
},
showControls: function(minimize) {
this.maximizeDiv.style.display = minimize ? "" : "none";
this.minimizeDiv.style.display = minimize ? "none" : "";
this.layersDiv.style.display = minimize ? "none" : "";
},
CLASS_NAME: "OpenLayers.Control.ManagementControl"
});
}
var OnMapCreated = function(map) {
var manageControl = new OpenLayers.Control.ManagementControl();
manageControl.minimizeImagePath = "../../dhide.png";
manageControl.maximizeImagePath = "../../dshow.png";
map.addControl(manageControl);
}
</script>
Thanks,
Johnny
Hi Johnny,
Thanks for the clarification, code and advice.
Noted on the redraw action on the controls embedded in the map. This was an important point to make, thanks I hadn’t considered it.
Rgds,
Liam
Liam,
You are so welcome. You can get the source code of DescriptionPanel control used in samples from “Istallation Folder\ThinkGeo\Map Suite Web Full Edition 4.0\Samples\CSharp Samples\Helper”, maybe it’s helpful to you.
Thanks,
Johnny
Hi Johnny,
I've already done that and it was very useful in the initial screens and for proof of concept. Its a nice control.
Rgds,
Liam
Hi Liam,
You are so welcome. Any questions please let us know.
Additionally, it seems that you were asked for a gotomeeting in another thread, can you give our developer a note if you are ready?
Thanks,
Johnny
Hi Johnny,
I have not received the developer contact so I've sent a mail to forumsupport@thinkgeo.com and am ready to get the details of the meeting.
Rgds,
Liam
That’s nice, hope everything goes well.
Johnny