Stylizowane Mapy Google

Dostosuj prezentację standardowej mapy Google, stosując własne style podczas korzystania z interfejsu Maps Static API. Możesz zmienić sposób wyświetlania takich elementów jak drogi, parki, obszary zabudowane i inne punkty zainteresowania. Zmieniaj ich kolor lub styl, aby podkreślić określone treści, uzupełnić treści na stronie lub całkowicie ukryć funkcje.

Przykłady

Ten przykład pokazuje mapę Brooklynu w Stanach Zjednoczonych ze stylizacją, która nadaje lokalnym drogom jasną zieleń, a obszarom mieszkalnym – czerń. 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

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

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 pionowym („|”):

• 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 nie podano argumentu feature, określony styl zostanie zastosowany do wszystkich cech.
• element (opcjonalnie) wskazuje element(y) określonej funkcji, które mają być wybrane do 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ł, z zastrzeżeniem, że ich adresy URL nie mogą przekraczać limitu długości adresów URL w interfejsie Maps Static API.

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

Funkcje

W ramach tej deklaracji style wszystkie drogi na mapie są oznaczane kolorem:

style=feature:road|color:0xffffff

Oto kilka typowych opcji funkcji:

• feature:all (domyślnie) wybiera wszystkie elementy mapy.
• feature:road wybiera 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_parcel wybiera działki.
  • administrative.locality wybiera lokalizacje.
  • administrative.neighborhood wybiera dzielnice.
  • administrative.province wybiera prowincje.
• landscape wybiera wszystkie pejzaże.
  • landscape.man_made wybiera elementy stworzone przez człowieka, takie jak budynki i inne konstrukcje.
  • landscape.natural wybiera elementy przyrodnicze, 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 cechy terenu powierzchni lądowej, takie jak wysokość, nachylenie i orientacja.
• poi wybiera wszystkie ważne miejsca.
  • poi.attraction wybiera atrakcje turystyczne.
  • poi.business wybiera firmy.
  • poi.government wybiera budynki rządowe.
  • poi.medical wybiera usługi 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 tranzytowe.
  • 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 etykiet wszystkich lokalnych dróg:

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

Elementy to podziały funkcji. Droga składa się na przykład z linii graficznej (geometria) na mapie oraz tekstu z nazwą (etykieta).

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

Kolory tekstu etykiet fill i stroke zmieniają się w zależności od poziomu powiększenia. Aby zapewnić spójność na różnych poziomach powiększenia, zawsze definiuj atrybuty fill i stroke.

• 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 ze wskazaną funkcją.
  • labels.icon wybiera tylko ikonę wyświetlaną w 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 nadaje kolor ulicom. Druga reguła upraszcza wyświetlanie dróg, dzięki czemu 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 selekcji 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 bazowej. 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 bazowej. Jeśli Google wprowadzi jakiekolwiek zmiany w podstawowym stylu mapy, zmiany te wpłyną na elementy mapy stylizowane za pomocą lightness. Jeśli to możliwe, lepiej użyć stylizatora color.

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

  Uwaga: ta opcja ustawia nasycenie, zachowując odcień i jasność określone w domyślnym stylu Google (lub w innych opcjach stylu zdefiniowanych na mapie). Wynikowy kolor zależy od stylu mapy bazowej. 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 między 0.01 a 10.0, gdzie 1.0 nie stosuje żadnej 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. Korekta gamma jest zwykle używana do modyfikowania 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ść w stosunku do domyślnego stylu Google, używając 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 obecną jasność. Jest to przydatne na przykład do szybkiego przełączenia 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 funkcje 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 elementów w pobliżu krawędzi kafelka.

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

Uwaga: kolejność jest ważna, ponieważ niektóre operacje nie są przemienniki. 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 są obecne).

Model odcień, nasycenie, jasność

Mapy stylizowane używają modelu tonu, nasycenia i jasności (HSL) do oznaczania kolorów w operacjach stylizowania. 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 barw, 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 to „#000000” (czarny), „#FFFFFF” (biały) oraz wszystkie czyste odcienie szarości. Aby wskazać kolor czarny, biały lub szary, musisz: usunąć wszystkie wartości saturation (ustawić 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.