Mapa výdejních míst pro PPL

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.

#### 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