Podpięcie mapy pod kontrolki i wyszukiwanie kodów pocztowych

Witaj w kolejnej aktualizacji dotyczącej pracy konkursowej jaką jest aplikacja o roboczej nazwie LocalVan. W tygodniu udało mi się podpiąć pola z kodami pocztowymi do mapy google i nareszcie aplikacja zaczyna pokazywać, że coś rzeczywiście robi.

Wyszukiwanie kodów pocztowych

„Projektując” tą aplikację pierwszym założeniem było, że użytkownik wchodzący na stronę aplikacji będzie miał potrzebę przemieszczenia czegoś pomiędzy dwoma adresami. Umożliwiam mu więc wpisanie dwóch, początkowego oraz docelowego, kodów pocztowych.

Następnie moja aplikacja musi potwierdzić, że wie o co chodzi więc wyświetla je na mapie. Po drodze doszła jedna drobna warstwa, ponieważ mapę google ustawia się posługując długościami i szerokościami geograficznymi (ang. latitude oraz longitude). Oczywiście nie możemy od użytkownika wymagać znajomości tych wartości, zwłaszcza gdy głowę ma zajętą ot choćby przeprowadzką. Dlatego bardziej naturalne wydaje się spytanie o kod pocztowy. W tym miejscu posłużyłem się znów usługą wujka G, która pozwala na wyszukiwanie adresów, w ten sam sposób jak robimy to w Google Maps.

Użytkownik wpisuje więc dwa kody pocztowe, a aplikacja po cichu tłumaczy je na dane geograficzne i aktualizuje mapę. Wszystko działa pięknie:

Obsługę Google API zamknąłem w oddzielnej usłudze, która jest po prostu kolejną klasą. W odróżnieniu od Angulara w wersjach 1.x.x, usługi odróżnia się przy użyciu dekoratora @Injectable:

Dzięki temu każdą tego typu usługę można „wstrzykiwać” w dowolnym miejscu i po prostu korzystać. W moim przypadku usługi w komponencie odpowiedzialnym za pobieranie kodu pocztowego od użytkownika:

Metoda lookup jest wykonywana przy każdej zmianie wartości pola z kodem pocztowym, więc użytkownik otrzymuje informacje zwrotną w postaci mapy na bieżąco.

By osiągnąć ten efekt skorzystałem jeszcze z z dekoratora @Output, ale możliwości jakie to nam daje zostawiam na inny dzień.