Mapy w Twoich aplikacjach

Autor: Krzysztof Ścira

Mapy to często wybierany dodatkowy element współczesnych aplikacji mobilnych i webowych. Wybór odpowiedniej platformy, wymaga głębszej analizy. W artykule porównamy popularne rozwiązania, omówimy ich zalety i ograniczenia, a także podpowiemy, na co zwrócić uwagę przy integracji map w aplikacjach.

Smartfon z wyświetloną mapą, trasami i znacznikami lokalizacji, symbolizujący integrację map w aplikacjach — Mapy w aplikacjach pozwalają nawigować, znajdować miejsca i usprawniać działanie usług geolokalizacyjnych

Po co w ogóle mapa w aplikacji

Mapa w aplikacji mobilnej lub webowej rzadko jest celem samym w sobie. Służy do pokazania lokalizacji placówki, wyznaczenia trasy dostawy, wizualizacji zasięgu usługi albo umożliwienia użytkownikowi wyboru adresu. Każdy z tych scenariuszy wymaga innych funkcji — od prostego znacznika na statycznym obrazku po pełną nawigację z ruchem drogowym. Zanim wybierzesz dostawcę map, warto przejść przez kilka pytań: ile zapytań miesięcznie wygeneruje aplikacja, czy użytkownicy potrzebują trybu offline, jak ważna jest personalizacja wyglądu mapy i czy przetwarzasz dane osobowe (geolokalizację).

Google Maps, OpenStreetMap czy Mapbox — porównanie platform

Google Maps Platform

Najbardziej rozpoznawalna usługa mapowa na świecie. Oferuje routing, Street View, Places API (wyszukiwanie miejsc) i geocoding w jednym ekosystemie. Miesięczny darmowy limit to 200 USD kredytu, co przekłada się na ok. 28 000 zapytań do statycznych map lub ok. 40 000 zapytań geocodingowych. Po przekroczeniu limitu opłaty rosną szybko — przy dużym ruchu koszty mogą zaskoczyć. Google Maps sprawdza się tam, gdzie liczy się kompletność danych (aktualne zdjęcia satelitarne, POI, godziny otwarcia) i gdzie budżet jest przewidywalny.

OpenStreetMap (OSM)

Otwarta mapa tworzona przez społeczność — dane dostępne na licencji ODbL. Samych kafelków nie serwuje oficjalna fundacja (poza demo), dlatego potrzebujesz własnego tile-serwera albo zewnętrznego dostawcy. W Polsce dane OSM są wyjątkowo dobre: budynki z adresami, ścieżki rowerowe, szlaki turystyczne. Portal OtoMoto korzysta z OSM właśnie dlatego — duża elastyczność w dostosowywaniu wyglądu i brak opłat licencyjnych za dane. Do wyświetlania kafelków OSM w przeglądarce najczęściej stosuje się bibliotekę Leaflet (lekka, ok. 40 kB) lub OpenLayers (bogatsza, ale cięższa).

Mapbox

Komercyjna platforma oparta częściowo na danych OSM, z własnym silnikiem renderowania (Mapbox GL JS). Jej mocną stroną jest Mapbox Studio — graficzny edytor stylu mapy, dzięki któremu projektant może dopasować kolory, czcionki i widoczność warstw bez pisania kodu. Darmowy tier obejmuje 50 000 wyświetleń mapy miesięcznie. Mapbox sprawdza się w projektach, gdzie estetyka mapy jest częścią identyfikacji wizualnej.

Geocoding i reverse geocoding — zamiana adresu na współrzędne

Geocoding to proces przekształcania adresu tekstowego (np. „Kraków, ul. Łagiewnicka 33") w parę współrzędnych geograficznych. Reverse geocoding działa odwrotnie — ze współrzędnych uzyskujesz czytelny adres. Obie operacje oferują Google, Mapbox i otwarty Nominatim (OSM). Nominatim jest darmowy, ale ma limit 1 zapytania na sekundę i nie nadaje się do masowego geokodowania. Przy integracji z formularzem adresowym warto cache'ować wyniki po stronie backendu — ogranicza to liczbę zapytań i przyspiesza odpowiedź.

W jednym z projektów realizowanych w desi9n — systemie zarządzania flotą — geocoding odwrotny pozwalał operatorom widzieć ulicę i miasto zamiast surowych współrzędnych GPS. Zastosowaliśmy Nominatim z lokalną instancją, żeby uniknąć limitów i zależności od zewnętrznego API.

Mapy statyczne, interaktywne i tryb offline

Mapa statyczna to po prostu obrazek — wygenerowany URL zwraca PNG lub JPEG ze znacznikami. Ładuje się błyskawicznie, nie wymaga JavaScriptu i jest przyjazna dla e-maili oraz wydruków. Google Static Maps API i Mapbox Static Images API generują takie obrazy na żądanie.

Mapa interaktywna pozwala na zoom, przesuwanie, klikanie w POI. Wymaga załadowania biblioteki JS (Leaflet, Mapbox GL, Google Maps JS API), co zwiększa wagę strony o 40–200 kB. Jeśli mapa nie jest widoczna od razu po załadowaniu strony, warto ją inicjalizować leniwie — dopiero po scrollu użytkownika do odpowiedniej sekcji.

Tryb offline to osobna kategoria. Aplikacje logistyczne i turystyczne (np. mapy szlaków górskich) muszą działać bez internetu. Rozwiązaniem są wcześniej pobrane pakiety kafelków (mbtiles). Mapbox i OSM oferują narzędzia do generowania takich paczek — w przypadku OSM cały kraj można zmieścić w kilku GB. Na urządzeniach mobilnych biblioteka MapLibre (open-source fork Mapbox GL Native) obsługuje offline tiles bez opłat licencyjnych.

RODO i geolokalizacja — o czym pamiętać

Współrzędne GPS to dane osobowe w rozumieniu RODO, jeśli da się je powiązać z konkretną osobą. Wysyłając lokalizację użytkownika do Google Maps czy Mapbox, przekazujesz dane do podmiotu trzeciego — często spoza EOG. Trzy rzeczy, które warto zrobić od początku: po pierwsze, pytaj o zgodę przed włączeniem geolokalizacji (Geolocation API w przeglądarce i tak tego wymaga). Po drugie, nie przechowuj historii lokalizacji dłużej niż jest to potrzebne. Po trzecie, w polityce prywatności wymień dostawcę map i cel przetwarzania. Jeśli przetwarzasz dużo danych lokalizacyjnych, rozważ self-hosted tile server z danymi OSM — dane nie opuszczają Twojej infrastruktury.

Czego unikać przy integracji map

Ładowania biblioteki mapowej na każdej podstronie, nawet gdy mapa jest tylko na stronie kontaktowej — spowalnia to cały serwis.
Hardkodowania klucza API w kodzie frontendowym bez ograniczeń (referer, IP) — ktoś może zużyć Twój limit.
Ignorowania limitów darmowych tierów — przy 100 000 zapytań miesięcznie rachunek od Google potrafi przekroczyć 1000 PLN.
Wyświetlania mapy interaktywnej tam, gdzie wystarczy statyczna — np. w stopce ze wskazaniem siedziby.

Co z tym zrobić u siebie

Spisz scenariusze użycia mapy w aplikacji — ile zapytań, czy offline, czy routing.
Porównaj koszty Google Maps, Mapbox i self-hosted OSM dla Twojego wolumenu. Kalkulator Google: dobieramy rozwiązanie do skali projektu.
Zadbaj o RODO: zgoda na geolokalizację, informacja o dostawcy, retencja danych. Jeśli potrzebujesz audytu lub integracji map w istniejącym systemie — pomagamy przy aplikacjach mobilnych i webowych.

Źródła

Google Maps Platform — cennik — aktualne progi darmowe i stawki per zapytanie.
OpenStreetMap Wiki — dokumentacja danych, tile-serwerów i narzędzi ekosystemu OSM.
UODO — geolokalizacja a ochrona danych osobowych — stanowisko polskiego organu nadzorczego.
Leaflet — lekka biblioteka JS do interaktywnych map (open source, ok. 40 kB).