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

Question

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

Alexandre Dubé · Accepted Answer · 2016-12-21T13:03:07.150

0

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

edited Dec 21 '16 at 13:03

answered Dec 20 '16 at 13:17

Alexandre Dubé

2,769
1
18
30

The JavaScript link is empty :S So if I understand you correctly, I put in the different "style elements" from google maps in to there? – Chimiboy Dec 21 '16 at 09:35
Uncaught ReferenceError: olgm is not defined at Test_2.html:30 – Chimiboy Dec 21 '16 at 12:50
That is the error I get now, when I add my "styles" in as shown above. – Chimiboy Dec 21 '16 at 12:51
I fixed the JavaScript source file link. About the ReferenceError: did you load olgm? Take a look at the source code of the live example (at the html) to see how the libs are loaded. – Alexandre Dubé Dec 21 '16 at 13:05
I may be crazy, but I can't for the life of me find the libraries... Any help? – Chimiboy Dec 22 '16 at 07:38
http://mapgears.github.io/ol3-google-maps/ (.zip icon on the right), or https://github.com/mapgears/ol3-google-maps/releases (the .zip files next to the release you want) – Alexandre Dubé Dec 23 '16 at 13:40

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

1 Answers1