[GIS] Applying Google maps styles to OpenStreetMap

google mapsjavascriptopenlayersopenstreetmap

I have these styles of google maps:

[
{
    "featureType": "landscape",
    "elementType": "all",
    "stylers": [
        {
            "saturation": "-16"
        },
        {
            "lightness": "33"
        }
    ]
},
{
    "featureType": "landscape.natural",
    "elementType": "all",
    "stylers": [
        {
            "saturation": "-21"
        },
        {
            "lightness": "15"
        }
    ]
},
{
    "featureType": "poi.business",
    "elementType": "labels",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "road.highway",
    "elementType": "all",
    "stylers": [
        {
            "hue": "#53FF00"
        },
        {
            "saturation": -73
        },
        {
            "lightness": 40
        },
        {
            "gamma": 1
        }
    ]
},
{
    "featureType": "road.arterial",
    "elementType": "all",
    "stylers": [
        {
            "hue": "#FBFF00"
        },
        {
            "gamma": 1
        }
    ]
},
{
    "featureType": "road.local",
    "elementType": "all",
    "stylers": [
        {
            "hue": "#00FFFD"
        },
        {
            "lightness": 30
        },
        {
            "gamma": 1
        }
    ]
},
{
    "featureType": "transit",
    "elementType": "all",
    "stylers": [
        {
            "hue": "#00cdff"
        }
    ]
},
{
    "featureType": "transit.line",
    "elementType": "all",
    "stylers": [
        {
            "hue": "#ffbf00"
        }
    ]
},
{
    "featureType": "transit.line",
    "elementType": "geometry",
    "stylers": [
        {
            "visibility": "on"
        },
        {
            "color": "#9b9b9b"
        }
    ]
},
{
    "featureType": "transit.station.rail",
    "elementType": "all",
    "stylers": [
        {
            "saturation": "-37"
        },
        {
            "lightness": "-6"
        }
    ]
},
{
    "featureType": "water",
    "elementType": "all",
    "stylers": [
        {
            "saturation": "-69"
        },
        {
            "lightness": "-13"
        },
        {
            "gamma": 1
        },
        {
            "color": "#9fbed4"
        }
    ]
}
]

I would like to apply it on a OSM map in OpenLayers.

Best Answer

It's probably taking a step back first...

OpenLayers is a JS library that can display map tiles in either raster or vector format, but it doesn't display OSM data "directly". Normally, there'd be a database on a server with OSM data in it (often a Postgres database loaded by osm2pgsql), and a renderer on that server that's acts as a plugin to a web server that sends out either raster or vector tiles to a web client, where something such as OpenLayers takes the data from the server and displays it for the user.

Before you say "I've got this map style..." you'll need to say what sort of architecture you're planning on using (web client server, as mentioned above, or perhaps some data and OpenLayers in an app on a standalone device?). Once you've decided on that, you can find out technically what map styles will apply, and start making one based on your style for a Google map.

This OSM wiki page is probably worth a read, as is https://switch2osm.org/ (for raster tiles). Vector tiles is a bit more complicated, but perhaps read https://wiki.openstreetmap.org/wiki/Vector_tiles and https://wiki.openstreetmap.org/wiki/OpenMapTiles . If you just want to use an existing service (but pay for it) options include https://www.mapbox.com/ and others at https://switch2osm.org/providers/ .

To take just one example from all that, if you've already got an OSM rendering stack set up as per here and you want to create a map style based on the one that you're already using, then OSM Bright is probably a good starting point - it's simpler than the "standard" map style that you see at OpenStreetMap.org and probably closer to what you are trying to achieve.

Related Question