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

636 views Asked by At

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"}]}
   ]
  });

1

There are 1 answers

6
Alexandre Dubé On BEST ANSWER

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).