Issue Converting Google Maps styles to Google Static Maps URI

Question

I'm seeing an issue converting snazzymaps.com map styles to static map urls where brightness and/or color is converted incorrectly. I have already read this question and used the tool in the comment.

Here's a good example of the problem: https://snazzymaps.com/style/30/cobalt

[
    {
        "featureType": "all",
        "elementType": "all",
        "stylers": [
            {"invert_lightness": true},
            {"saturation": 10},
            {"lightness": 30},
            {"gamma": 0.5},
            {"hue": "#435158"}
        ]
    }
]

gives: https://i.stack.imgur.com/zRBDY.png

Using the code/tool from http://jsfiddle.net/gaby/s6Dyp/, gives: https://i.stack.imgur.com/EN10p.png

It's obviously much brighter. Clearly, some value is off but I'm not sure which one(s). Tinkering with the vals, I can get a vaguely similar result to the original by tweaking gamma to 0.9 and the lightness to 10.

It doesn't look to me like there's an issue with the conversion since the values are the same. Rather, it seems the static map service is giving different a result for the same values. Has anyone come across a similar problem?

I've fixed the image links, but the URL is the same for them both, some mistake? — duncan, Dec 23 '14 at 11:35
Have updated img url (http://i.imgur.com/OygmxrM.png) which shows the incorrect colours. — kevflood, Dec 23 '14 at 14:04

duncan · Accepted Answer · 2014-12-23T14:52:46.683

-1

The Google docs for the Static Maps API gives the following options for styling the map:

hue
lightness
saturation
gamma
inverse_lightness
visibility

The string given by that tool for converting SnazzyMaps JSON into a static maps URL gives:

i.e. invert_lightness instead of inverse_lightness. Could that be the problem? When I change it from:

to:

I get something very different looking.

In fact, further reading of the docs, I think perhaps you should specify the lightness value as a negative: "Negative values increase darkness". Is this more like what you want your map to look like:

edited Dec 23 '14 at 14:52

answered Dec 23 '14 at 14:47

duncan

31,401
13
78
99

Yes, the negative on the lightness is it. – kevflood Jan 06 '15 at 18:17
I had spotted the invert_lightness vs inverse_lightness but then saw that changing that param name only resulted in different output because the value was being completely missed (i.e. PPPinvert_lightness gives same result as invert_lightness). Many thanks. I'm unable to comment on the above link so will include a separate answer here (based on above) with a modification to do the correct conversion. – kevflood Jan 06 '15 at 18:26
Function here http://jsfiddle.net/ad5kprad/ is taken from Googles Style editor (with some minor alterations). However, using styles from snazzymaps, have found that it doesn't work fully. Some issues: – kevflood Jan 20 '15 at 14:45
1) static styles specifying a hue do not convert well, e.g. [no link allowed] "snazzymaps.com 50 shades of blue" administrative_geometry.stroke comes out red. If you change hue to color seems to work 2) some styles with global values do not seem to translate well to static maps at all, with the static map engine refusing to allow overrides to a global color e.g: "snazzymaps.com a dark world". some required manual adjustment of color in uri to fix – kevflood Jan 20 '15 at 14:50
Might need to be asked as a new question – duncan Jan 20 '15 at 15:06

Issue Converting Google Maps styles to Google Static Maps URI

1 Answers1