Search code examples
htmlol3-google-maps

Transferring the Google Maps API V3 "styles" to OpenLayers using ol3gm


I have a map made with the google maps api v3, that has the style that I want. But I have no idea how to implement it (if at all possible) into OpenLayers. I will add the code that I wish to add to open layers below. I saw ol3gmp and hoped it was the answer but I can't figure out if it is or isn't.

        	styles:[
  			{"elementType": "geometry","stylers": [{"color": "#242f3e"}]},
			{"elementType": "labels","stylers": [{"visibility": "off"}]},
			{"elementType": "labels.text.fill","stylers": [{"color": "#746855"}]},
  			{"elementType": "labels.text.stroke","stylers": [{"color": "#242f3e"}]},
  			{"featureType": "administrative.land_parcel",
				"stylers": [{"visibility": "off"}]},
 			{"featureType": "administrative.locality","elementType": "labels",
				"stylers": [{"visibility": "on"}]},
			{"featureType": "administrative.locality",
				"elementType": "labels.text.fill",
				"stylers": [{"color": "#d59563"}]},
  			{"featureType": "administrative.neighborhood",
				"stylers": [{"visibility": "off"}]},
			{"featureType": "poi","stylers": [{"visibility": "off"}]},
			{"featureType": "poi","elementType": "labels.text.fill",
				"stylers": [{"color": "#d59563"}]},
			{"featureType": "poi.park","elementType": "geometry",
				"stylers": [{"color": "#263c3f"}]},
			{"featureType": "poi.park","elementType": "labels.icon",
				"stylers": [{"visibility": "simplified"}]},
			{"featureType": "poi.park","elementType": "labels.icon",
				"stylers": [{"visibility": "simplified"}]},
			{"featureType": "poi.park","elementType": "labels.text",
				"stylers": [{"visibility": "simplified"}]},
			{"featureType": "poi.park","elementType": "labels.text.fill",
				"stylers": [{"visibility": "simplified"}]},
			{"featureType": "poi.park","elementType": "labels.text.stroke",
				"stylers": [{"visibility": "simplified"}]},
			{"featureType": "road","stylers": [{"visibility": "on"}]},
			{"featureType": "road","elementType": "geometry",
				"stylers": [{"color": "#38414e"}]},
			{"featureType": "road","elementType": "geometry.stroke",
				"stylers": [{"color": "#212a37"}]},
			{"featureType": "road","elementType": "labels.text.fill",
				"stylers": [{"color": "#9ca5b3"}]},
			{"featureType": "road.highway","elementType": "geometry",
				"stylers": [{"color": "#746855"}]},
			{"featureType": "road.highway","elementType": "geometry.stroke",
				"stylers": [{"color": "#1f2835"}]},
			{"featureType": "road.highway","elementType": "labels.text.fill",
				"stylers": [{"color": "#f3d19c"}]},
			{"featureType": "transit","stylers": [{"visibility": "off"}]},
			{"featureType": "transit.station.airport",
				"stylers": [{"visibility": "on"}]},
			{"featureType": "water","elementType": "geometry",
				"stylers": [{"color": "#17263c"}]},
			{"featureType": "water","elementType": "labels.text.fill",
				"stylers": [{"color": "#515c6d"}]},
			{"featureType": "water","elementType": "labels.text.stroke",
				"stylers": [{"color": "#17263c"}]}
			]
		});


Solution

  • You can give the style definition to the olgm layer and it will transfert it to the map created within Google Maps. Here's a snippet:

    var themedLayer = new olgm.layer.Google({
      styles: [{
        "stylers": [{
          "saturation": -100
        },{
           "gamma": 2.25
        }]
      }]
    });
    

    See also this live example showing this (and its JavaScript source file).