Google maps stílus szerkesztés

A téma a térkép alap réteg tulajdonságainak állításával speciálisan a Google maps stílus szerkesztés foglalkozik, mely sokkal egyszerűbb beállítási lehetőséggel használható.

Figyelem : Ez csak Google Maps hagyományos térképre működik, műholdasra, hibrídre nem.

Miről is van szó:

• Ha tehát az út számozást jelző kis táblák színét mindenütt bordóra szeretnénk állítani.
• Ha olyan vaktérképen szeretnénk használni amely az országhatárokat igen, de az ország nevét nem tartalmazza.
• Ha Bibliai csapás szerűen a vizeket vérszínben szeretnénk láttatni.
• …

Akkor a térkép rétegre felhelyezhetnénk sok-sok fedő objektumot (ikont, vonalat, területet, ..) az elvárt tulajdonsággal, vagy az alap térkép réteg megjelenítőjének megadjuk a formázást ahogy a megjelenítést kérjük és készen is vagyunk.

Hogyan is néz ki a generált kód:

[
    {
        "featureType": "road.highway",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#dc1c1c"
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "labels.icon",
        "stylers": [
            {
                "hue": "#fffe00"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#aa5b5b"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "hue": "#ff0046"
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "labels.icon",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "hue": "#ffdb00"
            }
        ]
    },
    {
        "featureType": "road.local",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#3fd50c"
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#e00909"
            }
        ]
    }
]

Minta: Google maps stílus szerkesztés

Más editor online minták:

https://snazzymaps.com/
http://software.stadtwerk.org/google_maps_colorizr/
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
http://googlemaps.github.io/js-samples/styledmaps/wizard/index.html

Doksi:

https://developers.google.com/maps/documentation/javascript/reference#MapTypeStyler

Néhány stílus próbálgatásra:

[
 {
 "elementType": "geometry",
 "stylers": [
 {
 "hue": "#ff4400"
 },
 {
 "saturation": -68
 },
 {
 "lightness": -4
 },
 {
 "gamma": 0.72
 }
 ]
 },
 {
 "featureType": "landscape.man_made",
 "elementType": "geometry",
 "stylers": [
 {
 "hue": "#0077ff"
 },
 {
 "gamma": 3.1
 }
 ]
 },
 {
 "featureType": "water",
 "stylers": [
 {
 "hue": "#00ccff"
 },
 {
 "gamma": 0.44
 },
 {
 "saturation": -33
 }
 ]
 },
 {
 "featureType": "poi.park",
 "stylers": [
 {
 "hue": "#44ff00"
 },
 {
 "saturation": -23
 }
 ]
 },
 {
 "featureType": "water",
 "elementType": "labels.text.fill",
 "stylers": [
 {
 "hue": "#007fff"
 },
 {
 "gamma": 0.77
 },
 {
 "saturation": 65
 },
 {
 "lightness": 99
 }
 ]
 },
 {
 "featureType": "water",
 "elementType": "labels.text.stroke",
 "stylers": [
 {
 "gamma": 0.11
 },
 {
 "weight": 5.6
 },
 {
 "saturation": 99
 },
 {
 "hue": "#0091ff"
 },
 {
 "lightness": -86
 }
 ]
 },
 {
 "featureType": "transit.line",
 "elementType": "geometry",
 "stylers": [
 {
 "lightness": -48
 },
 {
 "hue": "#ff5e00"
 },
 {
 "gamma": 1.2
 },
 {
 "saturation": -23
 }
 ]
 },
 {
 "featureType": "transit",
 "elementType": "labels.text.stroke",
 "stylers": [
 {
 "saturation": -64
 },
 {
 "hue": "#ff9100"
 },
 {
 "lightness": 16
 },
 {
 "gamma": 0.47
 },
 {
 "weight": 2.7
 }
 ]
 }
]

-----------------------
[
 {
 "featureType": "landscape.man_made",
 "elementType": "geometry",
 "stylers": [
 {
 "color": "#f7f1df"
 }
 ]
 },
 {
 "featureType": "landscape.natural",
 "elementType": "geometry",
 "stylers": [
 {
 "color": "#d0e3b4"
 }
 ]
 },
 {
 "featureType": "landscape.natural.terrain",
 "elementType": "geometry",
 "stylers": [
 {
 "visibility": "off"
 }
 ]
 },
 {
 "featureType": "poi",
 "elementType": "labels",
 "stylers": [
 {
 "visibility": "off"
 }
 ]
 },
 {
 "featureType": "poi.business",
 "elementType": "all",
 "stylers": [
 {
 "visibility": "off"
 }
 ]
 },
 {
 "featureType": "poi.medical",
 "elementType": "geometry",
 "stylers": [
 {
 "color": "#fbd3da"
 }
 ]
 },
 {
 "featureType": "poi.park",
 "elementType": "geometry",
 "stylers": [
 {
 "color": "#bde6ab"
 }
 ]
 },
 {
 "featureType": "road",
 "elementType": "geometry.stroke",
 "stylers": [
 {
 "visibility": "off"
 }
 ]
 },
 {
 "featureType": "road",
 "elementType": "labels",
 "stylers": [
 {
 "visibility": "off"
 }
 ]
 },
 {
 "featureType": "road.highway",
 "elementType": "geometry.fill",
 "stylers": [
 {
 "color": "#ffe15f"
 }
 ]
 },
 {
 "featureType": "road.highway",
 "elementType": "geometry.stroke",
 "stylers": [
 {
 "color": "#efd151"
 }
 ]
 },
 {
 "featureType": "road.arterial",
 "elementType": "geometry.fill",
 "stylers": [
 {
 "color": "#ffffff"
 }
 ]
 },
 {
 "featureType": "road.local",
 "elementType": "geometry.fill",
 "stylers": [
 {
 "color": "black"
 }
 ]
 },
 {
 "featureType": "transit.station.airport",
 "elementType": "geometry.fill",
 "stylers": [
 {
 "color": "#cfb2db"
 }
 ]
 },
 {
 "featureType": "water",
 "elementType": "geometry",
 "stylers": [
 {
 "color": "#a2daf2"
 }
 ]
 }
]

------------------------
[
 {
 "featureType": "administrative",
 "stylers": [
 {
 "visibility": "off"
 }
 ]
 },
 {
 "featureType": "poi",
 "stylers": [
 {
 "visibility": "simplified"
 }
 ]
 },
 {
 "featureType": "road",
 "elementType": "labels",
 "stylers": [
 {
 "visibility": "simplified"
 }
 ]
 },
 {
 "featureType": "water",
 "stylers": [
 {
 "visibility": "simplified"
 }
 ]
 },
 {
 "featureType": "transit",
 "stylers": [
 {
 "visibility": "simplified"
 }
 ]
 },
 {
 "featureType": "landscape",
 "stylers": [
 {
 "visibility": "simplified"
 }
 ]
 },
 {
 "featureType": "road.highway",
 "stylers": [
 {
 "visibility": "off"
 }
 ]
 },
 {
 "featureType": "road.local",
 "stylers": [
 {
 "visibility": "on"
 }
 ]
 },
 {
 "featureType": "road.highway",
 "elementType": "geometry",
 "stylers": [
 {
 "visibility": "on"
 }
 ]
 },
 {
 "featureType": "water",
 "stylers": [
 {
 "color": "#84afa3"
 },
 {
 "lightness": 52
 }
 ]
 },
 {
 "stylers": [
 {
 "saturation": -17
 },
 {
 "gamma": 0.36
 }
 ]
 },
 {
 "featureType": "transit.line",
 "elementType": "geometry",
 "stylers": [
 {
 "color": "#3f518c"
 }
 ]
 }
]

----------------------------

[
 {
 "stylers": [
 {
 "hue": "#ff1a00"
 },
 {
 "invert_lightness": true
 },
 {
 "saturation": -100
 },
 {
 "lightness": 33
 },
 {
 "gamma": 0.5
 }
 ]
 },
 {
 "featureType": "water",
 "elementType": "geometry",
 "stylers": [
 {
 "color": "#2D333C"
 }
 ]
 }
]

------
[
 {
 "featureType": "water",
 "elementType": "geometry",
 "stylers": [
 {
 "color": "#ffdfa6"
 }
 ]
 },
 {
 "featureType": "landscape",
 "elementType": "geometry",
 "stylers": [
 {
 "color": "#b52127"
 }
 ]
 },
 {
 "featureType": "poi",
 "elementType": "geometry",
 "stylers": [
 {
 "color": "#c5531b"
 }
 ]
 },
 {
 "featureType": "road.highway",
 "elementType": "geometry.fill",
 "stylers": [
 {
 "color": "#74001b"
 },
 {
 "lightness": -10
 }
 ]
 },
 {
 "featureType": "road.highway",
 "elementType": "geometry.stroke",
 "stylers": [
 {
 "color": "#da3c3c"
 }
 ]
 },
 {
 "featureType": "road.arterial",
 "elementType": "geometry.fill",
 "stylers": [
 {
 "color": "#74001b"
 }
 ]
 },
 {
 "featureType": "road.arterial",
 "elementType": "geometry.stroke",
 "stylers": [
 {
 "color": "#da3c3c"
 }
 ]
 },
 {
 "featureType": "road.local",
 "elementType": "geometry.fill",
 "stylers": [
 {
 "color": "#990c19"
 }
 ]
 },
 {
 "elementType": "labels.text.fill",
 "stylers": [
 {
 "color": "#ffffff"
 }
 ]
 },
 {
 "elementType": "labels.text.stroke",
 "stylers": [
 {
 "color": "#74001b"
 },
 {
 "lightness": -8
 }
 ]
 },
 {
 "featureType": "transit",
 "elementType": "geometry",
 "stylers": [
 {
 "color": "#6a0d10"
 },
 {
 "visibility": "on"
 }
 ]
 },
 {
 "featureType": "administrative",
 "elementType": "geometry",
 "stylers": [
 {
 "color": "#ffdfa6"
 },
 {
 "weight": 0.4
 }
 ]
 },
 {
 "featureType": "road.local",
 "elementType": "geometry.stroke",
 "stylers": [
 {
 "visibility": "off"
 }
 ]
 }
]

-----
[
 {
 "stylers": [
 {
 "saturation": 100
 },
 {
 "gamma": 0.6
 }
 ]
 }
]

-----

[
 {
 "featureType": "water",
 "stylers": [
 {
 "saturation": 43
 },
 {
 "lightness": -11
 },
 {
 "hue": "#0088ff"
 }
 ]
 },
 {
 "featureType": "road",
 "elementType": "geometry.fill",
 "stylers": [
 {
 "hue": "#ff0000"
 },
 {
 "saturation": -100
 },
 {
 "lightness": 99
 }
 ]
 },
 {
 "featureType": "road",
 "elementType": "geometry.stroke",
 "stylers": [
 {
 "color": "#808080"
 },
 {
 "lightness": 54
 }
 ]
 },
 {
 "featureType": "landscape.man_made",
 "elementType": "geometry.fill",
 "stylers": [
 {
 "color": "#ece2d9"
 }
 ]
 },
 {
 "featureType": "poi.park",
 "elementType": "geometry.fill",
 "stylers": [
 {
 "color": "#ccdca1"
 }
 ]
 },
 {
 "featureType": "road",
 "elementType": "labels.text.fill",
 "stylers": [
 {
 "color": "#767676"
 }
 ]
 },
 {
 "featureType": "road",
 "elementType": "labels.text.stroke",
 "stylers": [
 {
 "color": "#ffffff"
 }
 ]
 },
 {
 "featureType": "poi",
 "stylers": [
 {
 "visibility": "on"
 }
 ]
 },
 {
 "featureType": "landscape.natural",
 "elementType": "geometry.fill",
 "stylers": [
 {
 "visibility": "on"
 },
 {
 "color": "#EBE5E0"
 }
 ]
 },
 {
 "featureType": "poi.park",
 "stylers": [
 {
 "visibility": "on"
 }
 ]
 },
 {
 "featureType": "poi.sports_complex",
 "stylers": [
 {
 "visibility": "on"
 }
 ]
 }
]