Este exemplo demonstra como poderá definir uma nova overlay para colocar sobre o mapa.
<html>
<head>
<title>Custom Overlay</title>
<script type="text/javascript" src="http://js.staging.sapo.pt/Bundles/SAPOMapsAPI.js"></script>
<script type='text/javascript'>
window.onload = init;
var map;
var co;
function init(){
map = new SAPO.Maps.Map('divMap');
co = new COverlay();
map.addOverlay(co);
co.registerEvent('click', this, function(overlay){ overlay.openPopup('<h1>Hello World</h1><br/>'); });
}
/***********************************************************
* ***** Custom Overlay
************************************************************/
function COverlay(){
var lonlat = new OpenLayers.LonLat(-9, 38).transform(new OpenLayers.Projection('EPSG:4326'), new OpenLayers.Projection('EPSG:900913'));
this.feature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat));
}
COverlay.prototype = new SAPO.Maps.Overlay();
COverlay.prototype.getFeature = function(){
return this.feature;
}
/**
* If you want to open a popup over your overlay, you must override this method
*/
COverlay.prototype.getPopupAnchor = function(){
var lon = this.feature.geometry.x;
var lat = this.feature.geometry.y;
return new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
}
</script>
</head>
<body>
<div id='divMap' style='width:980px;height:400px;'></div>
</body>
</html>