X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/7ff77d9d3d7960ae993bf5ef97a66dbb10f2496e..3b43cb33cb756c19f8c635a66053a5b99b44eb6c:/app/assets/javascripts/map.js.erb diff --git a/app/assets/javascripts/map.js.erb b/app/assets/javascripts/map.js.erb index c97dc76c3..8b621e3ae 100644 --- a/app/assets/javascripts/map.js.erb +++ b/app/assets/javascripts/map.js.erb @@ -1,264 +1,195 @@ -var epsg4326 = new OpenLayers.Projection("EPSG:4326"); -var map; -var markers; -var vectors; -var popup; +// Leaflet extensions +L.extend(L.LatLngBounds.prototype, { + getSize: function () { + return (this._northEast.lat - this._southWest.lat) * + (this._northEast.lng - this._southWest.lng); + }, -function createMap(divName, options) { - options = options || {}; + wrap: function () { + return new L.LatLngBounds(this._southWest.wrap(), this._northEast.wrap()); + } +}); - map = new OpenLayers.Map(divName, { - controls: options.controls || [ - new OpenLayers.Control.ArgParser(), - new OpenLayers.Control.Attribution(), - new SimpleLayerSwitcher(), - new OpenLayers.Control.Navigation(), - new OpenLayers.Control.Zoom(), - new OpenLayers.Control.SimplePanZoom(), - new OpenLayers.Control.ScaleLine({geodesic: true}) - ], - numZoomLevels: 20, - displayProjection: new OpenLayers.Projection("EPSG:4326"), - theme: "<%= asset_path 'theme/openstreetmap/style.css' %>" - }); +L.Icon.Default.imagePath = <%= "#{asset_prefix}/images".to_json %>; - var mapnik = new OpenLayers.Layer.OSM.Mapnik(I18n.t("javascripts.map.base.standard"), { - attribution: "", - keyid: "mapnik", - displayOutsideMaxExtent: true, - wrapDateLine: true, - layerCode: "M" - }); - map.addLayer(mapnik); +var map; +var layers; +var objectLayer; +var objectLoader; - var cyclemap = new OpenLayers.Layer.OSM.CycleMap(I18n.t("javascripts.map.base.cycle_map"), { - attribution: "Tiles courtesy of Andy Allan", - keyid: "cyclemap", - displayOutsideMaxExtent: true, - wrapDateLine: true, - layerCode: "C" - }); - map.addLayer(cyclemap); +function createMap(divName, options) { + 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") + } + ]; + } - var transportmap = new OpenLayers.Layer.OSM.TransportMap(I18n.t("javascripts.map.base.transport_map"), { - attribution: "Tiles courtesy of Andy Allan", - keyid: "transportmap", - displayOutsideMaxExtent: true, - wrapDateLine: true, - layerCode: "T" - }); - map.addLayer(transportmap); + options = $.extend({zoomControl: true, panZoomControl: true, layerControl: true}, options); - var mapquest = new OpenLayers.Layer.OSM(I18n.t("javascripts.map.base.mapquest"), [ - "http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png", - "http://otile2.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png", - "http://otile3.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png", - "http://otile4.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png" - ], { - attribution: "Tiles courtesy of MapQuest ", - keyid: "mapquest", - displayOutsideMaxExtent: true, - wrapDateLine: true, - numZoomLevels: 19, - layerCode: "Q" - }); - map.addLayer(mapquest); + map = L.map(divName, $.extend({}, options, {panControl: false, zoomsliderControl: false, maxZoom: 18})); - markers = new OpenLayers.Layer.Markers("Markers", { - displayInLayerSwitcher: false, - numZoomLevels: 20, - projection: "EPSG:900913" - }); - map.addLayer(markers); + if (map.attributionControl) { + map.attributionControl.setPrefix(''); + } - $("#" + divName).on("resized", function () { - map.updateSize(); - }); + if (options.panZoomControl) { + new L.Control.Pan().addTo(map); + new L.Control.Zoomslider({stepHeight: 7}).addTo(map); + } - return map; -} + var layersControl = L.control.layers(); -function getArrowIcon() { - var size = new OpenLayers.Size(25, 22); - var offset = new OpenLayers.Pixel(-22, -20); - var icon = new OpenLayers.Icon("<%= asset_path 'arrow.png' %>", size, offset); + if (options.layerControl) { + layersControl.addTo(map); + map.layersControl = layersControl; + } - return icon; -} + for (var i = 0; i < layers.length; i++) { + layers[i].layer = new (layers[i].klass)(layers[i]); + layersControl.addBaseLayer(layers[i].layer, layers[i].name); + } -function addMarkerToMap(position, icon, description) { - var marker = new OpenLayers.Marker(proj(position), icon); + layers[0].layer.addTo(map); - markers.addMarker(marker); + $("#" + divName).on("resized", function () { + map.invalidateSize(); + }); - if (description) { - marker.events.register("mouseover", marker, function() { - openMapPopup(marker, description); - }); - } + return map; +} - return marker; +function getUserIcon(url) { + return L.icon({ + 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 addObjectToMap(url, zoom, callback) { - var layer = new OpenLayers.Layer.Vector("Objects", { - strategies: [ - new OpenLayers.Strategy.Fixed() - ], - protocol: new OpenLayers.Protocol.HTTP({ - url: url, - format: new OpenLayers.Format.OSM() - }), - style: { +function addObjectToMap(object, zoom, callback) { + if (objectLoader) { + objectLoader.abort(); + } + + if (objectLayer) { + map.removeLayer(objectLayer); + } + + objectLoader = $.ajax({ + url: OSM.apiUrl(object), + dataType: "xml", + success: function (xml) { + objectLayer = new L.OSM.DataLayer(null, { + style: { strokeColor: "blue", strokeWidth: 3, strokeOpacity: 0.5, fillOpacity: 0.2, fillColor: "lightblue", pointRadius: 6 - }, - projection: new OpenLayers.Projection("EPSG:4326"), - displayInLayerSwitcher: false - }); - - layer.events.register("loadend", layer, function() { - var extent; - - if (this.features.length) { - extent = this.features[0].geometry.getBounds(); - - for (var i = 1; i < this.features.length; i++) { - extent.extend(this.features[i].geometry.getBounds()); - } - - if (zoom) { - if (extent) { - this.map.zoomToExtent(extent); - } else { - this.map.zoomToMaxExtent(); - } - } + } + }); + + 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) { + map.fitBounds(bounds); } if (callback) { - callback(extent); + callback(bounds); } - }); - - map.addLayer(layer); -} - -function addBoxToMap(boxbounds, id, outline) { - if (!vectors) { - // Be aware that IE requires Vector layers be initialised on page load, and not under deferred script conditions - vectors = new OpenLayers.Layer.Vector("Boxes", { - displayInLayerSwitcher: false - }); - map.addLayer(vectors); - } - var geometry; - if (outline) { - vertices = boxbounds.toGeometry().getVertices(); - vertices.push(new OpenLayers.Geometry.Point(vertices[0].x, vertices[0].y)); - geometry = proj(new OpenLayers.Geometry.LineString(vertices)); - } else { - geometry = proj(boxbounds.toGeometry()); - } - var box = new OpenLayers.Feature.Vector(geometry, {}, { - strokeWidth: 2, - strokeColor: '#ee9900', - fillOpacity: 0 - }); - box.fid = id; - - vectors.addFeatures(box); - return box; + objectLayer.addTo(map); + } + }); } -function openMapPopup(marker, description) { - closeMapPopup(); +function addBoxToMap(bounds) { + var box = L.rectangle(bounds, { + weight: 2, + color: '#e90', + fillOpacity: 0 + }); - popup = new OpenLayers.Popup.FramedCloud("popup", marker.lonlat, null, - description, marker.icon, true); - popup.setBackgroundColor("#E3FFC5"); - map.addPopup(popup); + box.addTo(map); - return popup; + return box; } -function closeMapPopup() { - if (popup) { - map.removePopup(popup); - delete popup; - } -} - -function removeMarkerFromMap(marker){ - markers.removeMarker(marker); -} - -function removeBoxFromMap(box){ - vectors.removeFeature(box); -} - -function proj(x) { - return x.clone().transform(epsg4326, map.getProjectionObject()); -} - -function unproj(x) { - return x.clone().transform(map.getProjectionObject(), epsg4326); -} - -function setMapCenter(center, zoom) { - zoom = parseInt(zoom, 10); - var numzoom = map.getNumZoomLevels(); - if (zoom >= numzoom) zoom = numzoom - 1; - map.setCenter(proj(center), zoom); -} - -function getEventPosition(event) { - return map.getLonLatFromViewPortPx(event.xy).clone().transform(map.getProjectionObject(), epsg4326); +function getMapBaseLayer() { + for (var i = 0; i < layers.length; i++) { + if (map.hasLayer(layers[i].layer)) { + return layers[i]; + } + } } function getMapLayers() { - var layerConfig = ""; - - for (var i = 0; i < map.layers.length; i++) { - if (map.layers[i].layerCode && map.layers[i].getVisibility()) { - layerConfig += map.layers[i].layerCode; - } - } - - return layerConfig; + var layerConfig = ""; + for (var i = 0; i < layers.length; i++) { + if (map.hasLayer(layers[i].layer)) { + layerConfig += layers[i].layerCode; + } + } + return layerConfig; } function setMapLayers(layerConfig) { - if (layerConfig.charAt(0) == "B" || layerConfig.charAt(0) == "0") { - var l = 0; - - for (var layers = map.getLayersBy("isBaseLayer", true), i = 0; i < layers.length; i++) { - var c = layerConfig.charAt(l++); - - if (c == "B") { - map.setBaseLayer(layers[i]); - } else { - map.layers[i].setVisibility(false); - } - } - } else { - for (var i = 0; i < map.layers.length; i++) { - if (map.layers[i].layerCode) { - if (layerConfig.indexOf(map.layers[i].layerCode) >= 0) { - if (map.layers[i].isBaseLayer) { - map.setBaseLayer(map.layers[i]); - } else { - map.layers[i].setVisibility(true); - } - } else if (!map.layers[i].isBaseLayer) { - map.layers[i].setVisibility(false); - } - } - } - } + var foundLayer = false; + for (var i = 0; i < layers.length; i++) { + 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); + } }