Stylizowane Mapy Google

Dostosuj wygląd standardowej mapy Google, stosując własne style podczas korzystania ze statycznego interfejsu API Map Google. Możesz zmienić sposób wyświetlania takich elementów jak drogi, parki, obszary zabudowane i inne punkty zainteresowania. Możesz zmieniać ich kolor lub styl, aby uwydatnić konkretną treść, uzupełnić je na stronie, a nawet całkowicie ukryć elementy.

Jeśli chcesz zaktualizować ten sam styl w wielu aplikacjach, skorzystaj z funkcji dostosowywania chmury, która jest dostępna w konsoli Google Cloud i wymaga identyfikatora mapy. Aby uniknąć potencjalnych konfliktów, nie łącz opcji dostosowywania z chmurą i zakodowanego na stałe stylu w tej samej aplikacji.

Przykłady

Na poniższym przykładzie przedstawiono mapę amerykańskiego Brooklynu, której styl został pokolorowany jasno zielonymi, a obszary mieszkalne – czarny. Odwraca też jasność etykiet, aby lepiej wyróżniały się na ciemnym tle. Pamiętaj, że ten przykład używa kodowania adresu URL:

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=15&center=Brooklyn&style=feature:road.local%7Celement:geometry%7Ccolor:0x00ff00&style=feature:landscape%7Celement:geometry.fill%7Ccolor:0x000000&style=element:labels%7Cinvert_lightness:true&style=feature:road.arterial%7Celement:labels%7Cinvert_lightness:false&key=YOUR_API_KEY&signature=YOUR_SIGNATURE

Próbki mogą być niedostępne w Twoim regionie.

W tym przykładzie użyto operacji stylizacji i uproszczeń, aby uzyskać wygląd amerykańskiego atlasu drogowego:

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=12&center=Chicago&format=png&style=feature:road.highway%7Celement:geometry%7Cvisibility:simplified%7Ccolor:0xc280e9&style=feature:transit.line%7Cvisibility:simplified%7Ccolor:0xbababa&style=feature:road.highway%7Celement:labels.text.stroke%7Cvisibility:on%7Ccolor:0xb06eba&style=feature:road.highway%7Celement:labels.text.fill%7Cvisibility:on%7Ccolor:0xffffff&key=YOUR_API_KEY&signature=DITIGAL_SIGNATURE

Próbki mogą być niedostępne w Twoim regionie.

Składnia stylu

Aby utworzyć mapę ze spersonalizowanym stylem, dodaj co najmniej 1 parametr style do adresu URL żądania.

Każda deklaracja style może zawierać te argumenty rozdzielone znakiem „|” („|”):

• feature (opcjonalnie) wskazuje funkcje, które należy wybrać do modyfikacji stylu. Elementy to elementy na mapie, takie jak drogi, parki czy inne punkty zainteresowania. Jeśli brak argumentu feature, określony styl dotyczy wszystkich cech.
• element (opcjonalny) wskazuje elementy określonej cechy, które mają zostać wybrane na potrzeby tej modyfikacji stylu. Elementy to cechy funkcji, takie jak geometria lub etykiety. Jeśli nie ma argumentu element, styl jest stosowany do wszystkich elementów określonej cechy.
• Zestaw reguł stylów (obowiązkowych) do zastosowania do określonych funkcji i elementów. Interfejs API stosuje reguły w kolejności, w jakiej występują w deklaracji style. Możesz uwzględnić dowolną liczbę reguł w ramach normalnych ograniczeń długości adresu URL stosowanego w przypadku statycznego interfejsu Map Google.

Uwaga: deklaracja style musi zawierać powyższe argumenty w podanej kolejności. Poniższy przykład przedstawia prawidłową składnię funkcji i wyboru elementów z 2 regułami:

style=feature:myFeatureArgument|element:myElementArgument|myRule1:myRule1Argument|myRule2:myRule2Argument

Funkcje

Poniższa deklaracja style koloruje wszystkie drogi na mapie:

style=feature:road|color:0xffffff

Oto kilka najczęściej wybieranych funkcji:

• feature:all (domyślnie) wybiera wszystkie elementy mapy.
• feature:road zaznacza wszystkie drogi na mapie.
• feature:road.local wybiera wszystkie drogi lokalne.

Cechy lub ich typy to elementy geograficzne na mapie, m.in. drogi, parki, zbiorniki wodne, firmy.

Funkcje tworzą drzewo kategorii, którego korzeń to all. Jeśli nie określisz funkcji, zostaną wybrane wszystkie funkcje. Podanie funkcji all ma ten sam efekt.

Niektóre funkcje zawierają funkcje podrzędne, które określasz za pomocą notacji kropkowej. Na przykład landscape.natural lub road.local. Jeśli określisz tylko funkcję nadrzędną, np. road, style określone dla tego elementu nadrzędnego zostaną zastosowane do wszystkich jego elementów podrzędnych, np. road.local i road.highway.

Pamiętaj, że cechy nadrzędne mogą zawierać elementy, których nie ma w cechach podrzędnych.

Dostępne są te funkcje:

• all (domyślnie) wybiera wszystkie funkcje.
• administrative wybiera wszystkie obszary administracyjne. Stylizacja ma wpływ tylko na etykiety obszarów administracyjnych, a nie na ich granice ani wypełnienie.
  • administrative.country wybiera kraje.
  • administrative.land_parcelwybiera działki.
  • administrative.locality wybiera lokalizacje.
  • administrative.neighborhood wybiera dzielnice.
  • administrative.province wybiera prowincje.
• landscape wybiera wszystkie krajobrazy.
  • landscape.man_made wybiera elementy stworzone przez człowieka, takie jak budynki i inne konstrukcje.
  • landscape.natural wybiera obiekty naturalne, takie jak góry, rzeki, pustynie i lodowce.
  • landscape.natural.landcover wybiera cechy pokrycia terenu, czyli fizyczne materiały, które pokrywają powierzchnię Ziemi, takie jak lasy, łąki, mokradła i goła ziemia.
  • landscape.natural.terrain wybiera elementy terenu występujące na gruncie, np. wysokość, nachylenie i orientację.
• poi wybiera wszystkie ważne miejsca.
  • poi.attraction wybiera atrakcje turystyczne.
  • poi.business wybiera firmy.
  • poi.government wybiera budynki rządowe.
  • poi.medical wybiera służby ratunkowe, w tym szpitale, apteki, policję, lekarzy i inne.
  • poi.park wybiera parki.
  • poi.place_of_worship wybiera miejsca kultu, w tym kościoły, świątynie, meczety i inne.
  • poi.school wybiera szkoły.
  • poi.sports_complex wybiera kompleksy sportowe.
• road wybiera wszystkie drogi.
  • road.arterial wybiera drogi główne.
  • road.highway wybiera autostrady.
  • road.highway.controlled_access wybiera autostrady z dostępem kontrolowanym.
  • road.local wybiera drogi lokalne.
• transit wybiera wszystkie stacje i linie transportu publicznego.
  • transit.line wybiera linie transportu publicznego.
  • transit.station wybiera wszystkie stacje przesiadkowe.
  • transit.station.airport wybiera lotniska.
  • transit.station.bus wybiera przystanki autobusowe.
  • transit.station.rail wybiera stacje kolejowe.
• water wybiera zbiorniki wodne.

Elementy

Poniższa deklaracja style nadaje kolor etykietom wszystkich lokalnych dróg:

style=feature:road.local|element:labels|color:0xffffff

Elementy to podziały funkcji. Na przykład droga składa się z linii graficznej (geometrii) na mapie oraz tekstu z jej nazwą (etykietą).

Dostępne są te elementy, ale pamiętaj, że dana funkcja może obsługiwać wszystkie, niektóre lub żadne z nich:

• all (domyślnie) wybiera wszystkie elementy określonej cechy.
• geometry wybiera wszystkie elementy geometryczne określonej cechy.
  • geometry.fill wybiera tylko wypełnienie geometrii funkcji.
  • geometry.stroke wybiera tylko obrys geometrii funkcji.
• labels wybiera etykiety tekstowe powiązane z określonym obiektem.
  • labels.icon wybiera tylko ikonę wyświetlaną na etykiecie funkcji.
  • labels.text wybiera tylko tekst etykiety.
  • labels.text.fill wybiera tylko wypełnienie etykiety. Wypełnienie etykiety jest zwykle renderowane jako kolorowe obramowanie otaczające tekst.
  • labels.text.stroke zaznacza tylko obrys tekstu etykiety.

Reguły dotyczące stylu

Reguły stylu to opcje formatowania stosowane do funkcji i elementów określonych w deklaracji style.

W deklaracji style stosuje się 2 reguły stylu do dróg na mapie. Pierwsza reguła przypisuje kolor do dróg. Druga reguła upraszcza wyświetlanie dróg, ponieważ mają one cieńsze linie bez obrysów:

style=feature:road|color:0xffffff|visibility:simplified

Każda deklaracja style musi zawierać co najmniej jedną operację rozdzieloną znakiem pionowym („|”). Każda operacja określa swoją wartość argumentu za pomocą dwukropka („:”), a wszystkie operacje są stosowane do zaznaczonego obszaru w kolejności, w jakiej je podasz.

Obsługiwane są te opcje stylu:

• hue (szesnastkowy kod RGB w formacie #RRGGBB) wskazuje kolor podstawowy.

  Uwaga: ta opcja ustawia odcień, zachowując nasycenie i jasność określone w domyślnym stylu Google (lub w innych opcjach stylu zdefiniowanych na mapie). Wynikowy kolor zależy od stylu mapy podstawowej. Jeśli Google wprowadzi jakiekolwiek zmiany w podstawowym stylu mapy, zmiany te wpłyną na elementy mapy stylizowane za pomocą hue. Jeśli to możliwe, lepiej użyć stylizatora color.

• lightness (wartość zmiennoprzecinkowa z zakresu od -100 do 100) wskazuje procentową zmianę jasności elementu. Wartości ujemne zwiększają ciemność (wartość -100 oznacza czerń), a wartości dodatnie zwiększają jasność (wartość +100 oznacza biel).

  Uwaga: ta opcja ustawia jasność, zachowując nasycenie i odcień określone w domyślnym stylu Google (lub w innych opcjach stylu zdefiniowanych na mapie). Wynikowy kolor zależy od stylu mapy podstawowej. Jeśli Google wprowadzi zmiany w stylu mapy podstawowej, wpłyną one na obiekty mapy z atrybutem lightness. Lepiej jest użyć stylu bezwzględnego color, jeśli to możliwe.

• saturation (wartość zmiennoprzecinkowa z zakresu -100 do 100) wskazuje procentową zmianę intensywności podstawowego koloru, który ma być zastosowany w elemencie.

  Uwaga: ta opcja ustawia nasycenie przy zachowaniu barwy i jasności określonej w domyślnym stylu Google (lub w innych opcjach stylu zdefiniowanych na mapie). Wynikowy kolor zależy od stylu mapy podstawowej. Jeśli Google wprowadzi jakiekolwiek zmiany w podstawowym stylu mapy, zmiany te wpłyną na elementy mapy stylizowane za pomocą saturation. Jeśli to możliwe, lepiej użyć stylizatora color.

• gamma (wartość zmiennoprzecinkowa z zakresu 0.01–10.0, gdzie 1.0 oznacza brak korekty) wskazuje wielkość korekty wartości gamma, która ma zostać zastosowana do elementu. Korekty gamma zmieniają jasność kolorów w sposób nieliniowy, nie wpływając na wartości białego ani czarnego. Korekcja gamma jest zwykle używana do zmiany kontrastu wielu elementów. Możesz na przykład zmodyfikować wartość gamma, aby zwiększyć lub zmniejszyć kontrast między krawędziami a wnętrzem elementów.

  Uwaga: ta opcja dostosowuje jasność do domyślnego stylu Google za pomocą krzywej gamma. Jeśli Google wprowadzi jakiekolwiek zmiany w stylu mapy podstawowej, zmiany te wpłyną na elementy mapy stylizowane za pomocą funkcji gamma. Jeśli to możliwe, lepiej użyć stylizatora color.

• invert_lightness (jeśli true) odwraca istniejący poziom jasności. Przydaje się to na przykład podczas szybkiego przełączania się na ciemniejszą mapę z białym tekstem.

  Uwaga: ta opcja po prostu odwraca domyślny styl Google. Jeśli Google wprowadzi jakiekolwiek zmiany w podstawowym stylu mapy, zmiany te wpłyną na elementy mapy stylizowane za pomocą invert_lightness. Jeśli to możliwe, lepiej użyć stylizatora color.

• visibility (on, off lub simplified) wskazuje, czy element ma się wyświetlać na mapie i w jaki sposób. Visibility simplified usuwa niektóre elementy stylu z objętych nią obiektów. Na przykład drogi są uproszczone do cienkich linii bez obrysów, a parki tracą tekst etykiety, ale zachowują ikonę etykiety.
• color (szesnastkowy kod RGB w formacie #RRGGBB) ustawia kolor funkcji.
• weight (wartość całkowita większa lub równa 0) określa wagę funkcji w pikselach. Ustawienie wysokiej wartości wagi może spowodować przycięcie obszaru w pobliżu obramowania kafelków.

Reguły stylu są stosowane w określonej przez Ciebie kolejności. Nie łącz wielu operacji w jedną operację stylu. Zamiast tego zdefiniuj każdą operację jako osobny wpis w tablicy style.

Uwaga: kolejność jest ważna, ponieważ niektóre operacje nie są przechodnie. Funkcje lub elementy, które są modyfikowane przez operacje stylów, (zwykle) mają już style. Operacje działają na te istniejące style (jeśli istnieją).

Model odcień, nasycenie, jasność

Uwaga: efekt ustawień odcienia, nasycenia, jasności i gamma jest względny względem stylu mapy podstawowej. Jeśli Google wprowadzi jakiekolwiek zmiany w stylu mapy podstawowej, będą one miały wpływ na obiekty mapy z tymi opcjami. Jeśli to możliwe, lepiej użyć stylizatora color.

Mapy stylizowane używają modelu tonu, nasycenia i jasności (HSL) do oznaczania kolorów w operacjach stylizatora. Barwa wskazuje kolor podstawowy, nasycenie wskazuje intensywność tego koloru, a jasność wskazuje względną ilość bieli lub czerni w kolorze składowym.

Korekta krzywej gamma zmienia jasność w przestrzeni barw, aby zwiększyć lub zmniejszyć kontrast. Model HSL definiuje kolor w przestrzeni współrzędnych, w której hue wskazuje orientację na kole barw, a nasycenie i jasność wskazują amplitudy wzdłuż różnych osi. Barwy są mierzone w przestrzeni kolorów RGB, która jest podobna do większości przestrzeni kolorów RGB, z tą różnicą, że nie zawiera odcieni bieli i czerni.

Funkcja hue przyjmuje szesnastkowy kod koloru HTML, ale używa go tylko do określenia koloru podstawowego, czyli jego orientacji na kole kolorów, a nie nasycenia ani jasności, które są wskazywane oddzielnie jako zmiany procentowe.

Możesz na przykład zdefiniować barwę czystej zieleni jako hue:0x00ff00 lub hue:0x000100. Oba odcienie są identyczne. Obie wartości wskazują na czysty kolor zielony w modelu kolorów HSL.

Koło kolorów RGB

Wartości RGB hue, które składają się z równych części czerwonego, zielonego i niebieskiego, nie wskazują odcienia, ponieważ żadna z tych wartości nie wskazuje orientacji w przestrzeni współrzędnych HSL. Przykłady: „#000000” (czarny), „#FFFFFF” (biały) i wszystkie odcienie szarości. Aby zmienić kolor na czarny, biały lub szary, musisz usunąć wszystkie elementy saturation (ustaw wartość na -100) i zamiast tego dostosować wartość lightness.

Dodatkowo podczas modyfikowania istniejących funkcji, które mają już schemat kolorów, zmiana wartości takiej jak hue nie powoduje zmiany wartości saturation ani lightness.