Hărţile MS Live: adăugarea unei legende


Construim pe exemplul anterior, când am arătat cum la o hartă îi putem pune marcatori numerotaţi. Probabil aţi sesizat că în harta cu pricina nu era prezent controlerul binecunoscut din hărţile oferite de Microsoft. L-am eliminat pentru că doream să rămână harta cât mai simplu posibil. Spaţiu câştigat îl putem folosi de exemplu pentru a afişa o legendă proprie. Pentru aceasta ne folosim de AddControl. Această metodă aplicabilă unei hărţi permite adăugarea unui… container, care poate fi ce dorim noi. Am folosit mai jos un DIV la care i-am pus ca fundal un PNG cu transparenţă… pentru a arăta mai bine 😉 . Apoi în acel DIV am scris lista localităţilor. Am făcut-o clickabilă, astfel că un click pe numele unei localităţi va activa „bula” cu informaţii corespunzătoare (înainte ascund, dacă există vreuna deschisă).

În fine, pentru că am eliminat controlerul binecunoscut, ce permitea de exemplu zoom-ul, am pus două linkuri, plus şi minus, ce preiau funcţia zoom. Se pot folosi similar funcţii pentru a modifica tipul de hartă (road, aerial)… Practic se poate replica tot ce face controlerul clasic, eventual cu un design/aspect propriu sau cu funcţionalităţi reduse/extinse. Mai jos am încercat să reduc codul (CSS-ul e mutat într-un fişier separat, iar funcţia ce a rămas neschimbată de data trecută am lăsat-o doar ca titlu). A rămas astfel tot un cod uşor citibil, ce introduce câteva concepte noi faţă de codul anterior. Nu lipseşte exemplul: click aici.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Legenda la o harta Microsoft Live</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>
<link href="harta2.css" rel="stylesheet" type="text/css" />
</style>
<script type="text/javascript">
	var harta = null;
	var legenda = null;
	var shape_buc = null;
	var CentrulTarii = new VELatLong(45.817315, 25.037842);
	function IncarcaHarta(){
		harta = new VEMap('hartaMea');
		harta.HideDashboard();
		harta.LoadMap(CentrulTarii, 7, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);
		PuneLocalitati();
		AdaugaLegenda()
	}
	function PuneLocalitati(){
		... (cod identic cu data trecută)...
	}
	function AdaugaLegenda(){
		if(legenda == null){
			var el = document.createElement("div");
			el.className = "legenda";
			el.style.left = 0 + "px";
			el.style.top = 0 + "px";
			inner = "Legenda hărţii";
			inner += "<ol>";
			inner += "<li><a href=# onClick='javascript:harta.HideInfoBox();harta.ShowInfoBox(shape_buc);'>Bucureşti</a></li>";
			inner += "<li><a href=# onClick='javascript:harta.HideInfoBox();harta.ShowInfoBox(shape_tim);'>Timişoara</a></li>";
			inner += "<li><a href=# onClick='javascript:harta.HideInfoBox();harta.ShowInfoBox(shape_clu);'>Cluj-Napoca</a></li>";
			inner += "<li><a href=# onClick='javascript:harta.HideInfoBox();harta.ShowInfoBox(shape_ias);'>Iaşi</a></li>";
			inner += "</ol><div align=right>";
			inner += "<a href=# onClick='javascript:harta.ZoomIn();'><font size=+1><b>+</b></font></a>";
			inner += "<a href=# onClick='javascript:harta.ZoomOut();'><font size=+1><b>-</b></font></a></div>";
			el.innerHTML = inner
			harta.AddControl(el);
			legenda = el;
		}
	}
</script>
</head>
<body onload="IncarcaHarta();">
	<div id='hartaMea' style="position: relative; width: 800px; height: 600px; "></div>
</body>
</html>

PS: Studiind metoda AddControl veţi vedea cazul particular al afişării în 3D a unei hărţi, când trebuie apelat la un iframe pentru a se păstra conţinutul afişat cu această metodă.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (Neevaluat încă)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *