Cum folosim o hartă din Live Maps


OK. Tocmai am văzut cum ne definim o hartă. Ea poartă numele de colecţie. Acum să ne punem în pielea webmasterilor care doresc să fructifice această hartă. În primul rând căutăm linkul hărţii. Actions, Send in e-mail şi se va încerca trimiterea unui email cu clientul de mail implicit. Acolo găsim un link.

img516

Dacă ne uităm pe web la acel link vom vedea ceva ca mai jos. Da, harta pe Live Maps.

img517

După cum vedeţi în captura de mai sus (am început să definesc o hartă cu sediile Eparhiilor greco-catolice, cu date despre Ierarhi şi adrese) se pot introduce per obiectiv text şi fotografii, chiar şi link-uri. Dar să ne întoarcem la linkul hărţii. El poate arăta precum:

http://maps.live.com/?v=2&cid=B552FA62AEA49168!220&encType=1

Vedeţi parametrul cid. Copiaţi tot, până la &. Practic codul hărţii de mai sus este B552FA62AEA49168!220. Acest cod e esenţial, evident, în încercarea de a-l afişa cu o pagină web proprie. Observaţi diferenţa faţă de abordarea de luni. Codul de luni practic crea o hartă (indicam un centru şi înfigeam o pioneză), dar acum dorim să afişăm o hartă existentă. Codul de bază ar fi următorul:

<html>
<head>
<title></title>
<script type="text/javascript" 
    src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script>
<script type="text/javascript">
    var oharta = null;
    function Harta(){
        oharta = new VEMap(’HartaMea’);
        oharta.LoadMap();
    }   
    function AdaugaHarta(){
        var Strat = new VEShapeLayer();
        var SpecificatiiStrat = new VEShapeSourceSpecification(VEDataType.VECollection,
                CodHarta.value, Strat);
        oharta.ImportShapeLayerData(SpecificatiiStrat, DupaIncarcare);
    }
    function DupaIncarcare(feed){
        alert(’Harta a fost incarcata.’);
    }
</script>
</head>
<body onload="Harta();">
    <div id="HartaMea" style="position:relative; width:400px; height:400px;"></div>
    <INPUT id="CodHarta" type="text" value="546E7E30AC2C5011!451" name="CodHarta">
    <INPUT id="incarcaHarta" type="button" value="Incarca harta" onclick="AdaugaHarta();">
</body>
</html>

Am luat intenţional exemplul oferit de Microsoft (aici, Import data into shape layers, Add a maps.live.com collection) şi am tradus numele funcţiilor şi variabilelor pentru a fi codul mai uşor de înţeles. Ceea ce sincer mă deranjează este obligativitatea punerii pe onLoad a încărcării hărţii (poate unii ştiu cum se poate evita?). Dincolo de aceasta să vedem care este procesul.

– am definit un div în pagina HTML cu numele HartaMea
– pe onLoad am apelat funcţia Harta() care a asociat o nouă hartă în div-ul amintit mai sus
– tot în pagina HTML avem un câmp input unde puteţi introduce codul unei hărţi
– şi un buton care apelează funcţia AdaugaHarta()
– această funcţie crează un nou strat şi asociază stratului harta prin codul din formular
ImportShapeLayerData aduce datele din colecţie şi le pune pe hartă, la final apelând DupaIncarcare()
– această funcţie pur demonstrativă ne alertează doar că s-a încărcat harta

Pornind de la acest cod puteţi să dezvoltaţi aplicaţii mai complicate. Documentaţia completă este pe MSDN la capitolul Virtual Earth Map Control 6.0. Eu de exemplu am dorit să pot afişa mai multe hărţi (pentru moment două) şi să pot să am propria imagine în locul pionezei roşii. Mai mult, am dorit ca o hartă să fie "citită", indicându-se în pagina web locaţiile de pe hartă. Încărcaţi exemplul de aici şi puteţi să vă uitaţi în sursă. Observaţi că la deschiderea paginii este afişată o hartă fără obiective pe ea. Sunt două butoane care apăsate arată pe rând câte o hartă.

Când am început să studiez tema am pornit de la trei articole din martie, anul curent, ale căror linkuri le aveţi în continuare. Marea problemă este că acelea sunt scrise pentru versiunea 4.0, iar între timp Virtual Earth Map Control a ajuns la versiunea 6.0! Oricum, cei care doresc ceva mai simplu şi poate mai rapid ar putea să consulte aceste explicaţii din blogul Microsoft.

The 10 Minute Map
The 10 Minute Map, Part 2 – Adding Custom Icons
The 10 Minute Map, Part 3 – Finding Addresses and Places (Geocoding)

Cei care doresc însă să facă ceva serios şi performant vor trebui să pornească de la versiunea 6.0 şi documentaţia de pe MSDN. Vor găsi acolo o documentaţie bogată, care explică toate funcţiile, metodele, proprietăţile… Şi se găsesc din când în când şi exemple. Personal mă declar încântat de posibilităţile deschide de Microsoft prin Live Maps şi Virtual Earth Map Control şi am multe aplicaţii unde văd că s-ar putea folosi cele tocmai descrise :) . Sper să fie şi altora de folos…


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (1 evaluări, media: 4,00 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

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