Primul meu mashup

Ce este un mashup?
Un site/o aplicatie web care combina date de la diverse surse web.
Integrarea datelor trebuie sa fie relativ usoara, rapida si este des realizata folosind API-uri puse la dispozitie de site-urile sursa.
Cele mai multe mashup-uri sunt cele ce folosesc Google maps, sau Yahoo Maps. Caci sa recunoastem, cate nu poti face cu o harta?;)

Supunandu-ma tendintei, am realizat un mic mashup folosind Yahoo Maps.
De ce Yahoo si nu Google? Pentru ca, cel putin momentan, Yahoo are bine integrata harta Romaniei.

Yahoo pune la dispozitie API pentru site-uri ce folosesc Ajax, Flex de la Adobe, precum si forme REST.
Am ales API-ul de tip Ajax, pentru ca imi este cel mai usor de utilizat.

Mashup-ul meu isi propune sa realizeze o harta personalizata a Bucurestiului. Concret, imi marchez locurile importante cu poze semnificative. In versiunea simplificata prezentata aici, locul insemnat este Gradina Cismigiu.

Pentru a folosi o harta Yahoo! trebuie sa lucram cu:
* obiectul/obiectele de tip harta
* locatia pe harta, mai exact latitudinea si longitudinea, care se pot obtine prin deiverse metode
* marcaje - o mica "bula" portocalie in care se poate introduce cod html; marcajele pot fi pozitionate oriunde pe harta
* ferestre inteligente - care pot fi atasate in diverse zone ale hartii si cu care se pot obtine efecte deosebite.
* evenimente

Ne suflecam manecile si in cateva miscari terminam:
1) Includem API-ul de la Yahoo, introducand urmatorul script in sectiunea head:
< type="text/javascript"> src="http://api.maps.yahoo.com/ajaxymap?v=3.8&appid=YD-eQRpTl0_JX2E95l_xAFs5UwZUlNQhhn7lj1H">


2) Legam de evenimentul onload al ferestrei scriptul care afiseaza harta:
* Instantiem o noua harta.
var map = new YMap('map');

* Centram harta pe locul dorit, aici Bucuresti:
map.drawZoomAndCenter("Bucharest", 4);

* Realizam un marcaj pentru zona Cismigiu:
var point = new YGeoPoint(44.435434605825975, 26.090641021728516);
var marker = new YMarker(point);

* De evenimentul mouseClick al marcajului legam o functie care deschide o fereastra inteligenta, ce afiseaza o poza cu Cismigiu:
YEvent.Capture(marker,EventsList.MouseClick, function(o) { var markup = "< style="'position:relative;"> < style="'color:"> Cismigiu &ltimg src='cismigiu1.bmp' style='position:relative; width:130px; height:80px;'/> "; marker.openSmartWindow(markup); });

* Adaugam marcajul pe harta:
map.addOverlay(marker);

Si gata.
Dupa cum ne-am obisnuit deja, API-ul de la Yahoo este foarte usor de folosit.
De aici ramane doar sa il 'exploatam' pentru necesitatile noastre:)

Post Scriptum:
Un mashup care te ajuta sa compari Yahoo Maps, Google Maps si nu numai:
http://www.rockstarapps.com/samples/map-compare/
Aruncati o privire:)