10

Recently I stumbled upon this interesting article showing potential of adding custom styles to Google Maps. Some examples of styled maps can be seen here and you can design your own from scratch here.

I'd like to apply 'greyscale' theme to my OpenLayers base map: enter image description here

Style description according to Google demo would look somehow like:

var styles = {
  'Greyscale': [
    {              
      featureType: 'all',
      rules: [
        {saturation: -100},
        {gamma: 0.50}
      ]
    }
  ]
}

My Google map in OpenLayers currently looks simply like:

var gmap = new OpenLayers.Layer.Google("Google Streets",
    {
    'numZoomLevels': 20,
    'sphericalMercator': true}
);

How could I apply greyscale theme to my map?

20

It seems that you can directly access the googlemap object using layer.mapObject.

Refer to gmap API to style the layer: https://developers.google.com/maps/documentation/javascript/styling

Here is a small example page I have created: http://www.intermezzo-coop.eu/mapping/styled_gmap.html

See also the googlemap wizard : https://mapstyle.withgoogle.com/

Some of the information contained in this post requires additional references. Please edit to add citations to reliable sources that support the assertions made here. Unsourced material may be disputed or deleted.

  • Did you succeed, Radek? – simo Mar 3 '11 at 16:14
  • @simo: I'm not sure exactly how to use 'layer.mapObject' – radek Jun 6 '11 at 15:24
  • 1
    @radek; your going to need to create some of your own JS to define your map styling; there are several good examples on the second link there that will show you very good flow. – D.E.Wright Jun 6 '11 at 16:45
  • 1
    @radek : I haven't test it but I guess you create your gmap layer as so var glayer = new OpenLayers.Layer.Google(options), then create your style using Gmap syntax, and finally apply it doing glayer.mapObject.mapTypes.set('hiphop', jayzMapType); see the given exemple above. If I have some time soon, I'll try to do it and let you know – simo Jun 6 '11 at 20:24
  • 4
    @radek : Here we go empreinte-urbaine.eu/mapping/styled_gmap.html – simo Jun 7 '11 at 9:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.