Question

Has anyone figured out how to integrate Stamen tiles with Gmaps4rails? It’s a bit confusing since google.maps isn’t explicitly called in the Gmaps4Rails gem. Would love any advice on how to hook in the required information.

Answer 1

I have found a (rough) way to create a slippy map with OSM tiles using gmaps4rails. By the looks of it it should be even easier with stamen maps. You might find some hints how to get this working with the gem looking at my solution here : Slippy maps for gmaps4rails

I hadn’t come across stamen maps before. They look amazing. A shame the Terrain map isn’t available in Europe. I will play with it tomorrow and see if I can find out more.

Edit:

In gmaps4rails.base.js.coffee add this method:

 #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")

If you want watercolor or terrain you need to swap wherever it says toner for what you like (including in the TileUrl!).

In js_builder.rb add a call to your method like this

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

just after @js << "#{gmap_id}.initialize();".

If you use rvm like me js_builder.rb will not be in your app directory, for me it’s in /Users/<username>/.rvm/gems/ruby-1.9.3-p194/gems/gmaps4rails-1.5.2

Lastly, change your view code like this:

 <%= 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}}'}) %>

I am sure there is a prettier way of doing this but it seems to work.