Webtérkép készítése 1.
Ezúttal az Angular keretei között hozunk létre egy térképi megjelenítő felületet. Ehhez felhasználjuk a Leaflet JavaScript osztály elemeit, amely kimondottan térinformatikai megjelenítésekre fejlesztettek ki.
Az egészet az Angular kereteiben fogjuk létrehozni, úgyhogy kezdjük is azzal (forrás), hogy létrehozunk egy új Angular projektet: ng new leaflet-map. A létrehozott projekt package.json-ba be kell importálni a Leaflet-et: "leaflet": "1.6.0". Ezt követően ha az ng serve paranccsal elindítjuk az alkalmazásunkat, akkor a böngészőnkben folyamatosan tudjuk felügyelni, nem rontottunk-e el valamint a kódunk írása közben.
A Leaflet térképünket egy külön komponensben fogjuk tárolni: ng generate component map. Létrehozunk egy _services mappát is az app mappán belül, ahova nemsokára belepakoljuk alkalmazásunk különböző szolgáltatásait. Az app.component.html fájl tartalmát pedig írjuk felül, hogy a map komponensünk tartalma jelenjen meg benne:
Mivel az app-map komponensünk tartalma jelenleg kimerül abban, hogy boldogan tudomásunkra hozza hogy mennyire szuperül működik, kicsit töltsük fel tartalommal. A map.component.html oldalon létrehozunk egy külső div-ben egy map-container-t, ami egy belső szekcióban eltárolja a map objektumunkat. Ez a id="map" nevű objektum lesz az, aminek átadjuk az Angularban kicsit lentebb éltre keltett térképi adatainkat, ami aztán szépen meg is jelenik majd a felhasználó böngészőjében. A id értéke map helyett persze lehetne akár gizinéni is, lényeg, hogy a kód további részében az id értékét hivatkozzuk majd meg, azaz az elnevezések egyezzenek. A css-t is kicsit igazítsuk meg, hogy legyen azért valami kinézete is a cuccosnak. Ha már css, importáljuk be a styles.scss fájlba a Leaflet css-ét is: @import "~leaflet/dist/leaflet.css";
Itt az idő, hogy az alkalamsásunk lelkét is megbuheráljuk, azaz a map.component.ts-be beimportáljuk a Leaflet-et (import * as L from 'leaflet';), majd az initMap() metódusban létrehozunk egy Map obejtumot úgy, ahogy a Leaflet Map obejtum leírásában szerepel. Ahhoz hogy aztán ez meg is jelenjen a weboldalon, a ngAfterViewInit interface-ben kell meghívnunk metódusunkat. Magyarország középpontjának WGS koordinátáit persze nyugodtan variálhatjuk, attól függően, mit is szerenénk alapértelmezetten megjeleníteni.
Már csak annyi van vissza, hogy válasszunk egy nekünk tetsző térképi szolgáltatást, ami térképi rétegként megjelenik az oldalunkon. Tökéletes lehet erre az OSM, amely a Google-val szemben (egyelőre) ingyenesen felhasználható. Ezt a Leaflet tileLayer meghívásával tudjuk az oldalunkba illeszteni. Ugyanitt beállíthatjuk a maximális zoom-olási mértéket is.
Most, hogy ennyire fantasztikusak vagyunk, egyelőre pihenünk egyet, hogy aztán a legközelebbi alkalommal mindenféle POI-kat helyezzünk el a térképen. És megismerkedünk a GeoJSON-nel is. Első körben szimplán egy JSON állomány adatait jelenítjük meg, aztán továbblépünk és bevonjuk a játékba a Spring Boot-ot is, a JSON adatokat pedig majd azon keresztül küldjük tovább a térképi rétegünk felé.
