Appliquer un style de carte Google personnalisé dans OpenLayers2?

10

Récemment, je suis tombé sur cet article intéressant montrant le potentiel d'ajouter des styles personnalisés à Google Maps. Quelques exemples de cartes stylisées peuvent être vus ici et vous pouvez concevoir votre propre à partir de zéro ici .

Je voudrais appliquer le thème "niveaux de gris" à ma carte de base OpenLayers: entrez la description de l'image ici

La description du style selon la démo de Google ressemblerait en quelque sorte à:

var styles = {
  'Greyscale': [
    {              
      featureType: 'all',
      rules: [
        {saturation: -100},
        {gamma: 0.50}
      ]
    }
  ]
}

Ma carte Google dans OpenLayers ressemble actuellement simplement à:

var gmap = new OpenLayers.Layer.Google("Google Streets",
    {
    'numZoomLevels': 20,
    'sphericalMercator': true}
);

Comment puis-je appliquer un thème en niveaux de gris à ma carte?

openlayers-2 google-maps radek
la source
Google Maps Colorizr googlemapscolorizr.stadtwerk.org peut être utile si vous souhaitez définir vos propres couleurs spécifiques.
radek
Connexe: stackoverflow.com/questions/4003578/google-maps-in-grayscale
radek
Voici quelques exemples de jouer avec les couleurs: 41latitude.com/post/1268734799/google-styled-maps~~V~~plural~~3rd
radek
Vous ne voulez pas lâcher la prime? :) Je pense que simo l'a compris
Ragi Yaser Burhum
En effet. Encore trois jours de compétition tho;]
radek

Réponses:

20

Il semble que vous puissiez accéder directement à l'objet googlemap à l'aide de layer.mapObject .

Reportez-vous à l'API gmap pour styliser la couche: https://developers.google.com/maps/documentation/javascript/styling

Voici une petite page d'exemple que j'ai créée: http://www.intermezzo-coop.eu/mapping/styled_gmap.html

Voir également l'assistant googlemap: https://mapstyle.withgoogle.com/

simo
la source
Avez-vous réussi, Radek?
simo
@simo: Je ne sais pas exactement comment utiliser « layer.mapObject »
radek
1
@radek; vous devrez créer certains de vos propres JS pour définir le style de votre carte; il y a plusieurs bons exemples sur le deuxième lien là-bas qui vous montreront un très bon flux.
DEWright
1
@radek: Je ne l'ai pas testé mais je suppose que vous créez votre couche gmap comme suit var glayer = new OpenLayers.Layer.Google (options) , puis créez votre style en utilisant la syntaxe Gmap, et enfin appliquez-le en faisant glayer.mapObject.mapTypes .set («hiphop», jayzMapType); voir l'exemple donné ci-dessus. Si j'ai un peu de temps, je vais essayer de le faire et je vous le ferai savoir
simo
4
@radek: c'est parti empreinte-urbaine.eu/mapping/styled_gmap.html
simo