Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem
WebHelp.pl Warsztat Artykuły Kolorowanie map Google

Warsztat / Artykuły i tutoriale

Kolorowanie map Google

Piotr Cichosz 8 października 2013 komentarze ()

Wszyscy znają mapy Google. Wiodą prym jeśli chodzi o wygląd, szczegóły, aktualizacje oraz bardzo rozbudowane API. Mapka na stronie firmowej to już standard. Czasami zdarzają się inne zastosowanie jak oznaczanie obiektów czy tras. Mało znane jest kolorowanie tych map. W tym artykule pokażę jak można dostosować wygląd Google Maps do naszych potrzeb (a może do wizji grafika? ;)).

Rozchodzi o się o style (właściwość styles) jakie można przekazać do obiektu MapOptions. Te style pozwalają Ci na dowolne zmiany w sposobie wyświetlania się map. Dzięki odpowiednim deklaracjom można zmieniać takie elementy jak:

  • drogi,
  • tereny zielone,
  • rzeki,
  • opisy,
  • i inne.

Należy mieć na uwadze, że style te nie działają na zdjęcia satelitarne. Jedynie mogą zmienić się opisy i drogi (o ile zostaną zdefiniowane).

Prosty przykład

Zróbmy mapkę Google z odcieniach szarości. Aby to zrobić trzeba zmienić nasycenie koloru oraz jasność. Wystarczy zdefiniować następujący styl:

Kod: Zaznacz cały
var skalaSzarosci = [
  {
    stylers: [
      { lightness: 10 }, // * Jasność.
      { saturation: -100 } // * Nasycenie.
    ]
  }
];

A następnie dodać ten styl do wcześniej zadeklarowanej zmiennej z mapą map. Powyższe style zostaną zastosowane do wszystkich elementów na mapie: drogi, rzeki, morza itp.

Kod: Zaznacz cały
map.setOptions({styles: skalaSzarosci});

Co można zmieniać?

Cechy

W pierwszym, prostym przykładzie, łatwo zauważyć, że lista stylów jest tablicą obiektów z definicjami stylów. Jeżeli w takim obiekcie znajdzie się pole featureType, to ta definicja będzie dotyczyła tej, zdefiniowanej cechy. Jeżeli nie zostanie on zdefiniowany, to przyjmie wartość domyślną all. Lista wszystkich cech jest zdefiniowana w obiekcie google.maps.MapTypeStyleFeatureType. Niektóre z cech mają dodatkowe cechy np. road składa się z arterial, highway i local. Dodatkowo road.highway posiada controlled_access. Poniższy przykład przedstawia jak można definiować cechy (ogólne i te bardziej szczegółowe):

Kod: Zaznacz cały
featureType: ‘road’ // * Definiujemy zmiany dla dróg.
featureType: ‘road.local’ // * Definiujemy zmiany dla lokalnych dróg.
featureType: ‘water’ // * Definiujemy zmiany akwenów wodnych.

Elementy geometryczne cechy

Kolejnym istotnym elementem elementType, w którym możemy zdefiniować co dokładnie chcemy stylować. Do wyboru mamy:

  • all (domyślny) działa na wszystkie cechy danego elementu
  • geometry zaznacza wszystkie geometryczne elementy danej cechy

    • geometry.fill zaznacza tylko wypełnienie danego elementu geometrycznego cechy
    • geometry.stroke zaznacza obrys danego elementu geometrycznego cechy

  • labels zaznacza elementy tekstowe (etykiety)

    • labels.icon zaznacza tylko ikony obok etykiety
    • labels.text zaznacza tylko tekst
    • labels.text.fill wypełnia kolor tekstu (takim kolorem będzie napis)
    • labels.text.stroke dotyczy obrysu tekstu

Stylowanie (ang. stylers)

Te style (ang. stylers) to nic innego jak zbiór opcji formatujących daną cechę. Lista wspieranych opcji:

  • hue (kolor RGB w postaci szesnastkowy) barwa.
  • lightness (jasność) - wartość pomiędzy -100 a 100; zmienia jasność danego elementu. Ujemnie wartości ściemniają (wartość -100 oznacza czerń) zaś dodatnie wartości rozjaśniają (100 oznacza biel).
  • saturation (nasycenie) - wartość pomiędzy -100 a 100; zmienia intensywność podstawowego barwy danego elementu.
  • gamma (wartość pomiędzy 0.01 a 10.0, gdzie wartość 1.0 to brak zmian) zmienia wartość gamma danemu elementowi. Gamma zmienia poziom jasności dla barwy hue. Wartość ta nie wpływa w żaden sposób na kolory biały i czarny. Niska wartość (< 1) zwiększa kontrast, zaś wyższa (> 1) zmniejsza kontrast.
  • inverse_lightness (jeśli true) odwraca wartość jasności. Szczególnie przydatne gdy chcemy szybko przełączyć się na ciemniejszą mapę z jasnym tekstem.
  • visibility (widoczność) przyjmuje wartości: on, off, lub simplified. Określa sposób w jaki ma pokazywać się dana cecha. Opcja uproszczona (simplified) usuwa niektóry style danej cechy. Na przykład drogi - są uproszczone do cieńszych linii, zaś parki nie mają etykiety ale zostaje ikonka.
  • color kolor cechy zdefiniowany szestnastkowo.
  • weight (rozmiar) - liczba całkowita >= 0 w pikselach określająca grubość danej cechy.

Po tym nudnym wstępie już wiemy co, jak, z czym i dlaczego. Teraz możemy przejść do bardziej przyjemnej części tego artykułu jakim są przykłady.

Zmodyfikujmy teraz przykład ze skalą szarości. Teraz niech cała mapa tylko drogi (wszystkie) będą szare i uproszczone. Dodatkowo nie będziemy pokazywać żadnych akwenów wodnych (rzeki, jeziora, morza i oceany).

Kod: Zaznacz cały
var szareDrogi = [
  {
    featureType: "road",
    stylers: [
      { lightness: 10 }, // * Jasność.
      { saturation: -100 }, // * Nasycenie.
      { visibility: 'simplified' } // * Uproszczenie
    ]
  }, {
    featureType: "water",
    stylers: [
      { visibility: "off" } // * Widoczność.
    ]
  }
];
map.setOptions({styles: szareDrogi});

Zastanawialiście się jak będzie wyglądać hydrologiczna mapa Polski czy świata? Taka mapa może być przydatna serwisowi z pogodą czy innemu, który np. monitoruje poziom wód w rzekach.

Kod: Zaznacz cały
var tylkoWoda = [
  {
    stylers: [
      { visibility: "off" } // * Usuwamy wszystkie elementy z mapy.
    ]
  }, {
    featureType: "water",
    stylers: [
      { visibility: "on" } // * Pokazujemy tylko wodę.
    ]
  }
];
map.setOptions({styles: tylkoWoda});

W taki sposób możemy dowolnie modyfikować mapki Google. Jeżeli nie chcemy pokazywać wszystkich szczegółów to warto zapoznać się możliwościami stylów. Jak widać na powyższych przykładach można uzyskać całkiem fajne efekty.

Masz pytania lub wątpliwości? Odwiedź nasze forum dyskusyjne.

Piotr Cichosz

Frontend developer w ProofHQ. Miłośnik nowych technologii, webmaster i administrator kilku serwisów internetowych. Prowadzi bloga jPortal.pl.


Komentarze


HTML CSS JavaScript PHP bazy danych MySQL Flash grafika framework hosting domeny pozycjonowanie wordpress Facebook