SAPO Mapas API

				<html>
					<head>
						<title>Test SAPO.Maps.Overlay.Polylines</title>
						<script type="text/javascript" src="http://js.sapo.pt/Bundles/SAPOMapsAPI.js"></script>
				
						<script type="text/javascript">
				
							var map;
							function init(){
								map = new SAPO.Maps.Map('map');
							}
							
							function isValid(){
								if(!polyline){
									alert('you must add a polyline first');
									return false;
								}
								return true;
							}
							
							var polyline;	
							function sapoPolyline(){
								var points = [new OpenLayers.LonLat(-9, 39),
											 	new OpenLayers.LonLat(-8, 38),
												new OpenLayers.LonLat(-6, 37),
												new OpenLayers.LonLat(-7, 38)
											 ];
											 
								var style = {
									strokeColor: '#ff0000',
									strokeDashstyle: 'dash',
									strokeOpacity: 0.5
								};
								
								polyline = new SAPO.Maps.Polyline(points, style);
								map.addOverlay(polyline);
							}
							
							function polyline_nrvertex() {
								if(!isValid())return;
								alert(polyline.getVertexCount());
							}
							
							function polyline_getvertex(){
								if(!isValid())return;
								var lonlat = polyline.getVertex(1);
								alert('getting vertex number 1. Vertex lat=' + lonlat.lat + ' lon=' + lonlat.lon);
							}
							
							function polyline_length(){
								if(!isValid())return;
								alert('line length = ' + polyline.getLength() + ' meters');
							}
							
							function polyline_bounds(){
								if(!isValid())return;
								var bounds = polyline.getBounds();
								alert('bounds: minlat:' + bounds.bottom + ' minlon:' + bounds.left + ' maxlat:' + bounds.right + ' maxLon:' + bounds.top);
							}
							
							function polyline_hide(){
								if(!isValid())return;
								polyline.hide();
							}
							
							function polyline_show(){
								if(!isValid())return;
								polyline.show();
							}
							
							function polyline_insertvertex(){
								if(!isValid())return;
								var lonlat = new OpenLayers.LonLat(-5, 35);
								polyline.insertVertex(2, lonlat);
							}
							
							function polyline_changestyle(){
								if(!isValid())return;
								var style = {
									cursor: 'pointer',
									strokeColor: '#FF00FF',
									strokeOpacity: 1,
									strokeWidth: 10
								};
								
								polyline.setStyle(style);
							}
							
							function polyline_visible(){
								if(!isValid())return;
								alert(polyline.isHidden());
							}
							
							function enableEvents(){
								if(!isValid())return;
								polyline.registerEvent('mouseover', this, events.mouseover);
								polyline.registerEvent('mouseout', this, events.mouseout);
								polyline.registerEvent('mousedown', this, events.mousedown);
								polyline.registerEvent('mouseup', this, events.mouseup);
								polyline.registerEvent('click', this, events.click);
								polyline.registerEvent('dbclick', this, events.dbclick);
								polyline.registerEvent('drag', this, events.drag);
								polyline.registerEvent('dragstart', this, events.dragstart);
								polyline.registerEvent('dragend', this, events.dragend);
							}
							
							function disableEvents(){
								if(!isValid())return;
								cleanMsg();
								polyline.unRegisterEvent('mouseover', this, events.mouseover);
								polyline.unRegisterEvent('mouseout', this, events.mouseout);
								polyline.unRegisterEvent('mousedown', this, events.mousedown);
								polyline.unRegisterEvent('mouseup', this, events.mouseup);
								polyline.unRegisterEvent('click', this, events.click);
								polyline.unRegisterEvent('dbclick', this, events.dbclick);
								polyline.unRegisterEvent('drag', this, events.drag);
								polyline.unRegisterEvent('dragstart', this, events.dragstart);
								polyline.unRegisterEvent('dragend', this, events.dragend);
							}
							
							function clone(){
								if(!isValid())return;
								polyline = polyline.clone();
								map.addOverlay(polyline);
							}
							
							var events = {
								mouseover: function(){ addMsg('mouseover'); },
								mouseout: function(){ addMsg('mouseout'); },
								mousedown: function(){ addMsg('mousedown'); },
								mouseup: function(){ addMsg('mouseup'); },				
								click: function(){ addMsg('click'); },
								dbclick: function(){ addMsg('dbclick'); }
							}
							
							function addMsg(msg){
								var elem = document.getElementById('debug');
								elem.innerHTML += ' -' + msg + '- ';
							}
							
							function cleanMsg(){ document.getElementById('debug').innerHTML = ''; }			
							
						</script>
					</head>
					<body onload="init();">
						<div id='map' style='width:50%; height:400px;'></div>
						<p>This script tests and shows the SAPO.Maps.Overlay.Polyline type</p>
						<br />
						<div>
							<input type="button" onclick="SAPO.Maps.olyline();" value="Show polyline" />
							<input type="button" onclick="polyline_nrvertex();" value="Nr Vertices" />
							<input type="button" onclick="polyline_getvertex();" value="Get Vertice" />
							<input type="button" onclick="polyline_length();" value="Get length" />
							<input type="button" onclick="polyline_bounds();" value="Bounds" />
							<input type="button" onclick="polyline_hide();" value="Hide" />
							<input type="button" onclick="polyline_show();" value="Show" />
							<input type="button" onclick="polyline_insertvertex();" value="Insert Vertex" />
							<input type="button" onclick="polyline_changestyle();" value="Change Style" />
							<input type="button" onclick="polyline_visible();" value="Is hidden" />
							<input type="button" onclick="enableEvents();" value="Turn events on" />
							<input type="button" onclick="disableEvents();" value="Turn events off" />
							<input type="button" onclick="clone();" value="clone" />
						</div>
						<div id="debug"></div>		
					</body>
				</html>
MAPAS API

Galeria de exemplos: Polyline
