X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/30ad58c01ff8acae377cfd974fcc94d6898722da..56db9ca2b7e2475cd8025630049fb4a4b824f2d9:/app/assets/javascripts/map.js.erb diff --git a/app/assets/javascripts/map.js.erb b/app/assets/javascripts/map.js.erb index eae9b8952..928575eb5 100644 --- a/app/assets/javascripts/map.js.erb +++ b/app/assets/javascripts/map.js.erb @@ -1,5 +1,5 @@ // Leaflet extensions -L.LatLngBounds.include({ +L.extend(L.LatLngBounds.prototype, { getSouthLat: function () { return this._southWest.lat; }, @@ -29,10 +29,14 @@ L.LatLngBounds.include({ getSize: function () { return (this._northEast.lat - this._southWest.lat) * (this._northEast.lng - this._southWest.lng); + }, + + wrap: function () { + return new L.LatLngBounds(this._southWest.wrap(), this._northEast.wrap()); } }); -L.Bounds.include({ +L.extend(L.Bounds.prototype, { getWidth: function () { return this.max.x - this.min.x; }, @@ -42,33 +46,34 @@ L.Bounds.include({ } }); +L.Icon.Default.imagePath = <%= "#{asset_prefix}/images".to_json %>; + var map; var layers = [ { - urlTemplate: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', + klass: L.OSM.Mapnik, attribution: "", keyid: "mapnik", layerCode: "M", name: I18n.t("javascripts.map.base.standard") }, { - urlTemplate: 'http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', + klass: L.OSM.CycleMap, attribution: "Tiles courtesy of Andy Allan", keyid: "cyclemap", layerCode: "C", name: I18n.t("javascripts.map.base.cycle_map") }, { - urlTemplate: 'http://{s}.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png', + klass: L.OSM.TransportMap, attribution: "Tiles courtesy of Andy Allan", keyid: "transportmap", layerCode: "T", name: I18n.t("javascripts.map.base.transport_map") }, { - urlTemplate: 'http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png', - subdomains: '1234', + klass: L.OSM.MapQuestOpen, attribution: "Tiles courtesy of MapQuest ", keyid: "mapquest", layerCode: "Q", @@ -76,21 +81,34 @@ var layers = [ } ]; -function createMap(divName) { - map = L.map(divName); +function createMap(divName, options) { + options = $.extend({zoomControl: true, panZoomControl: true, layerControl: true}, options); + + map = L.map(divName, $.extend({}, options, {panControl: false, zoomsliderControl: false, maxZoom: 18})); + + if (map.attributionControl) { + map.attributionControl.setPrefix(''); + } - map.attributionControl.setPrefix(''); // For tmcw + if (options.panZoomControl) { + new L.Control.Pan().addTo(map); + new L.Control.Zoomslider({stepHeight: 7}).addTo(map); + } - var layersControl = L.control.layers().addTo(map); + var layersControl = L.control.layers(); + + if (options.layerControl) { + layersControl.addTo(map); + map.layersControl = layersControl; + } for (var i = 0; i < layers.length; i++) { - layers[i].layer = L.tileLayer(layers[i].urlTemplate, layers[i]); - if (i == 0) { - layers[i].layer.addTo(map); - } + layers[i].layer = new (layers[i].klass)(layers[i]); layersControl.addBaseLayer(layers[i].layer, layers[i].name); } + layers[0].layer.addTo(map); + $("#" + divName).on("resized", function () { map.invalidateSize(); }); @@ -98,34 +116,23 @@ function createMap(divName) { return map; } -function getArrowIcon() { +function getUserIcon(url) { return L.icon({ - iconUrl: <%= asset_path('arrow.png').to_json %>, - iconSize: [25, 22], - iconAnchor: [22, 20] + iconUrl: url || <%= asset_path('marker-red.png').to_json %>, + iconSize: [25, 41], + iconAnchor: [12, 41], + popupAnchor: [1, -34], + shadowUrl: <%= asset_path('images/marker-shadow.png').to_json %>, + shadowSize: [41, 41] }); } -function addMarkerToMap(position, icon, description) { - var marker = L.marker(position, icon ? {icon: icon} : null).addTo(map); - - if (description) { - marker.bindPopup(description); - } - - return marker; -} - -function removeMarkerFromMap(marker) { - map.removeLayer(marker); -} - function addObjectToMap(object, zoom, callback) { $.ajax({ url: OSM.apiUrl(object), dataType: "xml", success: function (xml) { - var layer = new L.OSM(xml, { + var layer = new L.OSM.DataLayer(xml, { style: { strokeColor: "blue", strokeWidth: 3, @@ -182,11 +189,16 @@ function getMapLayers() { } function setMapLayers(layerConfig) { + var foundLayer = false; for (var i = 0; i < layers.length; i++) { - if (~layerConfig.indexOf(layers[i].layerCode)) { + if (layerConfig.indexOf(layers[i].layerCode) >= 0) { map.addLayer(layers[i].layer); + foundLayer = true; } else { map.removeLayer(layers[i].layer); } } + if (!foundLayer) { + map.addLayer(layers[0].layer); + } }