Скользкие карты для gmaps4rails
Я подумал, что было бы неплохо использовать OpenStreetMap (или OpenCycleMap) в качестве поставщика листов карты в API Google. Вот пример того, как это делается в простом JavaScript:
<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
Таким образом, можно получить карту OSM (которая выглядит намного лучше, например, для пеших или велосипедных прогулок) в сочетании с типами карт Google и гораздо более приятным интерфейсом Google, а также всеми методами и параметрами, которые доступны только для карт Google в gmaps4rails (например, кластеризация и т. д.).
Я пытался выяснить, как реализовать это, но, честно говоря, это немного над моей головой.
Кто-нибудь еще пытался добиться чего-то подобного?
Редактировать: Я нашел способ добиться того, чего хочу. Это не красиво, но я подумал, что все равно должен опубликовать это, так что, возможно, другие могут предложить лучшие идеи.
Вgmaps4rails.base.js.coffee
Я добавил этот метод:
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")
Вjs_builder.rb
Я добавил вызов метода, как это@js << "#{gmap_id}.create_OSM();"
сразу после@js << "#{gmap_id}.initialize();"
.
И наконец, мой код вида выглядит так:
<%= 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}}'}) %>
Это работает, и я доволен результатом. Требуется серьезная очистка и рефакторинг, хотя. Любые комментарии?