Stylizowane Mapy Google

Dostosuj wygląd standardowej mapy Google, stosując własne style podczas korzystania z interfejsu Maps Static API. Możesz zmienić sposób wyświetlania obiektów, takich jak drogi, parki, obszary zabudowane i inne ciekawe miejsca. Zmieniać ich kolor lub styl, aby uwydatnić konkretne treści, uzupełnić otaczające je treści na stronie, a nawet całkowicie ukryć funkcje.

Jeśli chcesz łatwo zmienić ten sam styl w wielu aplikacjach, sprawdź opcje dostosowania chmury dostępne w konsoli Google Cloud. Aby użyć dostosowania do chmury, musisz utworzyć i dodać identyfikator mapy. Nie zalecamy, aby w tej samej aplikacji nie mieszać funkcji dostosowywania do chmury i stylu zakodowanego na stałe, aby uniknąć potencjalnych konfliktów.

Przykłady

Poniższy przykład przedstawia mapę Brooklynu w Stanach Zjednoczonych z zaznaczonym kolorem dróg lokalnych w kolorze jasnozielonym, a dzielnicami mieszkalnymi – czarnymi. Odwraca również jasność etykiet, dzięki czemu są one lepiej widoczne na ciemnym tle. Zwróć uwagę, że w tym działającym przykładzie użyto kodowania adresów 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

W tym przykładzie pokazano elementy stylu i uproszczenia pozwalające określić 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

Składnia stylu

Aby utworzyć niestandardową mapę ze stylem, umieść w adresie URL żądania co najmniej 1 parametr style.

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

• feature (opcjonalny) wskazuje funkcje, które mają być wybrane dla tej modyfikacji stylu. Obiekty to obiekty na mapie, takie jak drogi, parki i inne ciekawe miejsca. Jeśli nie ma argumentu feature, określony styl ma zastosowanie do wszystkich cech.
• element (opcjonalny) wskazuje elementy określonej cechy, które mają zostać wybrane na potrzeby tej modyfikacji stylu. Elementy to cechy obiektów, takie jak geometria lub etykiety. Jeśli nie ma argumentu element, styl ma zastosowanie do wszystkich elementów określonej cechy.
• Zestaw reguł stylów (wymaganych), które mają być stosowane 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 zwykłych ograniczeń długości adresu URL w Maps Static API.

Uwaga: deklaracja style musi określać powyższe argumenty w podanej kolejności. Poniższy przykład pokazuje prawidłową składnię właściwości i elementu za pomocą 2 reguł:

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

Funkcje

Poniższa deklaracja style oznacza kolory wszystkich dróg na mapie:

style=feature:road|color:0xffffff

Oto kilka typowych opcji do wyboru:

• feature:all (domyślnie) – zaznacza wszystkie obiekty na mapie.
• feature:road zaznacza na mapie wszystkie drogi.
• feature:road.local zaznacza wszystkie drogi lokalne.

Obiekty lub typy obiektów to obiekty geograficzne, takie jak drogi, parki, zbiorniki wodne czy firmy.

Cechy tworzą drzewo kategorii, którego poziomem głównym jest all. Jeśli nie określisz obiektu, zostaną wybrane wszystkie obiekty. Ten sam efekt uzyskasz, jeśli określisz funkcję all.

Niektóre funkcje zawierają funkcje podrzędne określane za pomocą notacji punktowej. Na przykład: landscape.natural lub road.local. Jeśli określisz tylko funkcję nadrzędną, np. road, style określone dla funkcji nadrzędnej zostaną zastosowane do wszystkich jej elementów podrzędnych, np. road.local i road.highway.

Pamiętaj, że funkcje nadrzędne mogą zawierać pewne elementy, które nie są dostępne we wszystkich funkcjach podrzędnych.

Dostępne są te funkcje:

• all (domyślnie) – wybiera wszystkie funkcje.
• administrative zaznacza wszystkie obszary administracyjne. Styl ma wpływ tylko na etykiety obszarów administracyjnych, a nie na granice geograficzne ani wypełnienie.
  • administrative.country wybiera kraje.
  • administrative.land_parcel wybiera działki.
  • administrative.locality wybiera miejscowości.
  • administrative.neighborhood wybiera dzielnice.
  • administrative.province wybiera prowincje.
• landscape wybiera wszystkie poziomy.
  • landscape.man_made wybiera obiekty utworzone przez człowieka, takie jak budynki i inne obiekty.
  • landscape.natural wybiera obiekty naturalne, takie jak góry, rzeki, pustynie i lodowce.
  • landscape.natural.landcover wybiera elementy obejmujące powierzchnię ziemi, czyli materiały fizyczne pokryte powierzchnią Ziemi, takie jak lasy, łąki, mokradła i odgórne tereny.
  • landscape.natural.terrain wybiera elementy terenu, np. wysokość, nachylenie i orientację.
• poi zaznacza wszystkie ciekawe miejsca.
  • poi.attraction wybiera atrakcje turystyczne.
  • poi.business wybiera firmy.
  • poi.government wybiera budynki administracji publicznej.
  • poi.medical wybiera służby ratunkowe, w tym szpitale, apteki, policję, lekarzy i inne podmioty.
  • poi.park wybiera parki.
  • poi.place_of_worship wybiera miejsca kultu, w tym kościoły, świątynie, meczety i inne miejsca.
  • poi.school wybiera szkoły.
  • poi.sports_complex wybiera kompleksy sportowe.
• road zaznacza wszystkie drogi.
  • road.arterial wybiera drogi główne.
  • road.highway wybiera autostrady.
  • road.highway.controlled_access wybiera autostrady o kontrolowanym dostępie.
  • road.local wybiera drogi lokalne.
• transit wybiera wszystkie stacje i linie transportu publicznego.
  • transit.line wybiera linie transportu publicznego.
  • transit.station wybiera wszystkie stacje transportu publicznego.
  • 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 daje kolory etykiet wszystkich dróg lokalnych:

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

Elementy to podgrupy cech. Na przykład droga składa się z linii graficznej (geometrii) na mapie oraz tekstu wskazującego jej nazwę (etykietę).

Dostępne są podane niżej elementy. Pamiętaj jednak, że konkretna funkcja może obsługiwać żaden z elementów, niektóre lub wszystkie:

• all (domyślnie) – wybiera wszystkie elementy określonej cechy.
• geometry wybiera wszystkie elementy geometryczne określonego obiektu.
  • geometry.fill wybiera tylko wypełnienie geometrii obiektu.
  • geometry.stroke wybiera tylko obramowanie geometrii obiektu.
• labels wybiera etykiety tekstowe powiązane z określoną funkcją.
  • labels.icon wybiera tylko ikonę wyświetlaną w etykiecie obiektu.
  • labels.text zaznacza tylko tekst etykiety.
  • labels.text.fill wybiera tylko wypełnienie etykiety. Wypełnienie etykiety jest zwykle renderowane jako kolorowy kontur otaczający tekst etykiety.
  • labels.text.stroke wybiera tylko obramowanie tekstu etykiety.

Reguły dotyczące stylu

Reguły stylu to opcje formatowania stosowane do cech i elementów określonych w każdej deklaracji style.

Poniższa deklaracja style stosuje 2 reguły stylu do dróg na mapie. Pierwsza reguła powoduje, że do dróg jest stosowany kolor. Druga reguła upraszcza wyświetlanie dróg, dzięki czemu drogi mają cieńsze linie bez kontur:

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

Każda deklaracja style musi zawierać co najmniej 1 operację oddzieloną znakiem pionowej kreski („|”). Każda operacja określa wartość argumentu przy użyciu znaku dwukropka („:”), a wszystkie operacje są stosowane do wybranych elementów w kolejności, w jakiej zostały określone.

Obsługiwane są te opcje stylu:

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

  Uwaga: ta opcja ustawia odcień z zachowaniem nasycenia i jasności określone w domyślnym stylu Google (lub w innych opcjach stylów zdefiniowanych na mapie). Wynikowy kolor zależy od stylu mapy podstawowej. Jeśli Google wprowadzi zmiany w stylu mapy podstawowej, wpłynie to na funkcje mapy ze stylem hue. W miarę możliwości zalecamy używanie stylizatora bezwzględnego color.

• lightness (wartość zmiennoprzecinkowa z przedziału od -100 do 100) wskazuje procentową zmianę jasności elementu. Wartości ujemne zwiększają ciemność (gdzie -100 oznacza czarny), a wartości dodatnie zwiększają jasność (gdzie +100 oznacza biały).

  Uwaga: ta opcja ustawia jasność, zachowując nasycenie i odcień określone w domyślnym stylu Google (lub w innych opcjach stylów zdefiniowanych na mapie). Wynikowy kolor zależy od stylu mapy podstawowej. Jeśli Google wprowadzi zmiany w stylu mapy podstawowej, wpłynie to na funkcje mapy ze stylem lightness. W miarę możliwości zalecamy używanie stylizatora bezwzględnego color.

• saturation (wartość zmiennoprzecinkowa z zakresu od -100 do 100) wskazuje procentową zmianę intensywności koloru podstawowego, która jest stosowana do elementu.

  Uwaga: ta opcja ustawia nasycenie, zachowując odcień i jasność określone w domyślnym stylu Google (lub w innych opcjach stylów zdefiniowanych na mapie). Wynikowy kolor zależy od stylu mapy podstawowej. Jeśli Google wprowadzi zmiany w stylu mapy podstawowej, wpłynie to na funkcje mapy ze stylem saturation. W miarę możliwości zalecamy używanie stylizatora bezwzględnego color.

• gamma (wartość zmiennoprzecinkowa między 0.01 a 10.0, przy czym 1.0 nie wprowadza korekty) wskazuje stopień korekty gamma zastosowanej do elementu. Korekcja gamma zmienia jasność kolorów w sposób nieliniowy, nie wpływając na wartości bieli ani czerni. 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ętrzami elementów.

  Uwaga: ta opcja dostosowuje jasność w odniesieniu do domyślnego stylu Google za pomocą krzywej gamma. Jeśli Google wprowadzi zmiany w stylu mapy podstawowej, wpłynie to na funkcje mapy ze stylem gamma. W miarę możliwości najlepiej jest używać stylu bezwzględnego color.

• invert_lightness (jeśli true) odwraca jasność. Jest to przydatne, gdy na przykład chcesz szybko przełączyć się na ciemniejszą mapę z białym tekstem.

  Uwaga: ta opcja po prostu odwraca domyślny styl Google. Jeśli Google wprowadzi zmiany w stylu mapy podstawowej, wpłynie to na funkcje mapy ze stylem invert_lightness. W miarę możliwości zalecamy używanie stylizatora bezwzględnego color.

• visibility (on, off lub simplified) wskazuje, czy i w jaki sposób element wyświetla się na mapie. Widoczność simplified powoduje usunięcie niektórych obiektów stylu z obiektów, których dotyczy problem. Na przykład drogi są upraszczane do postaci cieńszych linii bez kontur, a parki tracą tekst etykiety, ale zachowują ikonę etykiety.
• color (szesnastkowy kod RGB w formacie #RRGGBB) ustawia kolor obiektu.
• weight (wartość całkowita większa lub równa 0) ustawia wagę obiektu w pikselach. Ustawienie wagi na dużą wartość może spowodować przycinanie kafelków w pobliżu obramowań.

Reguły stylu są stosowane w określonej kolejności. Nie używaj wielu operacji w jednej operacji stylu. Zamiast tego każdą operację należy zdefiniować jako osobny wpis w tablicy stylów.

Uwaga: kolejność jest ważna, ponieważ niektóre operacje nie są przemienne. Funkcje lub elementy modyfikowane za pomocą operacji stylów (zwykle) mają już istniejące style. Operacje będą działać na istniejących stylach, jeśli są dostępne.

Model barwy, nasycenia i jasności

Uwaga: efekt ustawień barwy, nasycenia, jasności i gamma zależy od stylu mapy podstawowej. Jeśli Google wprowadzi zmiany w stylu mapy podstawowej, wpłynie to na funkcje mapy z tymi opcjami. W miarę możliwości zalecamy używanie stylizatora bezwzględnego color.

Mapy ze stylem korzystają z modelu odcień, nasycenia i jasności (HSL) do określania koloru w operacjach stylizowania. Barwa wskazuje kolor podstawowy, nasycenie wskazuje intensywność danego koloru, a jasność wskazuje względną ilość bieli lub czerni w danym kolorze.

Korekta gamma modyfikuje jasność przestrzeni kolorów, zwykle w celu zwiększenia lub zmniejszenia kontrastu. Dodatkowo model HSL definiuje kolor w przestrzeni współrzędnych, gdzie hue wskazuje orientację w koło kolorów, a nasycenie i jasność wskazują amplitudę wzdłuż różnych osi. Odcienie są mierzone w przestrzeni kolorów RGB, która jest podobna do większości przestrzeni kolorów RGB, z tą różnicą, że brakuje odcieni bieli i czerni.

hue pobiera szesnastkową wartość koloru HTML, ale używa jej tylko do określenia koloru podstawowego, czyli jego orientacji wokół koła kolorów, a nie nasycenia czy jasności, które są podawane osobno jako zmiany procentowe.

Na przykład odcień zielonego koloru możesz zdefiniować za pomocą wartości hue:0x00ff00 lub hue:0x000100. Oba kolory są identyczne. Obie wartości wskazują czystą zieleń w modelu kolorów HSL.

Koło kolorów RGB

Wartości hue RGB, które składają się z równych częściach: czerwonego, zielonego i niebieskiego, nie wskazują barwy, ponieważ żadna z tych wartości nie wskazuje orientacji w przestrzeni HSL. Przykłady to „#000000” (czarny), „#FFFFFF” (biały) i wszystkie odcienie szarości. Aby wybrać czarny, biały lub szary, usuń wszystkie pola saturation (ustaw wartość na -100) i dostosuj właściwość lightness.

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