Owen Davey
Owen Davey

Reputation: 1212

Can't work out how to style certain Google Map elements

I'm trying to style a Google Map and I've nearly gotten to where I want it, however I'm having some problems with a few elements.

You can see in the screen grabs that there are a few elements that are still a lighter colour that I want to make dark however I can't work out what exactly in the JSON I should be changing.

JSFiddle is here: https://jsfiddle.net/ojdavey/84ewc0jx/20/

Styling JSON:

[{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#707070"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"all","stylers":[{"gamma":"0.82"},{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"lightness":"7"},{"visibility":"on"}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"administrative","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#2f2f2f"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"on"}]},{"featureType":"poi","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"geometry","stylers":[{"lightness":"-100"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"gamma":"0.77"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"lightness":"-100"},{"color":"#181818"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"lightness":"-100"},{"color":"#181818"},{"visibility":"on"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"lightness":29},{"weight":0.2},{"color":"#ff0000"},{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"lightness":"-100"},{"color":"#181818"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"lightness":"-100"},{"color":"#181818"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19},{"visibility":"on"},{"gamma":"0.00"}]},{"featureType":"transit.station","elementType":"all","stylers":[{"gamma":"0.00"},{"visibility":"off"}]},{"featureType":"transit.station","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"transit.station.rail","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}]

Any help would be great!

enter image description here

enter image description here

enter image description here

Upvotes: 0

Views: 130

Answers (1)

Mr.Rebot
Mr.Rebot

Reputation: 6791

I think I know the solution to your problem.

Here is the variable style I used for testing:

var styleArray = [{
featureType : "administrative",
elementType : "geometry",
stylers: [
{ color: '#000000' },
{"lightness":50}
]
},
{
featureType : "poi",
elementType : "geometry",
stylers: [
{ color: '#000000' },
{"lightness":21}
]
},
{
featureType : "landscape",
elementType : "geometry",
stylers: [
{ color: '#000000' },
{"lightness":21}
]
},
{
featureType : "road",
elementType : "geometry",
stylers: [
{ color: '#000000' },
{"lightness":2}
]
},
{
featureType : "transit",
elementType : "geometry",
stylers: [
{ color: '#000000' },
{"lightness":21}
]
}
];

Here is the result:

enter image description here

After some testing here is what I came up with:

var styleArray = [

{
featureType : "all",
elementType : "geometry",
stylers: [
{ color: '#000000' },
{"lightness":30}
]
},
{
featureType : "administrative",
elementType : "geometry",
stylers: [
{ color: '#000000' },
{"lightness":50}
]
},
{
featureType : "poi",
elementType : "geometry",
stylers: [
{ color: '#000000' },
{"lightness":21}
]
},
{
featureType : "landscape",
elementType : "geometry",
stylers: [
{ color: '#000000' },
{"lightness":21}
]
},
{
featureType : "road",
elementType : "geometry",
stylers: [
{ color: '#000000' },
{"lightness":2}
]
},
{
featureType : "transit",
elementType : "geometry",
stylers: [
{ color: '#000000' },
{"lightness":21}
]
},
{
featureType : "water",
elementType : "geometry",
stylers: [
{ color: '#000000' }
]
}
]; 

Here is the result:

enter image description here

Just set the feature type "all" to a dark style then this will apply the rule to all selector types. Unfortunately, the first image with the lighter colour seems not to be in the specific constant like "pio, administrative, landscape" but is included in the "all" featureType

Upvotes: 2

Related Questions