Zadanie 1
Opis Stwórz stronę zawierającą trzy mapy, z centrum w Twojej rodzinnej miejscowości (mapa terenowa, mapa drogowa oraz mapa satelitarna). Użyj takiej skali, aby widoczne było również najbliższe sąsiednie miasto wojewódzkie.
Wskazówki - Stwórz odpowiedni plik HTML
- W konsoli https://code.google.com/apis/console/ aktywuj usługę Google Maps API v3 oraz stwórz klucz dostępu
- Zaimportuj bibliotekę Google Maps API JavaScript w pliku HTML. Dodaj odpowiednie parametry: key oraz sensor
- Stwórz obiekty mapOptions z polami:
- Stwórz obiekty google.maps.Map przekazując jako parametry odpowiednie węzły HTML oraz obiekty mapOptions
Zadanie 2 (opcjonalne)
Opis Opublikuj stronę w internecie i zabezpiecz klucz aplikacji tak, aby mógł być wykorzystywany tylko w ramach Twojej domeny. Jak zapewnisz możliwość testowania strony zarówno lokalnie jak i na serwerze?
Wskazówki
Zadanie 3
Opis - Stwórz mapę zawierającą kilka znaczników.
- Dla wybranego znacznika zdefiniuj animację typu BOUNCE, dla pozostałych typu DROP.
- Dla wybranych znaczników zdefiniuj ikonkę z pliku.
- (opcjonalnie) Dla kilku znaczników stwórz złożoną ikonkę (cień oraz obsługa z-index)
- (opcjonalnie) Za pomocą przycisków umieszczonych na stronie z mapą, pozwól użytkownikowi włączać i wyłączać znaczniki
Wskazówki
Zadanie 4
Opis Stwórz animację, podczas której środek mapy przesunie się po wszyskich znacznikach umieszonych uprzednio na mapie.
Wskazówki - Skorzystaj z funkcji google.maps.Map.panTo(LatLng)
- Przydadzą Ci się funkcje JavaScript: setTimeout() lub setInterval()
Zadanie 5
Opis - Stwórz mapę z jednym otwartym oknem informacyjnym zawierającym "bogatą" treść HTML.
- Stwórz mapę z kilkoma znacznikami, po kliknieciu których otwierają się okna informacyjne.
Wskazówki - Skorzystaj z klasy google.maps.InfoWindow
- Aby reagować na zdarzenie wywołane na znaczniku skorzystaj z google.maps.event.addListener(MARKER, EVENT, CALLBACK_FUNCTION)
Zadanie 6
Opis - Stwórz stronę, na której użytkownik będzie miał możliwość wpisania miejscowości słownie, a po wciśnięciu przycisku, mapa zostanie wyśrodkowana na danej miejscowości oraz pojawi się okno informujące o nazwie miejscowości.
- (opcjonalnie) Dla większej ilości znanych wcześniej adresów (np. wczytanych z arkusza kalkulacyjnego) skorzystaj z webservice'u dokonującego geokodowania
Wskazówki - Skorzystaj z metody geocode klasy google.mapsGeocoder i przekaż parametr address
- Dla części opcjonalnej, rozważ wykorzystanie istniejących bibliotek (np. http://jquery.com/ lub http://microjs.com)
Zadanie 7
Opis - Stwórz mapę, która reaguje na kliknięcia użytkownika. W klikniętym miejscu wstaw znacznik z podłączonym oknem informacyjnym.
- W oknie informacyjnym umieść nazwę najbliższej miejscowości uzyskaną na podstawie koordynat geograficznych stworzonego znacznika.
Wskazówki - Skorzystaj z metody geocode klasy google.mapsGeocoder i przekaż parametr latLng
- Aby reagować na zdarzenie kliknięcia na mapie dodaj listenera do mapy: google.maps.event.addListener(map, 'click', callback);
- Funkcja callback wywołana zostanie z parametrem zawierającym koordynaty klikniętego punktu. Koordynaty dostępne są w polu latLng
Dokumentacja https://developers.google.com/maps/documentation/javascript/geocoding?hl=pl#ReverseGeocoding
Zadanie 8
Opis - Umieść na mapie kilka różnych znaczników, dla których ikonami będą predefiniowane kształty. Poeksperymentuj z parametrami takimi jak kolory, grubości linii, przezroczystość, itp.
- (opcjonalnie) zdefiniuj własną ścieżkę i wykorzystaj ją jako kształt znacznika.
Wskazówki - Predefiniowane kształty znajdziesz w google.maps.SymbolPath
Zadanie 9
Opis - Przygotuj mapę z zaznaczonymi kilkoma liniami (Polyline) z różnymi parametrami stylów
- (opcjonalnie) Stwórz mapę, na której użytkownik, klikając w różnych miejscach mapy, tworzy polilinię.
Wskazówki - Wykorzystaj pola strokeColor, strokeOpacity, strokeWeight
- Użyj Polyline getPath aby uzyskać dostęp do tablicy punków tworzących linię
Zadanie 10
Opis - Umieść na mapie polilinię zakończoną strzałką
- Twórz strzałkę w każdym miejscu w którym kliknie użytkownik (drugi koniec strzałki niech będzie zawsze w tym samym miejscu, lub tak samo oddalony od punktu klikniętego przez użytkownika)
- (opcjonalnie) Użytkownik sam może tworzyć strzałki między dwoma punktami
Wskazówki - Wykorzystaj offset do przesunięcia symbolu
Zadanie 11
Opis - Utwórz polilinię przerywaną, lub oznaczoną innym wzorem
- (opcjonalnie) Dodaj animację do polilini
Wskazówki - Wykorzystaj przezroczystość strokeOpacity aby ukryć linię. Dodaj nieprzezroczysty powtarzający się symbol, aby utworzyć wzór.
- Wykorzystaj setTimeout() oraz offset aby sprawić wrażenie ruchu symboli na linii
Zadanie 12
Opis - Utwórz kilka wielokątów zamkniętych w różnych kolorach
- (opcjonalnie) Utwórz wielokąt z więcej niż jedną ścieżką, które tworzą bardziej skomplikowany kształt (np. nieciągły lub "donut")
Wskazówki - Wykorzystaj google.maps.Polygon oraz google.maps.PolygonOptions
Zadanie 13
Opis - Utwórz kilka kół na mapie, których promień zależy od konkretnych danych (np. liczebność ludzi w mieście, itp.)
- Zaznacz na mapie kilka obszarów za pomocą prostokątów. Nadaj prostokątom różne kolory.
Wskazówki - Wykorzystaj google.maps.Circle oraz google.maps.Rectangle
Zadanie 14
Opis - Zmodyfikuj wyświetlanie elementów kontrolnych na mapie. Wybrane elementy ukryj, zaś pozostałe przesuń w inne miejsca ekranu.
- (opcjonalnie) Stwórz swój własny element kontrolny na mapie
Wskazówki - Do ukrywania elementów kontrolnych przekaż odpowiedni parametr do mapy jako mapOptions
- Do modyfikacji miejsca wyświetlania kontrolki wykorzystaj pole position typu ControlPosition
Zadanie 15
Opis - Przygotuj mapę ze zmodyfikowanymi stylami. Zmień np. kolor dróg
Wskazówki
Zadanie 16
Opis - Na podstawie danych zewnętrznych, przygotuj warstwę mapy ciepła (Heatmap layer)
- Zmień domyślny gradient kolorów
Wskazówki - Nie zapomnij o załadowaniu dodatkowej biblioteki google.maps.visualization
- W zależności od poziomu "zoom" zmień Heatmap na znaczniki
- Styled maps for Skyscrapercity - state of the roads, level of the road, etc.
- How to mark a new road which is non-existing? Free form tracks
- Data visualisation based on regions (województwo, powiat, gmina)
|
|