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.
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¢er=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
![Stylizowana mapa Brooklynu.](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/documentation/maps-static/images/brooklyn-map.png?authuser=19&hl=pl)
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¢er=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
![Styl mapy atlaserowej w USA.](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/documentation/maps-static/images/us-road-atlas-map.png?authuser=19&hl=pl)
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 argumentufeature
, 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 argumentuelement
, 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.
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ędnegocolor
.lightness
(wartość zmiennoprzecinkowa z przedziału od-100
do100
) 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ędnegocolor
.saturation
(wartość zmiennoprzecinkowa z zakresu od-100
do100
) 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ędnegocolor
.gamma
(wartość zmiennoprzecinkowa między0.01
a10.0
, przy czym1.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ędnegocolor
.invert_lightness
(jeślitrue
) 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ędnegocolor
.visibility
(on
,off
lubsimplified
) 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
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
.