PPL: práce s mapovými podklady od mapy.cz v React aplikaci

Když se řekne “práce s mapovými podklady”, může se řada vývojářů vyděsit, protože se rozhodně nejedná o jednoduché téma. Nás tato práce rozhodně nevyděsila, naopak - tvorba interaktivní mapy výdejních míst klienta PPL byla pro nás výzvou.

Velmi totiž závisí, v jaké technologii chcete s mapami pracovat. Po konzultaci s klientem jsme pro tvorbu interaktivní mapy zvolili mapové podklady Mapy.cz a React aplikaci.

A co dál?

1. Krok: Napsali jsme vlastní knihovnu

Seznam požadavků klienta na funkcionality mapy nebyl pokrytý žádnou dostupnou knihovnou. Nezbývalo tedy nic jiného než si napsat knihovnu vlastní. 

 2. Krok: Vytvořili jsme vlastní React komponenty

Mapy.cz poskytují oficiální JS API, která přidává vlastní API do globálního kontextu stránky v prohlížeči. Abychom mohli s mapami lépe zacházet přímo v Reactu, vytvořili jsme si knihovnu, kde jsme pro každou třídu vytvořili vlastní React komponentu, která se interně stará o práci s jednou třídou z API. To nám umožňuje pracovat s jednotlivými vrstvami map a jejích prvků jako s komponentami, a používat i jiné React komponenty v mapách.   

3. Krok: Vyřešili jsme problém s překreslováním mapy

Asi největší problém, na který jsme narazili, byla perfomance map v souvislosti s načítáním dat z API klienta. Problém byl ten, že každé přidání bodu na mapu spustí přepočítání a překreslení celé mapy. V naší původní implementaci byl pro každý bod vytvořená instance třídy Marker z API map, a jeho přidání do mapy samotné. Toto řešení způsobilo, že při přidání už jen pár stovek bodů najednou způsobíme ten samý počet překreslení celé mapy, přičemž i tento počet překreslení znamená viditelné “zaseknutí” aplikace.  

Problém jsme vyřešili jednoduše úpravou implementace přidávání bodu do mapy tak, aby se počkalo na vytvoření všech instancí bodů, a jejich přidání na mapu proběhlo jako jedna akce s jedním překreslením. 

4. Krok: Aplikaci jsme doručili a klienti ji už využívají

Na podobu mapy se můžete už teď podívat na webu PPL https://www.ppl.cz/mapa-vydejnich-mist