Térképrendszer saját weboldalba 1.rész

Alábbiakban a Yahoo! Maps API használatát ismertetem, mely végigolvasása után bárki létre hozhat egy hasonlót, mint ami az alábbi linken kipróbálható: terkep.html

Mi is a Yahoo! Maps?

A Yahoo! Maps egy webes térképes rendszer, ami Ajax vagy Flash kommunikációt használ, hogy ne kelljen újratölteni az oldalt nagyításkor, mozgatáskor. Az API a hosszúsági és szélességi értékeket decimális számokként, fokokban várja. A legtöbb ország saját felmérései alapján nyújt a területéről földrajzilag kódolt információkat.

Először is rendelkeznünk kell egy Yahoo! azonosítóval, ha még nincs, akkor kattintsunk az alábbi linkre és regisztráljunk:  http://edit.yahoo.com
(Regisztrációhoz kattints a "Sign Up" feliratú gombra.)
Ha bejelentkeztél, akkor a következő oldalon lehet alkalmazásazonosítót igényelni: http://api.search.yahoo.com/webservices/register_application
Az űrlap kitöltése után kapunk egy azonosítót: "Your application id is ..."

Ezek után neki is állhatunk a térképünk elkészítéséhez saját weboldalunkon. A térkép alkalmazás JavaScript állományát be kell illesztenünk először a HTML fájlunk fejlécébe. Most létrehozok egy üres HTML fájlt amibe be lesz illesztve a Yahoo! Maps API JavaScript fájl:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Yahoo! Maps API példa</title>
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.7
&appid=36cpErfV34HQFi61e2Z5xovel0QvAijW0emzXS15FOrNpgWRBawLbU7Lm_1tyI_M.A--">
</script>
</head>
 
<body>
</body>
</html>

A "V" változóban a verziószámot küldjük át, ami jelenleg a 3.7-es verzió és az "appid"-be, pedig a regisztráció során kapott alkalmazásazonosítót kell beállítanunk.
http://api.maps.yahoo.com/ajaxymap?v=Verzió_szám&appid=Alkalmazásazonosító

Ezek az előkészületek szükségesek ahhoz, hogy ténylegesen elkezdhessük a munkát. A <body></body> elemek között egy <div/> elemben  fog megjelenni a térképünk. CSS-el állítsuk be a térkép méretét, ami most 500 pixel széles és 400 pixel magas lesz. A kód: <div id="terkep" style="width:500px; height:400px;"></div>
Az elem azonosítójának a terkep nevet adtam, JavaScript-ből így hivatkozunk erre az elemre.

HTML-ben mindössze ennyi a teendőnk, most következzen a JavaScript kódunk, amiben beállítjuk a térképünket.

1
2

var oTerkep = new YMap(document.getElementById("terkep"));
oTerkep.drawZoomAndCenter(new YGeoPoint(40, 20), 12);

Az első sor beállítja a térkép tárolóját a Yahoo! Map vezérlőnek és a második sor meg is jeleníti. A new YGeoPoint(40, 20) a hosszúsági és szélességi koordinátákat tartalmazza, az utánna levő szám (a 10), pedig a nagyítás mértékét, ami 1 és 16 között lehet.

Ezzel már létrehoztuk működőképes térképünket. A teljes eddigi kód:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Yahoo! Maps API példa</title>
<script type="text/javascript"
src="http://api.maps.yahoo.com/ajaxymap?v=3.7
&appid=36cpErfV34HQFi61e2Z5xovel0QvAijW0emzXS15FOrNpgWRBawLbU7Lm_1tyI_M.A--">
</script>
</head>
 
<body>
<div id="terkep" style="width:500px; height:400px;"></div>
<script type="text/javascript">
var oTerkep = new YMap(document.getElementById("terkep"));
oTerkep.drawZoomAndCenter(new YGeoPoint(40, 20), 12);
</script>
</body>
</html>

Az egérrel a térképre kattintva és az egeret mozgatva barangolhatunk a térképen, illetve a scroll gombbal a nagyítást változtathatjuk.

Térkép típusok

Lehetőség van a térkép típusának változtatására, ami 3 féle lehet:
- Rendes térkép YAHOO_MAP_REG
- Műholdas kép YAHOO_MAP_SAT
- A rendes és műholdas térkép kombinációja YAHOO_MAP_HYB
Beállításhoz a JavaScript kódunkhoz írjuk hozzá a következő sort
példaképpen:
oTerkep.setMapType(YAHOO_MAP_SAT);

Így műholdas térképet kapunk.

Hogyan kaphatom meg egyszerűen a koordinátákat a Yahoo! Maps számára?
A következő linket kell manipulálni:
http://local.yahooapis.com/MapsService/V1/geocode?appid=YahooDemo&city=kecskemet
Az "appid" az alkalmazásazonosítónk és "city" a telepulés neve (ami most Kecskemét). ez egy XML fájlt ad vissza, ahol a Latitude és Longitude elemek adják meg a koordinátákat. A keresést pontosíthatjuk utcanév megadásával, amit a "street" változóban kell megadni (a szóközök helyére + jelet kell tenni az url kódolás miatt és a nevek legyenek ékezet nélküliek, kisbetűsek). Pl. Kecskemét, Arany János út esetén a link a következő lesz: http://local.yahooapis.com/MapsService/V1/geocode?appid=YahooDemo&city=kecskemet
&street=arany+janos+ut


Összegzés
Az eddigiek alapján térképet illeszthetünk a weboldalunkba, melynek kezdő koordinátáit mi adhatjuk meg, a térkép méretét CSS-el állíthatjuk, a nagyítás méretét változtathatjuk, illetve térkép típust választhatunk.


A következő cikkben vezérlőelemeket illesztünk a térképre, mint például iránygombok, méret módosító skála és jelölőket helyezünk el, mely segítségével megjegyzéseket írhatunk a térképre, a megadott koordinátákhoz.

Szerző: My_name_is_Earl Hozzászólások(0)

Új hozzászólás

Webprogramozás Tutorialok Térképrendszer saját weboldalba 1.rész

Ebbe a topikba még nem érkezett hozzászólás.

Új hozzászólás