Mapas slippy para gmaps4rails

Pensé que sería bueno usar OpenStreetMap (u OpenCycleMap) como un proveedor de mosaicos de mapas dentro de la API de Google. Aquí hay un ejemplo de cómo se hace esto en javascript simple:

<script type="text/javascript">
        var element = document.getElementById("map");

        /*
        Build list of map types.
        You can also use var mapTypeIds = ["roadmap", "satellite", "hybrid", "terrain", "OSM"]
        but static lists sucks when google updates the default list of map types.
        */
        var mapTypeIds = [];
        for(var type in google.maps.MapTypeId) {
            mapTypeIds.push(google.maps.MapTypeId[type]);
        }
        mapTypeIds.push("OSM");

        var map = new google.maps.Map(element, {
            center: new google.maps.LatLng(48.1391265, 11.580186300000037),
            zoom: 11,
            mapTypeId: "OSM",
            mapTypeControlOptions: {
                mapTypeIds: mapTypeIds
            }
        });

        map.mapTypes.set("OSM", new google.maps.ImageMapType({
            getTileUrl: function(coord, zoom) {
                return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
            },
            tileSize: new google.maps.Size(256, 256),
            name: "OpenStreetMap",
            maxZoom: 18
        }));
    </script>

http://wiki.openstreetmap.org/wiki/Google_Maps_Example

De esta manera, se podría tener un mapa OSM (que se ve mucho mejor, por ejemplo, para caminatas o ciclismo) combinado con los tipos de mapas de Google y la interfaz de Google mucho más agradable, además de todos los métodos y opciones que solo están disponibles para mapas de Google gmaps4rails (por ejemplo, agrupación, etc.).

He intentado descubrir cómo implementar esto, pero francamente está un poco por encima de mi cabeza.

¿Alguien más ha intentado lograr algo similar?

Edit: He descubierto una manera de lograr lo que quiero. No es bonito, pero pensé que debería publicarlo de todos modos, así que tal vez otros puedan tener mejores ideas.

Engmaps4rails.base.js.coffee He añadido este método:

create_OSM : ->
OSMMapTypeOptions = new google.maps.ImageMapType(
  getTileUrl: (coord, zoom) ->
    "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png"
  tileSize: new google.maps.Size(256, 256)
  name: "OSM"
  maxZoom: 18
)
@serviceObject.mapTypes.set("OSM", OSMMapTypeOptions)
CycleMapTypeOptions = new google.maps.ImageMapType(
  getTileUrl: (coord, zoom) ->
    "http://tile.opencyclemap.org/cycle/" + zoom + "/" + coord.x + "/" + coord.y + ".png"
  tileSize: new google.maps.Size(256, 256)
  name: "Cycle"
  maxZoom: 18
)
@serviceObject.mapTypes.set("OCM", CycleMapTypeOptions)
@serviceObject.setMapTypeId("OSM")

Enjs_builder.rb Agregué el método llamado así.@js << "#{gmap_id}.create_OSM();" justo después de@js << "#{gmap_id}.initialize();".

Por último, mi código de vista se ve así:

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

Funciona y estoy satisfecho con el resultado. Sin embargo, necesita una limpieza seria y refactorización. ¿Algún comentario?

Respuestas a la pregunta(0)

Su respuesta a la pregunta