[OpenLayers-Users] Using Google styled map base layers in OpenLayers

Jan Hartmann j.l.h.hartmann at uva.nl
Fri Oct 19 06:17:26 PDT 2012


Hi Dennis,

I use the following function to remove highway markers from Google Maps. 
The function is executed by the parent mapObject of the Google Map 
layer. When I switch to the Google Hybrid layer in the same mapObject, 
the markers are also invisible.

Hope this helps,

Jan

     function setGoogleStyles(googleMapLayer) {
             var styles = [{
                 "featureType": "road.highway",
                  "elementType": "labels.icon",
                 "stylers": [ {
                     "visibility": "off"
                 } ]
             },{
                  "featureType": "road.highway",
                  "elementType": "geometry",
                  "stylers": [ {
                      "visibility": "on"
                 } ]
             },{
                 "featureType": "road.arterial",
                  "elementType": "labels.icon",
                 "stylers": [ {
                     "visibility": "off"
                 } ]
             },{
                  "featureType": "road.arterial",
                  "elementType": "geometry",
                  "stylers": [ {
                      "visibility": "on"
                 } ]
             }]
             googleMapLayer.mapObject.setOptions({styles: styles});

On 10/19/2012 02:57 PM, den ben wrote:
> Hey guys this is a repost. I didn't get any responses. Thought maybe 
> knowing that someone might have an idea or get sudden inspiration to 
> check this out?
>
> I'm trying to implement Google's  map styling feature (google map api 
> v3) which allows customization of map features (the ability to modify 
> the color/visibility/opacity of map features like water, roads and 
> labels).
>
> I have found some example websites but all them are using the ROADMAP 
> maptype. I want to style other map types as well, especially TERRAIN. 
> But when I get the syntax right, and when it  actually works, it 
> always defaults back to the ROADMAP. Has anyone done this?
>
> I would greatly appreciate any insight or advice!
> Thanks,
> Dennis
>
>
> Here's some code:
> //yellow water:
> var stylez = [
>             {
>                 stylers:
>                     [
>                         { visibility: "on" }
>                     ]
>             },
>             {
>                 featureType: "water",
>                 stylers: [
>                     {hue: "#F7E66B"},
>                     {saturation: 100}
>                 ]
>             }
>         ];
> var _projection = new OpenLayers.Projection("EPSG:4326");
> var _bounds = new OpenLayers.Bounds(-20037508.34, -20037508.34, 
> 20037508.34, 20037508.34);
>
> var _baseLayers = [
>     new OpenLayers.Layer.Google("TERRAIN", {type: 
> google.maps.MapTypeId.TERRAIN, sphericalMercator:true, 'maxExtent': 
> _bounds}),
>     new OpenLayers.Layer.Google("ROADMAP", {type: 
> google.maps.MapTypeId.ROADMAP, sphericalMercator:true, 'maxExtent': 
> _bounds}),
>     new OpenLayers.Layer.Google("HYBRID", {type: 
> google.maps.MapTypeId.HYBRID, sphericalMercator:true, 'maxExtent': 
> _bounds}),
>     new OpenLayers.Layer.Google("SATELLITE", {type: 
> google.maps.MapTypeId.SATELLITE, sphericalMercator:true, 'maxExtent': 
> _bounds}),
>     new OpenLayers.Layer.Google("TEST", {mapTypeId: 
> google.maps.MapTypeId.TERRAIN, styles: stylez})
>   ];
>
> var styledMapOptions = {
>       name: "Styled Map"
>   };
> var styledMapType = new google.maps.StyledMapType(stylez, 
> styledMapOptions);
>
>
> var _map = new OpenLayers.Map({
>     div: 'my_map_div',
>     controls:[new OpenLayers.Control.Navigation(),new 
> OpenLayers.Control.ArgParser(),new OpenLayers.Control.Attribution()],
>     displayProjection: _projection,
>     maxResolution:'auto',
>     layers: _baseLayers,
>     units: "degrees"
>   });
>
>
> var test_layer = this.get_layer(_map, 'TEST');
> test_layer.mapObject.mapTypes.set('styled', styledMapType);
> test_layer.mapObject.setMapTypeId('styled');
>
>
>
>
>
> _______________________________________________
> Users mailing list
> Users at lists.osgeo.org
> http://lists.osgeo.org/mailman/listinfo/openlayers-users

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.osgeo.org/pipermail/openlayers-users/attachments/20121019/cfb2bdd3/attachment.html>


More information about the Users mailing list