Stylizowane Mapy Google

Dostosuj prezentację standardowej mapy Google, stosując własne style podczas korzystania z interfejsu Maps Static API. Możesz zmienić wygląd elementów takich jak drogi, parki, obszary zabudowane i inne ciekawe miejsca. Zmień ich kolor lub styl, aby wyróżnić określone treści, uzupełnić otaczające treści na stronie lub nawet całkowicie ukryć elementy całkowicie.

Przykłady

Poniższy przykład przedstawia mapę Brooklynu w Stanach Zjednoczonych ze stylizowaniem, które koloruje lokalne drogi na jaskrawozielony, a obszary mieszkalne na czarno. Odwraca też jasność etykiet, dzięki czemu są one lepiej widoczne na ciemnym tle. Pamiętaj, że ten działający przykład używa kodowania 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

Poniższy przykład używa operacji stylizowania i uproszczeń, aby przybliżyć wygląd atlasu drogowego Stanów Zjednoczonych:

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ć dostosowaną mapę ze stylizowaniem, dodaj co najmniej 1 style w adresie URL żądania.

Każda deklaracja style może zawierać te argumenty, oddzielone pionowymi kreskami ("|"):

• feature (opcjonalny) wskazuje elementy, które mają być wybrane do tej modyfikacji stylu. Elementy to obiekty na mapie, takie jak drogi, parki lub inne ciekawe miejsca. Jeśli argument feature nie jest obecny, określony styl jest stosowany do wszystkich elementów.
• element (opcjonalny) wskazuje elementy określonego elementu, które mają być wybrane do tej modyfikacji stylu. Elementy to cechy elementu, takie jak geometria lub etykiety. Jeśli argument element nie jest obecny, styl jest stosowany do wszystkich elementów określonego elementu.
• Zestaw reguł stylu (obowiązkowy), które mają być stosowane do określonych elementów. Interfejs API stosuje reguły w kolejności, w jakiej występują w deklaracji style. Możesz dodać dowolną liczbę reguł, o ile nie przekroczysz normalnych ograniczeń długości adresu URL w interfejsie Maps Static API.

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

Elementy

Ta deklaracja style koloruje wszystkie drogi na mapie:

style=feature:road|color:0xffffff

Oto kilka typowych wyborów elementów:

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

Elementy lub typy elementów to cechy geograficzne na mapie, w tym drogi, parki, akweny, firmy i inne.

Elementy tworzą drzewo kategorii, którego korzeniem jest all. Jeśli nie określisz elementu, zostaną wybrane wszystkie elementy. Określenie elementu all ma taki sam efekt.

Niektóre elementy zawierają elementy podrzędne, które określasz za pomocą notacji kropkowej. Na przykład landscape.natural lub road.local. Jeśli określisz tylko element nadrzędny, np. road, style określone dla elementu nadrzędnego będą stosowane do wszystkich jego elementów podrzędnych, takich jak road.local i road.highway.

Pamiętaj, że elementy nadrzędne mogą zawierać elementy, które nie są uwzględnione we wszystkich ich elementach podrzędnych.

Dostępne są te elementy:

• all (domyślny) wybiera wszystkie elementy.
• administrative wybiera wszystkie obszary administracyjne. Stylizowanie wpływa 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 krajobrazy.
  • landscape.man_made wybiera elementy stworzone przez człowieka, takie jak budynki i inne konstrukcje.
  • landscape.natural wybiera elementy naturalne, takie jak góry, rzeki, pustynie i lodowce.
  • landscape.natural.landcover wybiera elementy pokrycia terenu, czyli materiał fizyczny pokrywający powierzchnię ziemi, taki jak lasy, łąki, tereny podmokłe i nieużytki.
  • landscape.natural.terrain wybiera elementy terenu, takie jak wysokość, nachylenie i orientacja.
• poi wybiera wszystkie ciekawe 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 o ograniczonym 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 akweny.

Elementy

Ta deklaracja style koloruje etykiety wszystkich dróg lokalnych:

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

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

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

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

• all (domyślny) wybiera wszystkie elementy określonego elementu.
• geometry wybiera wszystkie elementy geometryczne określonego elementu.
  • geometry.fill wybiera tylko wypełnienie geometrii elementu.
  • geometry.stroke wybiera tylko obrys geometrii elementu.
• labels wybiera etykiety tekstowe powiązane z określonym elementem.
  • labels.icon wybiera tylko ikonę wyświetlaną w etykiecie elementu.
  • labels.text wybiera tylko tekst etykiety.
  • labels.text.fill wybiera tylko wypełnienie etykiety. Wypełnienie etykiety jest zwykle renderowane jako kolorowy obrys otaczający tekst etykiety.
  • labels.text.stroke wybiera tylko obrys tekstu etykiety.

Reguły stylu

Reguły stylu to opcje formatowania, które są stosowane do elementów określonych w każdej style deklaracji.

Ta deklaracja style stosuje 2 reguły stylu do dróg na mapie. Pierwsza reguła stosuje kolor do dróg. 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 1 operację oddzieloną pionową kreską („|”). Każda operacja określa wartość argumentu za pomocą dwukropka („:”), a wszystkie operacje są stosowane do wyboru w kolejności, w jakiej je określisz.

Obsługiwane są te opcje stylu:

• hue (szesnastkowy ciąg 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 jest względny w stosunku do stylu mapy podstawowej. Jeśli Google wprowadzi jakiekolwiek zmiany w stylu mapy podstawowej, zmiany te wpłyną na elementy mapy ze stylizowaniem hue. Jeśli to możliwe, lepiej używać bezwzględnego stylizatora color.

• lightness (wartość zmiennoprzecinkowa od -100 i 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 stylu zdefiniowanych na mapie). Wynikowy kolor jest względny w stosunku do stylu mapy podstawowej. Jeśli Google wprowadzi jakiekolwiek zmiany w stylu mapy podstawowej, zmiany te wpłyną na elementy mapy ze stylizowaniem lightness. Jeśli to możliwe, lepiej używać bezwzględnego color stylizatora.

• saturation (wartość zmiennoprzecinkowa od -100 i 100) wskazuje procentową zmianę intensywności koloru podstawowego, która ma być stosowana 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 jest względny w stosunku do stylu mapy podstawowej. Jeśli Google wprowadzi jakiekolwiek zmiany w stylu mapy podstawowej, zmiany te wpłyną na elementy mapy ze stylizowaniem saturation. Jeśli to możliwe, lepiej używać bezwzględnego color stylizatora.

• gamma (wartość zmiennoprzecinkowa od 0.01 do 10.0, gdzie 1.0 nie stosuje korekty) wskazuje ilość korekty gamma, która ma być stosowana do elementu. Korekty gamma modyfikują jasność kolorów w sposób nieliniowy, nie wpływając na wartości bieli i czerni. Korekta gamma jest zwykle używana do modyfikowania kontrastu wielu elementów. Możesz na przykład zmodyfikować gamma, aby zwiększyć lub zmniejszyć kontrast między krawędziami a wnętrzami elementów.

  Uwaga: ta opcja dostosowuje jasność względem 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 ze stylizowaniem gamma. Jeśli to możliwe, lepiej używać bezwzględnego color stylizatora.

• invert_lightness (jeśli true) odwraca istniejącą jasność. Jest to przydatne np. do 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 stylu mapy podstawowej, zmiany te wpłyną na elementy mapy ze stylizowaniem invert_lightness. Jeśli to możliwe, lepiej używać bezwzględnego color stylizatora.

• visibility (on, off, or simplified) wskazuje, czy i jak element ma być wyświetlany na mapie. Widoczność simplified usuwa niektóre funkcje stylu z elementów, których dotyczy; na przykład drogi są upraszczane do cieńszych linii bez obrysów, a parki tracą tekst etykiety, ale zachowują ikonę etykiety.
• color (szesnastkowy ciąg RGB w formacie #RRGGBB) ustawia kolor elementu.
• weight (liczba całkowita większa lub równa zero) ustawia grubość elementu w pikselach. Ustawienie dużej grubości może spowodować przycinanie w pobliżu granic kafelków.

Reguły stylu są stosowane w kolejności, w jakiej je określisz. Nie łącz kilku operacji w jedną operację stylu. Zamiast tego zdefiniuj każdą operację jako osobny wpis w tablicy stylu.

Uwaga: kolejność jest ważna, ponieważ niektóre operacje nie są przemienne. Elementy, które są modyfikowane za pomocą operacji stylu, zwykle mają już istniejące style. Operacje działają na tych istniejących stylach, jeśli są obecne.

Model odcienia, nasycenia i jasności

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

Korekta gamma modyfikuje jasność w przestrzeni kolorów, zwykle w celu zwiększenia lub zmniejszenia kontrastu. Model HSL definiuje też kolor w przestrzeni współrzędnych, gdzie hue wskazuje orientację w kole kolorów, a nasycenie i jasność wskazują amplitudy 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 wyjątkiem tego, że nie ma w niej odcieni bieli i czerni.

Chociaż hue przyjmuje szesnastkową wartość koloru HTML, używa jej tylko do określenia koloru podstawowego, czyli jego orientacji w kole kolorów, a nie nasycenia ani jasności, które są wskazywane oddzielnie jako zmiany procentowe.

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

Koło kolorów RGB

Wartości RGB hue, które składają się z równych części czerwieni, zieleni 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), i wszystkie czyste odcienie szarości. Aby wskazać czarny, biały lub szary, musisz usunąć wszystkie saturation (ustawić wartość na -100) i dostosować lightness zamiast tego.

Ponadto podczas modyfikowania istniejących elementów, które mają już schemat kolorów, zmiana wartości takiej jak hue nie zmienia jej istniejącego saturation ani lightness.