Este exemplo demonstra como desenvolver um novo controlo.
<html>
<head>
<title>Custom control example</title>
<script type="text/javascript" src="http://js.sapo.pt/Bundles/SAPOMapsAPI.js"></script>
<script type="text/javascript">
window.onload = init;
function init(){
var map = new SAPO.Maps.Map("map");
map.addControl(new SAPO.Maps.Control.MapType());
var ccontrol = new CustomControl();
map.addControl(ccontrol, new OpenLayers.Pixel(100, 100));
}
/**********************************************************
* Custom Control
***********************************************************/
function CustomControl(){
this.map = null;
this.div = null;
}
CustomControl.prototype = new OpenLayers.Control();
CustomControl.prototype.CLASS_NAME = 'Custom_Control';
/**
* Method: draw
*
* Parameters:
* {OpenLayers.Pixel} px - The place where the control should be positioned
*/
CustomControl.prototype.draw = function(px){
OpenLayers.Control.prototype.draw.apply(this, arguments);
//Create some basic HTML (just a black rectangle)
var myDiv = document.createElement("div");
myDiv.style.width = "200px";
myDiv.style.height = "200px";
myDiv.style.backgroundColor = "black";
//Append the HTML to the this.div property
this.div.appendChild(myDiv);
//Check if a desired position has been set
if(px){
this.div.style.top = px.y;
this.div.style.left = px.x;
}
else{
//Assume a default position
this.div.style.top = "0px";
this.div.style.left = "0px";
}
//MUST return this.div
return this.div;
}
</script>
</head>
<body>
<div id="map" style="width: 980px; height: 400px"></div>
</body>
</html>