[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