Jak zmienić kolor map? - Google Maps 3

Wraz z wprowadzeniem trzeciej wersji map, Google zaoferowało nowe możliwości konfiguracji ich wyświetlania. Obecnie za pomocą stylów możemy kontrolować wyświetlanie dróg, rzek, terenów, granic administracyjnych, krajobrazu poprzez wybór sposobu wyświetlania (wyłączone, uproszczone, włączone) oraz definicję kolorów.

Wszystkie zmiany sposobu wyświetlania dotyczą podstawowego typu mapy (ROADMAP).
Definicje kolorów można nadać na wszystkie typy elementów (featureType) na mapie (all) lub na podtypy:

• administrative - granice administracyjne (granice państwa, województw)
• landscape - krajobraz (lasy, pola, miasta)
• poi - punkty użyteczności publicznej (tzw. POI, m.in. parki, szkoły, szpitale itd.)
• road - drogi
• transit - komunikacja (autobusy, pociągi, samoloty)
• water - woda (rzeki, morza)

Niektóre z podtypów mają kolejne kategorie - pełna rozpiska kategorii jest dostępna w dokumentacji Google.

Każdy element (elementType) składa się z dwóch części - opisu (labels) oraz formy graficznej (geometry) - możemy definiować te formy oddzielnie lub razem (all).

Paramtery wyświetlania, które możemy ustawiać to:

• visibility - typ widoczości (włączony - on, uproszczony - on, wyłączony - off)
• hue - odcień koloru przypasowywany do elementów - należy pamiętać, że jasność oraz gamma wprowadzają modyfikacje w kolorach, więc pojawiający się kolor nie będzie wiernym odwzorowaniem podanego tutaj koloru
• invert_lightness - flaga umożliwiająca włączenie "trybu nocnego", czyli odwrócenia jasności elementów (ale nie chodzi tutaj o jasność podawaną w parametrach)
• lightness - jasność - zakres od -100 do 100
• gamma - współczynnik gamma - zakres od 0.1 do 10, przy czym wartość 1.0 stanowi wartość neutralną (nie wprowadza żadnych zmian)
• saturation - nasycenie - zakres od -100 do 100

W celu wyświetlenia zdefiniowanego przez nas profilu mapy konieczne jest utworzenie nowego typu mapy. W tym celu stworzenia mapy musimy zdefiniować tablicę stylów - poniżej przykład wzięty z przykładów Google:

var chilled = [
    {
      featureType: 'road.arterial',
      elementType: 'geometry',
      rules: [
       {hue: 149},
       {saturation: -78},
       {lightness: 0}
      ]
    }, {
      featureType: 'road.highway',
      elementType: 'geometry',
      rules: [
 {hue: -31},
 {saturation: -40},
 {lightness: 2.8}
      ]
    }, {
      featureType: 'poi',
      elementType: 'label',
      rules: [{'visibility': 'off'}]
    }, {
      featureType: 'landscape',
      rules: [
 {hue: 163},
 {saturation: -26},
 {lightness: -1.1}
      ]
    }, {
      featureType: 'transit',
      rules: [{'visibility': 'off'}]
    }, {
      featureType: 'water',
 rules: [
 {hue: 3},
 {saturation: -24.24},
 {lightness: -38.57}
      ]
    }
  ]

Następnie przekazujemy tę tablicę do obiektu google.maps.StyledMapType jednocześnie podając parametry takie jak docelowa mapa oraz nazwa stylu.

var styledMapOptions = {
  map: map,
  name: "Mapa"
}
  
var chilledMapType =  new google.maps.StyledMapType(chilled,styledMapOptions);

Kolejnym etapem jest dodanie parametru do mapy.

map.mapTypes.set('Mapa', chilledMapType);
map.setMapTypeId('Mapa');

Ostatnim krokiem jest dodanie kontrolki nowego stylu do mapy (w tym przypadku jako kontrolki ustawiana jet nowa mapa, hybrydowa oraz teren).

map.setOptions({mapTypeControlOptions: {
      mapTypeIds: ['Mapa',google.maps.MapTypeId.HYBRID,google.maps.MapTypeId.TERRAIN]
}})

Na koniec pozostaje mi polecić bardzo fajny generator stylów dla map dostępny w ramach GMaps Samples.