X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/52e5fa6ad78f375cec5a207a123a4aa3939c8ddf..4563244fd1cb43dca00b427e1f13ac890b7f00a0:/app/assets/javascripts/map.js.erb
diff --git a/app/assets/javascripts/map.js.erb b/app/assets/javascripts/map.js.erb
index acfa10822..a3fd53a68 100644
--- a/app/assets/javascripts/map.js.erb
+++ b/app/assets/javascripts/map.js.erb
@@ -1,282 +1,110 @@
-var epsg4326 = new OpenLayers.Projection("EPSG:4326");
-var map;
-var markers;
-var vectors;
-var popup;
-
-function createMap(divName, options) {
- options = options || {};
-
- map = new OpenLayers.Map(divName, {
- controls: options.controls || [
- new OpenLayers.Control.ArgParser(),
- new OpenLayers.Control.Attribution(),
- new OpenLayers.Control.LayerSwitcher(),
- new OpenLayers.Control.Navigation(),
- new OpenLayers.Control.PanZoom(),
- new OpenLayers.Control.PanZoomBar(),
- new OpenLayers.Control.ScaleLine({geodesic: true})
- ],
- units: "m",
- maxResolution: 156543.0339,
- numZoomLevels: 20,
- displayProjection: new OpenLayers.Projection("EPSG:4326"),
- theme: "<%= asset_path 'theme/default/style.css' %>"
- });
-
- var mapnik = new OpenLayers.Layer.OSM.Mapnik(i18n("javascripts.map.base.mapnik"), {
+// Leaflet extensions
+L.extend(L.LatLngBounds.prototype, {
+ 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.Icon.Default.imagePath = <%= "#{asset_prefix}/images".to_json %>;
+
+var objectLayer;
+var objectLoader;
+
+function mapLayers() {
+ return [
+ {
+ klass: L.OSM.Mapnik,
attribution: "",
keyid: "mapnik",
- displayOutsideMaxExtent: true,
- wrapDateLine: true,
- layerCode: "M"
- });
- map.addLayer(mapnik);
-
- var osmarender = new OpenLayers.Layer.OSM.Osmarender(i18n("javascripts.map.base.osmarender"), {
- attribution: "",
- keyid: "osmarender",
- displayOutsideMaxExtent: true,
- wrapDateLine: true,
- layerCode: "O"
- });
- map.addLayer(osmarender);
-
- var cyclemap = new OpenLayers.Layer.OSM.CycleMap(i18n("javascripts.map.base.cycle_map"), {
+ layerCode: "M",
+ name: I18n.t("javascripts.map.base.standard")
+ },
+ {
+ klass: L.OSM.CycleMap,
attribution: "Tiles courtesy of Andy Allan",
keyid: "cyclemap",
- displayOutsideMaxExtent: true,
- wrapDateLine: true,
- layerCode: "C"
- });
- map.addLayer(cyclemap);
-
- var transportmap = new OpenLayers.Layer.OSM.TransportMap(i18n("javascripts.map.base.transport_map"), {
+ layerCode: "C",
+ name: I18n.t("javascripts.map.base.cycle_map")
+ },
+ {
+ klass: L.OSM.TransportMap,
attribution: "Tiles courtesy of Andy Allan",
keyid: "transportmap",
- displayOutsideMaxExtent: true,
- wrapDateLine: true,
- layerCode: "T"
- });
- map.addLayer(transportmap);
-
- var mapquest = new OpenLayers.Layer.OSM(i18n("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"
- ], {
+ layerCode: "T",
+ name: I18n.t("javascripts.map.base.transport_map")
+ },
+ {
+ klass: L.OSM.MapQuestOpen,
attribution: "Tiles courtesy of MapQuest 
",
keyid: "mapquest",
- displayOutsideMaxExtent: true,
- wrapDateLine: true,
- numZoomLevels: 19,
- layerCode: "Q"
- });
- map.addLayer(mapquest);
-
- var numZoomLevels = Math.max(mapnik.numZoomLevels, osmarender.numZoomLevels);
-
- markers = new OpenLayers.Layer.Markers("Markers", {
- displayInLayerSwitcher: false,
- numZoomLevels: numZoomLevels,
- maxExtent: new OpenLayers.Bounds(-20037508,-20037508,20037508,20037508),
- maxResolution: 156543,
- units: "m",
- projection: "EPSG:900913"
- });
- map.addLayer(markers);
-
- return map;
-}
-
-function getArrowIcon() {
- var size = new OpenLayers.Size(25, 22);
- var offset = new OpenLayers.Pixel(-30, -27);
- var icon = new OpenLayers.Icon("<%= asset_path 'arrow.png' %>", size, offset);
-
- return icon;
-}
-
-function addMarkerToMap(position, icon, description) {
- var marker = new OpenLayers.Marker(position.clone().transform(epsg4326, map.getProjectionObject()), icon);
-
- markers.addMarker(marker);
-
- if (description) {
- marker.events.register("mouseover", marker, function() { openMapPopup(marker, description) });
- }
-
- return marker;
-}
-
-function addObjectToMap(url, zoom, callback) {
- var layer = new OpenLayers.Layer.GML("Objects", url, {
- format: OpenLayers.Format.OSM,
- 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();
- }
- }
+ layerCode: "Q",
+ name: I18n.t("javascripts.map.base.mapquest")
+ }
+ ]
+}
+
+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(object, map, options) {
+ 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, {
+ styles: {
+ node: options.style,
+ way: options.style,
+ area: options.style
+ }
+ });
+
+ 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 (options.zoom) {
+ map.fitBounds(bounds);
}
- if (callback) {
- callback(extent);
+ if (options.callback) {
+ options.callback(bounds);
}
- });
-
- map.addLayer(layer);
-
- layer.loadGML();
-}
-
-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 = new OpenLayers.Geometry.LineString(vertices).transform(epsg4326, map.getProjectionObject());
- } else {
- geometry = boxbounds.toGeometry().transform(epsg4326, map.getProjectionObject());
- }
- var box = new OpenLayers.Feature.Vector(geometry, {}, {
- strokeWidth: 2,
- strokeColor: '#ee9900',
- fillOpacity: 0
- });
- box.fid = id;
-
- vectors.addFeatures(box);
-
- return box;
-}
-
-function openMapPopup(marker, description) {
- closeMapPopup();
-
- popup = new OpenLayers.Popup.FramedCloud("popup", marker.lonlat, null,
- description, marker.icon, true);
- popup.setBackgroundColor("#E3FFC5");
- map.addPopup(popup);
-
- return popup;
-}
-
-function closeMapPopup() {
- if (popup) {
- map.removePopup(popup);
- delete popup;
- }
-}
-
-function removeMarkerFromMap(marker){
- markers.removeMarker(marker);
-}
-
-function removeBoxFromMap(box){
- vectors.removeFeature(box);
-}
-
-function getMapCenter() {
- return map.getCenter().clone().transform(map.getProjectionObject(), epsg4326);
-}
-
-function setMapCenter(center, zoom) {
- zoom = parseInt(zoom);
- var numzoom = map.getNumZoomLevels();
- if (zoom >= numzoom) zoom = numzoom - 1;
- map.setCenter(center.clone().transform(epsg4326, map.getProjectionObject()), zoom);
-}
-
-function setMapExtent(extent) {
- map.zoomToExtent(extent.clone().transform(epsg4326, map.getProjectionObject()));
-}
-
-function getMapExtent() {
- return map.getExtent().clone().transform(map.getProjectionObject(), epsg4326);
-}
-
-function getMapZoom() {
- return map.getZoom();
-}
-
-function getEventPosition(event) {
- return map.getLonLatFromViewPortPx(event.xy).clone().transform(map.getProjectionObject(), epsg4326);
-}
-
-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;
-}
-
-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);
- }
- }
- }
- }
-}
-function scaleToZoom(scale) {
- return Math.log(360.0/(scale * 512.0)) / Math.log(2.0);
+ objectLayer.addTo(map);
+ }
+ });
}