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" } ] } ]