X-Git-Url: https://git.openstreetmap.org/rails.git/blobdiff_plain/f913b7d8a551dafbf5b0f478fe3731ad60aaef9d..a7e67846a77722885b583a0f00ffe58b634e7eb3:/app/assets/javascripts/map.js.erb diff --git a/app/assets/javascripts/map.js.erb b/app/assets/javascripts/map.js.erb index 6d15f1fdb..8591e260a 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; }, @@ -45,6 +49,8 @@ L.Bounds.include({ L.Icon.Default.imagePath = <%= "#{asset_prefix}/images".to_json %>; var map; +var objectLayer; +var objectLoader; var layers = [ { @@ -78,12 +84,12 @@ var layers = [ ]; function createMap(divName, options) { - options = $.extend({zoomControl: false, panZoomControl: true, layerControl: true}, 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(''); // For tmcw + map.attributionControl.setPrefix(''); } if (options.panZoomControl) { @@ -95,16 +101,16 @@ function createMap(divName, options) { if (options.layerControl) { layersControl.addTo(map); + map.layersControl = layersControl; } 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(); }); @@ -115,17 +121,28 @@ function createMap(divName, options) { function getUserIcon(url) { return L.icon({ iconUrl: url || <%= asset_path('marker-red.png').to_json %>, - iconSize: [19, 25], - iconAnchor: [11, 26] + iconSize: [25, 41], + iconAnchor: [12, 41], + popupAnchor: [1, -34], + shadowUrl: <%= asset_path('images/marker-shadow.png').to_json %>, + shadowSize: [41, 41] }); } function addObjectToMap(object, zoom, callback) { - $.ajax({ + if (objectLoader) { + objectLoader.abort(); + } + + if (objectLayer) { + map.removeLayer(objectLayer); + } + + objectLoader = $.ajax({ url: OSM.apiUrl(object), dataType: "xml", success: function (xml) { - var layer = new L.OSM.DataLayer(xml, { + objectLayer = new L.OSM.DataLayer(xml, { style: { strokeColor: "blue", strokeWidth: 3, @@ -136,7 +153,7 @@ function addObjectToMap(object, zoom, callback) { } }); - var bounds = layer.getBounds(); + var bounds = objectLayer.getBounds(); if (zoom) { map.fitBounds(bounds); @@ -146,7 +163,7 @@ function addObjectToMap(object, zoom, callback) { callback(bounds); } - layer.addTo(map); + objectLayer.addTo(map); } }); } @@ -172,21 +189,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); + } }