Intégration de Gmaps4Rails avec Stamen Maps

Question

Est-ce que quelqu'un a compris comment intégrer les tuiles Stamen avec Gmaps4rails? C'est un peu déroutant car google.maps n'est pas explicitement appelé dans la gemme Gmaps4Rails. Souhaiterait des conseils sur la façon de brancher l'information requise.

Answer 1

J'ai trouvé une manière (grossière) de créer une carte glissante avec des mosaïques OSM en utilisant gmaps4rails. D'après les apparences, cela devrait être encore plus facile avec les cartes d'étamine. Vous trouverez peut-être quelques conseils sur la façon de travailler avec la gemme en regardant ma solution ici: Slippy maps for gmaps4rails

Je n'avais jamais rencontré de cartes stamen auparavant. Ils ont l'air incroyable. Dommage que la carte du terrain ne soit pas disponible en Europe. Je vais jouer avec demain et voir si je peux en savoir plus.

Edit:

Dans gmaps4rails.base.js.coffee ajouter cette méthode:

#creates a Stamen Map layer with the mapTypeId "toner" 
createStamenMap : -> 
    StamenMapTypeOptions = new google.maps.ImageMapType(
    getTileUrl: (coord, zoom) -> 
     "http://tile.stamen.com/toner/" + zoom + "/" + coord.x + "/" + coord.y + ".png" 
    tileSize: new google.maps.Size(256, 256) 
    name: "toner" 
    maxZoom: 18 
) 
    @serviceObject.mapTypes.set("toner", StamenMapTypeOptions) 
    @serviceObject.setMapTypeId("toner") 

Si vous voulez aquarelle ou d'un terrain dont vous avez besoin d'échanger là où il est dit toner pour ce que vous aimez (y compris dans le TileUrl!).

Dans js_builder.rb ajouter un appel à votre méthode comme celui-ci

@js << "#{gmap_id}.createStamenMap();"

juste après @js << "#{gmap_id}.initialize();".

Si vous utilisez RVM comme moi js_builder.rb ne sera pas dans votre répertoire d'applications, pour moi il est dans /Users/<username>/.rvm/gems/ruby-1.9.3-p194/gems/gmaps4rails-1.5.2

Enfin, changer votre code de la vue comme ceci:

<%= gmaps("markers" => {"data" => @json}, 
       "map_options" => {"type" => "TERRAIN", :raw => '{mapTypeControlOptions: {mapTypeIds: ["toner", google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN], style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}}'}) %> 

Je suis sûr qu'il ya un façon plus jolie de le faire mais cela semble fonctionner.