10 dni temu pisałem, że chciałbym pokończyć kilka projektów, które zacząłem wiele lat temu, ale z różnych powodów nie zostały skończone. Ostatnio wspomniałem o mapie z placami zabaw.
https://www.hejto.pl/wpis/odgrzebalem-kolejny-projekt-ktory-robilem-okolo-5-6-lat-temu-i-to-chyba-dobry-mo
Projekcik jest bardzo mały i składał się z kilku etapów.
-
Najpierw musiałem stworzyć Overpass query aby pobrać interesujące mnie dane z OSM. Tym zapytaniem chwaliłem się przy okazji poprzedniego wpisu. Posiada ono jeszcze kilka informacji, których aktualnie nie używam np. stworzyłem taki dynamiczny tag, który jest generowany na podstawie tego co się znajduje wewnątrz placu zabaw. Teoretycznie mógłbym robić takie sprawdzanie po stronie klienta, ale byłoby to dość skomplikowane. W przyszłości użyję tego do filtrowania wyników, które pojawiają się na mapie.
-
Ponieważ dawno nie pisałem frontendu (a szczególnie takiego małego) to musiałem znaleźć jakieś rozwiązanie, które by odpowiednio konwertowało kod TS na JS. @marmot polecił ParcelJS i muszę przyznać, że był to strzał w 10.
-
Na koniec zostało już napisanie strony internetowej, ale magii tam nie ma. Kilka klas, które są odpowiedzialne na pobieranie danych z OpenStreetMap i wyświetlanie ich na mapie. Dodatkowo aby nie pobierać za dużo danych na raz jest zrobione kafelkowanie i pobieranie danego obszaru. Następnie dane są zapisywane w localstorage aby nie obciążyć zbytnio serwerów overpass.
W sumie na całość poświęciłem około 5-6 godzin (miałem pewne ułatwienie w postaci projektów, które kiedyś pisałem i nie musiałem wszystkiego wymyślać od zera) łącznie ze zrobieniem prymitywnych ikonek w inkscape i może projekt nie jest bez wad, ale staje się powoli używalny. W wolnych chwilach czeka mnie czyszczenie kodu dodanie komentarzy oraz kilka funkcjonalności, które już dawniej planowałem.
Efekt jest tutaj:
https://dotevo.github.io/ludparko/#51.1214,17.0520,18
https://github.com/dotevo/ludparko/tree/master/src
W sumie to polecam używanie OpenStreetMap i tworzenie projektów przy użyciu np. OverpassAPI. Może mój projekt kogoś zainspiruje do mapowania lub tworzenia projektów opartych na OSM.
#openstreetmap #opensource #programowanie
