Synetech

Vyzkoušeli jsme si práci s Mapboxem, jaké možnosti nabízí?

Náš webový tým stanul před výzvou - vytvořit aplikaci postavenou na mapě. S integrací mapy jsme zatím měli jen málo zkušeností, proto tedy výzva. Co nového jsme se dozvěděli a naučili?

Smyslem naší aplikace bylo zobrazení značek na definovaných souřadnicích, jejich filtrování a shlukování do clusterů. Uživatel musel z aplikace získat informace o dostupnosti lokací, jejich vzdálenosti a otevírací době.

Mapbox vs. Google Maps

Hned na začátku jsme stáli před rozhodnutím, jestli zvolit pro implementaci Google Maps nebo Mapbox. Našim prvním krokem tak logicky bylo porovnání výhod a nevýhod obou služeb.

mapbox_googlemaps

Zdroj porovnání: https://mapsvg.com/blog/mapbox-vs-google-maps

Po porovnání obou služeb, jsme nakonec zvolili Mapbox Studio, které nabízí široké možnosti úprav map a je hodně uživatelsky přístupné. Mezi jeho specifika patří například to, že si uživatel může během několika desítek minut vytvořit svůj vlastní dataset, umístit ho na satelitní mapu a doplnit jej třeba i o popisky v japonštině.

Co konkrétně Mapbox Studio nabízí?

Styl

Stylem se rozumí možnosti zobrazení elementů na mapě i mapy samotné. V záložce Styles v Mapbox studiu si uživatel může vytvořit vlastní styl z předpřipravených polotovarů, začít úplně od nuly nebo si zkopírovat některé veřejné styly a ty upravit.

Mezi věci, které lze upravit patří: barvy terénu, cest, značek apod., zobrazované značky, popisky, volba jazyka, jak mají vypadat cesty, hranice států nebo regionů, 3D zobrazení map.

Dataset

Vizualizace dat je v Mapbox Studiu velmi jednoduchá. Uživatel si může do mapy přímo nakreslit body, čáry nebo mnohoúhelníky. Může data importovat z CSV nebo GeoJSON souborů a ta si dle libosti upravit. Každý záznam (bod, čára, mnohoúhelník) lze opatřit vlastnostmi, které pomůžou například s organizací dat. Vytvořená data se pak exportují přímo do sady dlaždic, které uživatel vloží do svého stylu mapy.

Dlaždice

Dlaždice neboli Tiles jsou vektorová či rastrová data, z nichž mapbox skládá mapu ve 22 přednastavených úrovních zoomu. V případě vektorových dat se mapa staví ze sady bodů čar a mnohoúhelníků, rastrová data jsou sestavená z pixelů jako obrázky.

Workflow

Každá Mapbox mapa, kterou návštěvníci webu, či uživatelé aplikace uvidí, se skládá z výše probraných součástek. Nejdříve je třeba mít k dispozici sadu dlaždic, což je vlastně samotná mapa, kterou následně zaplníme svými daty, nakonec si můžeme velmi svobodně vybrat jak to celé bude vypadat.

Pro implementaci navigace na webovém prostředí nabízí mapbox několik API. Tyto API lze použít i pomocí SDK pro JS a mobilní platformy.

  • Directions API

    Tato služba nám dává k dispozici ideální cestu s ohledem na stav dopravy pro jízdu na kole, autem nebo chůzi. (Bohužel žádná Mapbox API nenabízí informace pro veřejnou dopravu.) Kromě cesty samotné API vrací také informace o vzdálenosti mezi body, předpokládané době jízdy apod. Taky dovede produkovat instrukce tzv. turn-by-turn, informace o tom, kde a kdy zabočit. Jako vstup je možné této službě poslat až 25 pozic, tedy bodů na cestě.

  • Map Matching API

    Využívá Directions API a vrací trasu, kterou lze zobrazit na mapě.

  • Isochrone API

    Vypočítá, jaké body jsou v určené vzdálenosti od daného středového bodu. Např. lze takto zjistit, kam všude je možné dostat se do 5 minut a určit si tak sektory podle doby dojezdu. (Služba je zase limitována dopravními prostředky, tedy veřejná doprava není k dispozici a maximální doba dojezdu je 60 minut.)

  • Optimization API

    Tato služba řeší oblíbený algoritmický problém - obchodní cestující. Tedy zjišťuje optimální cestu s několika zastávkami.Tato služba řeší oblíbený algoritmický problém - obchodní cestující. Tedy zjišťuje optimální cestu s několika zastávkami.

  • Matrix API

    Přijímá matrici bodů a vypočítá nejkratší (nejrychlejší) trasy mezi všemi body. Maximálně matrice přijímá 25 bodů, ale pokud chceme vzít v potaz i stav dopravy, přijímá jen 10 bodů.

mapbox

Náhled na editaci stylu

Implementace na projektu

React wrappery

Mapbox nabízí vývojářům pro implementaci mapy do projektu knihovnu Mapbox GL JS. Tuto knihovnu lze využít samotnou, ale pracujeme-li na projektu s Reactem, je možné si práci ulehčit a použít některou knihovnu, která obaluje Mapbox GL JS. Pro Mapbox jsou relevantní především knihovny react-map-gl a react-mapbox-gl. Obě knihovny jsou si velmi podobné. V podstatě dávají vývojáři do rukou sadu React komponent, zejména

, které stačí předat potřebná nastavení (výška a šířka mapy, api token, styl mapy, zoom atp.),
, což je wrapper pro značky na mapě. Do Markeru můžeme zanořit další komponenty a plně tak kontrolovat, jak se značky na mapě budou zobrazovat.

Problémy z vývoje a jejich řešení

Gatsby vs. mapbox

Při vývoji jsme narazili na určitá omezení. Mapbox GL JS je distribuován jako ES6 bundle a to způsobuje problémy se současnou verzí Gatsby, při bundlování pomocí Webpacku. V dokumentaci Mapboxu lze nalézt řešení, ale ta na našem Gatsby projektu bohužel nezafungovala. Pomohl však downgrade verze Mapbox GL JS.

Problém se projevil i po zdánlivém vyřešení, když jsme předali zdrojový kód klientovi a ten se ho pokusil nasadit na svůj server. Chyba se projevila stejně jako na našem vývojovém prostředí - místo mapy se zobrazovalo prázdné plátno s markery. Znovu pomohla úprava verze Mapbox GL.

Markery vs. Layers

V našem projektu jsme potřebovali zobrazit na mapě custom markery, které mají zvláštní design v závislosti na jejich stavu. Zároveň jsme potřebovali markery filtrovat. Rozhodli jsme se pro řešení pomocí react-map-gl komponenty

, která na daných souřadnicích vykreslí libovolný HTML element. Díky tomu jsme mohli pohodlně filtrovat a měnit vzhled na základě stavu aplikace, ale ukázalo se, že takto vytvořené markery mají nedostatek. Nelze přes ně pohybovat mapou. Mapou lze pohybovat bez problému, pokud uživatel klikne nebo tapne kdekoliv jen ne na našem custom markeru. Jak už jsem zmiňoval, Mapbox vytváří mapy pomocí 3 zdrojů: stylu, dlaždic a vrstev. Pokud se na mapu markery dostanou tímto způsobem, jsou součástí mapy a lze přes ně pohybovat mapou.

Omezení API

Jak jsem zmiňoval v sekci navigace výše, Mapbox API nabízí služby pro jízdu autem, na kole, chůzi a dovede zohlednit aktuální situaci na cestách, ale už nedovede pracovat s MHD. Na našem projektu jsme nicméně tuto funkcionalitu potřebovali a proto jsme byli nuceni integrovat do naší aplikace další službu.

Satelitní mapa

Jeden z požadavků klienta bylo tlačítko, které by podobně jako na Google Maps změnilo normální vzhled mapy na satelitní. Naše představa, že Mapbox GL JS potažmo react-map-gl bude mít nějaký hotový control element, který stačí v options vybrat, se ukázala naivní. Nic takového Mapbox nemá a je to v souladu s jeho architekturou. Satelitní vzhled je totiž jen jeden z mnoha (limity teoreticky nejsou) vzhledů, kterých pomocí mapboxu můžeme dosáhnout. Proto jsme si satelitní vzhled definovali jako zvláštní styl a v aplikaci implementovali vlastní tlačítko, které tyto styly jednoduše přepíná.

Zvolili jsme dobře?

Přestože jsme při práci narazili na různá omezení, je Mapbox velmi kvalitní služba za přijatelnou cenu. Problémy vlastně vyvstaly jen na základě naší nepřipravenosti, Mapbox je totiž skvěle zdokumentován.

Určitě ale příště vyzkoušíme i Google Maps, abychom měli srovnání, ať už co se týče přívětivosti, vývojářského zážitku a komunitě nebo možnosti API pro MHD.