Inserir o mapa numa página

O exemplo seguinte, visa a inserção de um mapa na página. Os construtores de mapa do Virtual Earth e dos mapas do SAPO, recebem ambos o id do div onde se deverá inserir o mapa.

Virtual Earth

			  var vemap = new VEMap("ve_div");
			  vemap.LoadMap(new VELatLong(38.7115479, -9.13774)); 

SAPO

			  var smap = new SAPO.Maps.Map('sapo_div');

Adicionar controlos ao mapa

Virtual Earth

Por omissão, o mapa do Virtual Earth já se encontra com os controlos de zoom e troca de vista adicionados ao mapa. Se pretender que estes sejam removidos, terá de executar o seguinte método:

			  vemap.HideDashboard(); 

SAPO

Nos mapas do SAPO, por omissão não existem controlos sobre o mapa. Se pretender que apareçam os controlos de zoom bem como os controlos de troca de vista, terá de adicioná-los explicitamente ao mapa:

			  smap.addControl(new SAPO.Maps.Control.MapTypeControl());
			  smap.addControl(new SAPO.Maps.Control.NavigationControl()); 

Alterar o tipo de vista do mapa

Neste exemplo altera-se o tipo de vista do mapa para a vista híbrida.

Virtual Earth

			  vemap.SetMapStyle(VEMapStyle.Hybrid); 

SAPO

			  smap.setBaseLayer(smap.getBaseLayers().HYBRID_MAP);

Adicionar um marcador ao Mapa

Neste exemplo é adicionado um marcador sobre o mapa.

Virtual Earth

			  var pushPin = new VEShape(VEShapeType.Pushpin, 
			   new VELatLong(38.7115479, -9.13774));
			  vemap.AddShape(pushPin); 

SAPO

O marcador adicionado ao mapa do SAPO poderá ser arrastável. Se pretender que o marcador seja arrastável, basta indicar a opção draggable na instanciação do objecto.

			  var marker = new SAPO.Maps.Marker(new OpenLayers.LonLat(-9, 38), 
			   {draggable: true});
			  smap.addOverlay(marker); 

Abrir uma infoWindow/Popup

Virtual Earth

Para adicionar um popup a um marcador existente no Virtual Earth, é necessário indicar um título e uma descrição, sendo este aberto quando se coloca o rato em cima do marcador. Não é possível registar-se um listener de click sobre o marcador e posteriormente abrir o mesmo.

			  pushPin.SetTitle("<h1>Hello World!</h1>"); 
			  pushPin.SetDescription("Hello World!"); 

SAPO

Para adicionar um popup ao mapa, é necessário efectuar o registo de um evento no click do marcador. Quando este evento ocorre é necessário abrir o marcador. Se pretender um comportamento semelhante ao comportamento existente no Virtual Earth (abrir o popup quando se coloca o rato sobre o marcador), basta trocar o nome do evento para onmouseover.

			  var html = '<h1>Hello World!</h1><br />';
			  marker.registerEvent('click', this, function(marker){ marker.openPopup(html); }); 

Adicionar uma linha (polyline) ao mapa

Neste exemplo adiciona-se uma linha sobre o mapa que passa por pontos definidos pelo utilizador.

Virtual Earth

			  var polyline = new VEShape(VEShapeType.Polyline, 
			   [new VELatLong(31.27559953357264, -3.293155625192997), 
			    new VELatLong(40.04179395913183, -1.0079993752842318), 
			    new VELatLong(42.22596032057589, -6.281436875073691)
			    ]);
			  polyline.SetLineWidth(3); 
			  polyline.SetLineColor(new VEColor(255, 0, 255, 0.5));
			  vemap.AddShape(polyline); 

SAPO

			  var polyline = new SAPO.Maps.Polyline(
			  [new OpenLayers.LonLat(-3.293155625192997, 31.27559953357264), 
			   new OpenLayers.LonLat(-1.0079993752842318, 40.04179395913183),   
			  new OpenLayers.LonLat(-6.281436875073691, 42.22596032057589) ], 
			   {             strokeColor: "#FF00FF",  
			  strokeWidth: 3, 
			  strokeOpacity: 0.5       
			   });
			  smap.addOverlay(polyline); 

Adicionar um evento à linha (polyline) e alterar o estilo

Neste exemplo quando se clica em cima da linha, o estilo desta é alterado.

Virtual Earth

Não foi encontrada nenhuma forma de associar um evento à linha.

SAPO

			  polyline.registerEvent('click', this, function(polyline){ 
			   polyline.setStyle({ 
			       strokeColor: "#FFFFFF",
			       strokeWidth: 6,
			       strokeOpacity: 1
			      });
			

Adicionar um polígono (Polygon) ao mapa

Neste exemplo é adicionado um polígono com as arestas definidas nos pontos dados pelo utilizador.

Virtual Earth

			  var polyline = new VEShape(VEShapeType.Polygon, 
			   [new VELatLong(48.86244306657123, 8.835750624322754),
			   new VELatLong(36.17056935092968, 11.03301624923503),
			   new VELatLong(36.947132080844966, 23.337703748743763),
			   new VELatLong(49.26555120881505, 20.613094373852547)
			   ]); 
			  polyline.SetLineWidth(2); 
			  polyline.SetLineColor(new VEColor(255, 0, 255, 0.5));
			  polyline.SetFillColor(new VEColor(255, 0, 255, 0.5));
			  vemap.AddShape(polyline); 

SAPO

			  var polygon = new SAPO.Maps.Polygon(
			  [new OpenLayers.LonLat(8.835750624322754, 48.86244306657123),
			  new OpenLayers.LonLat(11.03301624923503, 36.17056935092968),
			  new OpenLayers.LonLat(23.337703748743763, 36.947132080844966),
			  new OpenLayers.LonLat(20.613094373852547, 49.26555120881505)], 
			  {
			  strokeColor: "#FF00FF",
			  strokeOpacity: 0.5,
			  strokeWidth: 2,
			  fillColor: '#FF00FF',
			  fillOpacity: 0.5
			  });
			  smap.addOverlay(polygon); 

Adicionar um evento ao polígono (polygon) e alterar o estilo

Neste exemplo quando se clica em cima do polígono, o estilo deste é alterado.

Virtual Earth

Não foi encontrada nenhuma forma de associar um evento à linha.

SAPO

			  polygon.registerEvent('click', this, function(polygon){ 
			   polygon.setStyle({
			      strokeColor: "#FFFFFF",
			      strokeOpacity: 1,
			      strokeWidth: 6,
			      fillColor: '#FFFFFF',
			      fillOpacity: 1          }); 
			  });