Rutschige Karten für gmaps4rails

Ich dachte, es wäre schön, OpenStreetMap (oder OpenCycleMap) als Anbieter von Kartenkacheln in der Google-API zu verwenden. Hier ist ein Beispiel, wie dies in einfachem Javascript gemacht wird:

<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

Auf diese Weise könnte man eine OSM-Karte (die zum Beispiel für Wander- oder Fahrradzwecke viel schöner aussieht) in Kombination mit den Google-Kartentypen und der viel schöneren Google-Oberfläche sowie allen Methoden und Optionen haben, die nur für Google Maps in verfügbar sind gmaps4rails (zB Clustering etc.).

Ich habe versucht, herauszufinden, wie man das umsetzt, aber es geht mir ehrlich gesagt etwas über den Kopf.

Hat jemand anderes versucht, etwas Ähnliches zu erreichen?

Edit: Ich habe einen Weg gefunden, um das zu erreichen, was ich will. Es ist nicht hübsch, aber ich dachte, ich sollte es trotzdem posten, damit sich andere vielleicht bessere Ideen einfallen lassen.

Imgmaps4rails.base.js.coffee Ich habe diese Methode hinzugefügt:

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

Imjs_builder.rb Ich habe den Methodenaufruf so hinzugefügt@js << "#{gmap_id}.create_OSM();" kurz nachdem@js << "#{gmap_id}.initialize();".

Zuletzt sieht mein Ansichtscode so aus:

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

Es funktioniert und ich bin mit dem Ergebnis zufrieden. Muss jedoch gründlich aufgeräumt und überarbeitet werden. Irgendwelche Kommentare?

Antworten auf die Frage(0)

Ihre Antwort auf die Frage