React Native térkép komponensek használatának trükkjei

Használhatunk külső könyvtárakat, illetve beépített térkép komponenst is kapunk ha Expo alapokra építkezünk az alkalmazásunkkal.

Az interneten és mobilon elérhető térképekről azonnal a Google Maps jut eszünkbe, de valószínűleg találkozhattunk már más szolgáltatókkal is, mint a Mapbox vagy a Yandex Maps.

A Yandexnek sajnos kissé foghíjas a támogatása, mert rengeteg minden nem elérhető angol nyelven vagy csak nagyon régi csomagok nyújtanak teljes értékű angol dokumentációt.

A Mapbox viszont egy jó alternatíva lehet, mivel a mobilos SDK-juk 25000 felhasználót enged havonta, anélkül, hogy kártya adatokat kellene megadnunk. 
Van hivatalos csomagjuk, @rnmapbox/maps néven, amit már megszokott npm vagy yarn segítségével telepíthetünk, illetve a git repojukban találunk telepítési útmutatót és példát is a használatra.

És persze a legnépszerűbb választás még mindig a Google Maps. Ezt kétféleképpen tudjuk működésre bírni: egyrészt létezik a szokásos csomagtelepítős megoldás, node package managerrel feltesszük a react-native-maps csomagot. A másik megoldás az, ha Expo projekben dolgozunk, mivel ekkor már az inicializálásnál települnek a szükséges részek.

Akkor nincs is ebben semmi trükk, ugye? 

A témában tapasztaltnak tekinthető fejlesztők számára valószínűleg nincs, de ha most kezdjük, akkor lehet benne egy-egy trükk ami nem feltétlenül triviális elsőre.

Amikor Expo Snack formájában online vagy lokálisan, Expo Go használatával próbálkozunk, akkor a példák tökéletesen működnek, megjelenik a térkép, tudunk navigálni, zoomolni és a API többi funkciója is okénak tűnik, mint a markerek, kijelölt szakaszok, poligonok.

Jöhet is a build, telepítjük a telefonunkra és azzal szembesülünk, hogy ez bizony nem működik, mert vagy összeomlik, vagy nem tölt be, mivel látszik a helye, de totál üres, esetleg egyszínű a komponens.

Ennek több oka is lehet, de a leggyakoribb, hogy nem írtuk be, vagy helytelenül használjuk az API kulcsot amit kaptunk hozzá:

Előbbi esetben felmerülhet, hogy eddig miért működött kulcs nélkül. Snackben illetve a Go-ban azért nem volt gond, mert van saját, érvényes kulcsuk, amin keresztül a kéréseink mennek. A dokumentációjuk alapján be tudjuk illeszteni a saját kulcsunkat. Jelen verzióban a negyedik pontig teljesen működőképes is amit javasolnak, azonban magát a stringet amit a Googletől kapunk, hiába illesztjük az app.json fájlba, ha már egyszer végigment a build, sok esetben nem frissül a generált forráskód. Android esetén ezt az AndroidManifest.xml fájlban kijavíthatjuk, az application tagek közé ezt beillesztve:

<meta-data android:name="com.google.android.maps.v2.API_KEY" android:value="KULCS_AMIT_KAPTUNK"/>

Az utóbbi eset általában egyszerűbb, az a trükk, hogy ha csak Cloud Consoleban létrehozunk egy egyszerű API kulcsot ingyen, azt bizony nem fogja elfogadni, kénytelenek vagyunk a Maps Platformon belül létrehozni, amihez be kell írnunk egy bankkártyaszámot. Persze ne ijdejünk meg, a Google nem fog kérdés nélkül lehúzni semmilyen összeget a számlánkról: Ha elérjük a kvótát, értesítést kapunk és át tudunk váltani fizetős, korlátlan hozzáférésre.

Ezután ha frissítjük az APK-t és telepítjük, a térképünk jó eséllyel működni fog.