X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/66f0a4da049e2f71a950ad4adf5f5593cd152f4d..2a9286a16a0ca0e6aa025b13771d3118040b9d60:/app/assets/javascripts/map.js.erb diff --git a/app/assets/javascripts/map.js.erb b/app/assets/javascripts/map.js.erb index 520e9296e..80e77f26c 100644 --- a/app/assets/javascripts/map.js.erb +++ b/app/assets/javascripts/map.js.erb @@ -1,110 +1,88 @@ // Leaflet extensions -L.LatLngBounds.include({ - getSouthLat: function () { - return this._southWest.lat; - }, - - getWestLng: function () { - return this._southWest.lng; - }, - - getNorthLat: function () { - return this._northEast.lat; - }, - - getEastLng: function () { - return this._northEast.lng; - }, - - toBBOX: function () { - var decimal = 6; - var mult = Math.pow(10, decimal); - var xmin = Math.round(this.getWestLng() * mult) / mult; - var ymin = Math.round(this.getSouthLat() * mult) / mult; - var xmax = Math.round(this.getEastLng() * mult) / mult; - var ymax = Math.round(this.getNorthLat() * mult) / mult; - return xmin + "," + ymin + "," + xmax + "," + ymax; - }, - +L.extend(L.LatLngBounds.prototype, { getSize: function () { return (this._northEast.lat - this._southWest.lat) * (this._northEast.lng - this._southWest.lng); - } -}); - -L.Bounds.include({ - getWidth: function () { - return this.max.x - this.min.x; }, - getHeight: function () { - return this.max.y - this.min.y; + wrap: function () { + return new L.LatLngBounds(this._southWest.wrap(), this._northEast.wrap()); } }); L.Icon.Default.imagePath = <%= "#{asset_prefix}/images".to_json %>; var map; - -var layers = [ - { - klass: L.OSM.Mapnik, - attribution: "", - keyid: "mapnik", - layerCode: "M", - name: I18n.t("javascripts.map.base.standard") - }, - { - klass: L.OSM.CycleMap, - attribution: "Tiles courtesy of Andy Allan", - keyid: "cyclemap", - layerCode: "C", - name: I18n.t("javascripts.map.base.cycle_map") - }, - { - klass: L.OSM.TransportMap, - attribution: "Tiles courtesy of Andy Allan", - keyid: "transportmap", - layerCode: "T", - name: I18n.t("javascripts.map.base.transport_map") - }, - { - klass: L.OSM.MapQuestOpen, - attribution: "Tiles courtesy of MapQuest ", - keyid: "mapquest", - layerCode: "Q", - name: I18n.t("javascripts.map.base.mapquest") +var layers; +var objectLayer; +var objectLoader; + +function createMap(divName, options, moreOptions) { + if (!layers) { + layers = [ + { + klass: L.OSM.Mapnik, + attribution: "", + keyid: "mapnik", + layerCode: "M", + name: I18n.t("javascripts.map.base.standard") + }, + { + klass: L.OSM.CycleMap, + attribution: "Tiles courtesy of Andy Allan", + keyid: "cyclemap", + layerCode: "C", + name: I18n.t("javascripts.map.base.cycle_map") + }, + { + klass: L.OSM.TransportMap, + attribution: "Tiles courtesy of Andy Allan", + keyid: "transportmap", + layerCode: "T", + name: I18n.t("javascripts.map.base.transport_map") + }, + { + klass: L.OSM.MapQuestOpen, + attribution: "Tiles courtesy of MapQuest ", + keyid: "mapquest", + layerCode: "Q", + name: I18n.t("javascripts.map.base.mapquest") + } + ]; } -]; -function createMap(divName, options) { - options = $.extend({zoomControl: false, panZoomControl: true, layerControl: true}, options); + moreOptions = moreOptions || {}; + + 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(''); // For tmcw + map.attributionControl.setPrefix(''); } - if (options.panZoomControl) { - new L.Control.Pan().addTo(map); - new L.Control.Zoomslider({stepHeight: 7}).addTo(map); - } var layersControl = L.control.layers(); if (options.layerControl) { layersControl.addTo(map); + map.layersControl = layersControl; + } + + if (moreOptions.locateControl) { + var loc = L.control.locate({ + position: 'topright' + }); + loc.addTo(map); } for (var i = 0; i < layers.length; i++) { layers[i].layer = new (layers[i].klass)(layers[i]); - if (i == 0) { - layers[i].layer.addTo(map); - } layersControl.addBaseLayer(layers[i].layer, layers[i].name); } + layers[0].layer.addTo(map); + $("#" + divName).on("resized", function () { map.invalidateSize(); }); @@ -112,55 +90,63 @@ function createMap(divName, options) { 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); +function addObjectToMap(object, options) { + if (objectLoader) { + objectLoader.abort(); } - return marker; -} - -function removeMarkerFromMap(marker) { - map.removeLayer(marker); -} + if (objectLayer) { + map.removeLayer(objectLayer); + } -function addObjectToMap(object, zoom, callback) { - $.ajax({ + objectLoader = $.ajax({ url: OSM.apiUrl(object), dataType: "xml", success: function (xml) { - var layer = new L.OSM.DataLayer(xml, { - style: { - strokeColor: "blue", - strokeWidth: 3, - strokeOpacity: 0.5, - fillOpacity: 0.2, - fillColor: "lightblue", - pointRadius: 6 + objectLayer = new L.OSM.DataLayer(null, { + styles: { + node: options.style, + way: options.style, + area: options.style } }); - var bounds = layer.getBounds(); + objectLayer.interestingNode = function (node, ways, relations) { + if (object.type === "node") { + return true; + } else if (object.type === "relation") { + for (var i = 0; i < relations.length; i++) + if (relations[i].members.indexOf(node) != -1) + return true; + } else { + return false; + } + }; + + objectLayer.addData(xml); + + var bounds = objectLayer.getBounds(); - if (zoom) { + if (options.zoom) { map.fitBounds(bounds); } - if (callback) { - callback(bounds); + if (options.callback) { + options.callback(bounds); } - layer.addTo(map); + objectLayer.addTo(map); } }); } @@ -186,21 +172,26 @@ function getMapBaseLayer() { } function getMapLayers() { + var layerConfig = ""; for (var i = 0; i < layers.length; i++) { if (map.hasLayer(layers[i].layer)) { - return layers[i].layerCode; + layerConfig += layers[i].layerCode; } } - - return ""; + return layerConfig; } 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); + } }