",
- code: "Q",
- keyid: "mapquest",
- name: I18n.t("javascripts.map.base.mapquest")
- }),
- new L.OSM.HOT({
- attribution: copyright + ". Tiles courtesy of Humanitarian OpenStreetMap Team",
- code: "H",
- keyid: "hot",
- name: I18n.t("javascripts.map.base.hot")
- })
- ];
-
- function updateLayers(params) {
- var layerParam = params.layers || "M";
- var layersAdded = "";
-
- for (var i = layers.length - 1; i >= 0; i--) {
- if (layerParam.indexOf(layers[i].options.code) >= 0) {
- map.addLayer(layers[i]);
- layersAdded = layersAdded + layers[i].options.code;
- } else if (i == 0 && layersAdded == "") {
- map.addLayer(layers[i]);
- } else {
- map.removeLayer(layers[i]);
- }
- }
- }
-
- updateLayers(params);
-
- $(window).on("hashchange", function () {
- updateLayers(OSM.mapParams());
- });
+ map.updateLayers(params.layers);
map.on("baselayerchange", function (e) {
if (map.getZoom() > e.layer.options.maxZoom) {
@@ -85,16 +84,6 @@ $(document).ready(function () {
}
});
- map.noteLayer = new L.LayerGroup();
- map.noteLayer.options = {code: 'N'};
-
- map.dataLayer = new L.OSM.DataLayer(null);
- map.dataLayer.options.code = 'D';
-
- $("#sidebar").on("opened closed", function () {
- map.invalidateSize();
- });
-
var position = $('html').attr('dir') === 'rtl' ? 'topleft' : 'topright';
L.OSM.zoom({position: position})
@@ -113,7 +102,7 @@ $(document).ready(function () {
L.OSM.layers({
position: position,
- layers: layers,
+ layers: map.baseLayers,
sidebar: sidebar
}).addTo(map);
@@ -136,9 +125,31 @@ $(document).ready(function () {
L.control.scale()
.addTo(map);
+ if (OSM.STATUS != 'api_offline' && OSM.STATUS != 'database_offline') {
+ initializeNotes(map);
+ if (params.layers.indexOf(map.noteLayer.options.code) >= 0) {
+ map.addLayer(map.noteLayer);
+ }
+
+ initializeBrowse(map);
+ if (params.layers.indexOf(map.dataLayer.options.code) >= 0) {
+ map.addLayer(map.dataLayer);
+ }
+ }
+
$('.leaflet-control .control-button').tooltip({placement: 'left', container: 'body'});
- map.on('moveend layeradd layerremove', updateLocation);
+ map.on('moveend layeradd layerremove', function() {
+ updatelinks(
+ map.getCenter().wrap(),
+ map.getZoom(),
+ map.getLayersCode(),
+ map._object);
+
+ var expiry = new Date();
+ expiry.setYear(expiry.getFullYear() + 10);
+ $.cookie("_osm_location", cookieContent(map), { expires: expiry });
+ });
if (OSM.PIWIK) {
map.on('layeradd', function (e) {
@@ -152,32 +163,18 @@ $(document).ready(function () {
});
}
- var marker = L.marker([0, 0], {icon: getUserIcon()});
-
- if (!params.object_zoom) {
- if (params.bounds) {
- map.fitBounds(params.bounds);
- } else {
- map.setView([params.lat, params.lon], params.zoom);
- }
+ if (params.bounds) {
+ map.fitBounds(params.bounds);
+ } else {
+ map.setView([params.lat, params.lon], params.zoom);
}
- if (params.box) {
- L.rectangle(params.box, {
- weight: 2,
- color: '#e90',
- fillOpacity: 0
- }).addTo(map);
- }
+ var marker = L.marker([0, 0], {icon: getUserIcon()});
if (params.marker) {
marker.setLatLng([params.mlat, params.mlon]).addTo(map);
}
- if (params.object) {
- map.addObject(params.object, { zoom: params.object_zoom });
- }
-
$("#homeanchor").on("click", function(e) {
e.preventDefault();
@@ -211,22 +208,91 @@ $(document).ready(function () {
});
}
- initializeSearch(map);
- initializeExport(map);
- initializeBrowse(map, params);
- initializeNotes(map, params);
-});
+ OSM.Index = function(map) {
+ var page = {};
+
+ page.pushstate = function() {
+ $("#content").addClass("overlay-sidebar");
+ map.invalidateSize({pan: false})
+ .panBy([-350, 0], {animate: false});
+ };
+
+ page.load = function() {
+ return map.getState();
+ };
+
+ page.popstate = function() {
+ $("#content").addClass("overlay-sidebar");
+ map.invalidateSize({pan: false});
+ };
+
+ page.unload = function() {
+ map.panBy([350, 0], {animate: false});
+ $("#content").removeClass("overlay-sidebar");
+ map.invalidateSize({pan: false});
+ };
+
+ return page;
+ };
+
+ OSM.Browse = function(map) {
+ var page = {};
+
+ page.pushstate = page.popstate = function(path, type, id) {
+ OSM.loadSidebarContent(path, function() {
+ page.load(path, type, id);
+ });
+ };
+
+ page.load = function(path, type, id) {
+ map.addObject({type: type, id: parseInt(id)});
+ };
+
+ page.unload = function() {
+ map.removeObject();
+ };
+
+ return page;
+ };
+
+ var history = OSM.History(map);
+
+ OSM.router = OSM.Router(map, {
+ "/": OSM.Index(map),
+ "/search": OSM.Search(map),
+ "/export": OSM.Export(map),
+ "/note/new": OSM.NewNote(map),
+ "/history/friends": history,
+ "/history/nearby": history,
+ "/history": history,
+ "/user/:display_name/history": history,
+ "/note/:id": OSM.Note(map),
+ "/:type/:id(/history)": OSM.Browse(map)
+ });
-function updateLocation() {
- updatelinks(this.getCenter().wrap(),
- this.getZoom(),
- this.getLayersCode(),
- this.getBounds().wrap());
+ OSM.router.load();
- var expiry = new Date();
- expiry.setYear(expiry.getFullYear() + 10);
- $.cookie("_osm_location", cookieContent(this), { expires: expiry });
+ $(document).on("click", "a", function(e) {
+ if (e.isDefaultPrevented() || e.isPropagationStopped()) return;
+ if (this.host === window.location.host && OSM.router.route(this.pathname + this.search + this.hash)) e.preventDefault();
+ });
- // Trigger hash update on layer changes.
- this.hash.onMapMove();
-}
+ $(".search_form").on("submit", function(e) {
+ e.preventDefault();
+ $("header").addClass("closed");
+ var query = $(this).find("input[name=query]").val();
+ if (query) {
+ OSM.router.route("/search?query=" + encodeURIComponent(query) + OSM.formatHash(map));
+ } else {
+ OSM.router.route("/" + OSM.formatHash(map));
+ }
+ });
+
+ $(".describe_location").on("click", function(e) {
+ e.preventDefault();
+ var precision = zoomPrecision(map.getZoom());
+ OSM.router.route("/search?query=" + encodeURIComponent(
+ map.getCenter().lat.toFixed(precision) + "," +
+ map.getCenter().lng.toFixed(precision)));
+ });
+});
diff --git a/app/assets/javascripts/index/browse.js b/app/assets/javascripts/index/browse.js
index d8de69974f..21f0ae71a3 100644
--- a/app/assets/javascripts/index/browse.js
+++ b/app/assets/javascripts/index/browse.js
@@ -1,15 +1,6 @@
-//= require templates/browse/feature
-//= require templates/browse/feature_list
-//= require templates/browse/feature_history
-
-function initializeBrowse(map, params) {
+function initializeBrowse(map) {
var browseBounds;
- var layersById;
var selectedLayer;
- var browseObjectList;
- var areasHidden = false;
- var locationFilter;
-
var dataLayer = map.dataLayer;
dataLayer.setStyle({
@@ -28,7 +19,7 @@ function initializeBrowse(map, params) {
});
dataLayer.isWayArea = function () {
- return !areasHidden && L.OSM.DataLayer.prototype.isWayArea.apply(this, arguments);
+ return false;
};
dataLayer.on("click", function (e) {
@@ -37,128 +28,48 @@ function initializeBrowse(map, params) {
map.on('layeradd', function (e) {
if (e.layer === dataLayer) {
- $.ajax({ url: "/browse/start", success: function (sidebarHtml) {
- startBrowse(sidebarHtml);
- }});
+ map.on("moveend", updateData);
+ updateData();
}
});
map.on('layerremove', function (e) {
if (e.layer === dataLayer) {
- closeSidebar();
+ map.off("moveend", updateData);
+ $('#browse_status').empty();
}
});
- if (OSM.STATUS != 'api_offline' && OSM.STATUS != 'database_offline') {
- if (params.layers.indexOf(dataLayer.options.code) >= 0) {
- map.addLayer(dataLayer);
- }
- }
-
- function startBrowse(sidebarHtml) {
- locationFilter = new L.LocationFilter({
- enableButton: false,
- adjustButton: false
- }).addTo(map);
-
- locationFilter.on("change", getData);
-
- $("#sidebar_title").html(I18n.t('browse.start_rjs.data_frame_title'));
- $("#sidebar_content").html(sidebarHtml);
-
- openSidebar();
-
- if (browseObjectList) loadObjectList();
-
- map.on("moveend", updateData);
- updateData();
-
- $("#browse_filter_toggle").click(toggleFilter);
-
- $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.hide_areas'));
- $("#browse_hide_areas_box").click(toggleAreas);
-
- $("#sidebar").one("closed", function () {
- map.removeLayer(dataLayer);
- map.removeLayer(locationFilter);
- map.off("moveend", updateData);
- locationFilter.off("change", getData);
- });
- }
-
function updateData() {
- if (!locationFilter.isEnabled()) {
- if (map.getZoom() >= 15) {
- var bounds = map.getBounds();
- if (!browseBounds || !browseBounds.contains(bounds)) {
- browseBounds = bounds;
- getData();
- }
- } else {
- setStatus(I18n.t('browse.start_rjs.zoom_or_select'));
- }
- }
- }
-
- function toggleFilter() {
- if (locationFilter.isEnabled()) {
- $("#browse_filter_toggle").html(I18n.t('browse.start_rjs.manually_select'));
- locationFilter.disable();
- } else {
- $("#browse_filter_toggle").html(I18n.t('browse.start_rjs.view_data'));
- locationFilter.setBounds(map.getBounds().pad(-0.2));
- locationFilter.enable();
- }
-
- getData();
- }
-
- function toggleAreas(e) {
- e.preventDefault();
-
- if (areasHidden) {
- $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.hide_areas'));
- areasHidden = false;
- } else {
- $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.show_areas'));
- areasHidden = true;
+ var bounds = map.getBounds();
+ if (!browseBounds || !browseBounds.contains(bounds)) {
+ getData();
}
-
- getData();
}
function displayFeatureWarning(count, limit, callback) {
- clearStatus();
-
- var div = document.createElement("div");
-
- var p = document.createElement("p");
- p.appendChild(document.createTextNode(I18n.t("browse.start_rjs.loaded_an_area_with_num_features", { num_features: count, max_features: limit })));
- div.appendChild(p);
-
- var input = document.createElement("input");
- input.type = "submit";
- input.value = I18n.t('browse.start_rjs.load_data');
- input.onclick = callback;
- div.appendChild(input);
-
- $("#browse_content").html("");
- $("#browse_content").append(div);
+ $('#browse_status').html(
+ $("")
+ .text(I18n.t("browse.start_rjs.loaded_an_area_with_num_features", { num_features: count, max_features: limit }))
+ .append(
+ $("")
+ .val(I18n.t('browse.start_rjs.load_data'))
+ .click(callback)));
}
var dataLoader;
function getData() {
- var bounds = locationFilter.isEnabled() ? locationFilter.getBounds() : map.getBounds();
+ var bounds = map.getBounds();
var size = bounds.getSize();
if (size > OSM.MAX_REQUEST_AREA) {
- setStatus(I18n.t("browse.start_rjs.unable_to_load_size", { max_bbox_size: OSM.MAX_REQUEST_AREA, bbox_size: size }));
+ $('#browse_status').html(
+ $("")
+ .text(I18n.t("browse.start_rjs.unable_to_load_size", { max_bbox_size: OSM.MAX_REQUEST_AREA, bbox_size: size.toFixed(2) })));
return;
}
- setStatus(I18n.t('browse.start_rjs.loading'));
-
var url = "/api/" + OSM.API_VERSION + "/map?bbox=" + bounds.toBBoxString();
/*
@@ -181,35 +92,14 @@ function initializeBrowse(map, params) {
dataLoader = $.ajax({
url: url,
success: function (xml) {
- clearStatus();
-
- $("#browse_content").empty();
dataLayer.clearLayers();
selectedLayer = null;
var features = dataLayer.buildFeatures(xml);
function addFeatures() {
+ $('#browse_status').empty();
dataLayer.addData(features);
-
- layersById = {};
-
- dataLayer.eachLayer(function (layer) {
- var feature = layer.feature;
- layersById[feature.id] = layer;
- $.extend(feature, {
- typeName: featureTypeName(feature),
- url: "/browse/" + feature.type + "/" + feature.id,
- name: featureName(feature)
- });
- });
-
- browseObjectList = $(JST["templates/browse/feature_list"]({
- features: features,
- url: url
- }))[0];
-
- loadObjectList();
}
if (features.length < maxFeatures) {
@@ -219,29 +109,11 @@ function initializeBrowse(map, params) {
}
dataLoader = null;
+ browseBounds = bounds;
}
});
}
- function viewFeatureLink() {
- var layer = layersById[$(this).data("feature-id")];
-
- onSelect(layer);
-
- if (locationFilter.isEnabled()) {
- map.panTo(layer.getBounds().getCenter());
- }
-
- return false;
- }
-
- function loadObjectList() {
- $("#browse_content").html(browseObjectList);
- $("#browse_content").find("a[data-feature-id]").click(viewFeatureLink);
-
- return false;
- }
-
function onSelect(layer) {
// Unselect previously selected feature
if (selectedLayer) {
@@ -252,91 +124,9 @@ function initializeBrowse(map, params) {
layer.originalStyle = layer.options;
layer.setStyle({color: '#0000ff', weight: 8});
- // If the current object is the list, don't innerHTML="", since that could clear it.
- if ($("#browse_content").firstChild == browseObjectList) {
- $("#browse_content").removeChild(browseObjectList);
- } else {
- $("#browse_content").empty();
- }
-
- var feature = layer.feature;
-
- $("#browse_content").html(JST["templates/browse/feature"]({
- name: featureNameSelect(feature),
- url: "/browse/" + feature.type + "/" + feature.id,
- attributes: feature.tags
- }));
-
- $("#browse_content").find("a.browse_show_list").click(loadObjectList);
- $("#browse_content").find("a.browse_show_history").click(loadHistory);
+ OSM.router.route('/' + layer.feature.type + '/' + layer.feature.id);
// Stash the currently drawn feature
selectedLayer = layer;
}
-
- function loadHistory() {
- $(this).attr("href", "").text(I18n.t('browse.start_rjs.wait'));
-
- var feature = selectedLayer.feature;
-
- $.ajax({
- url: "/api/" + OSM.API_VERSION + "/" + feature.type + "/" + feature.id + "/history",
- success: function (xml) {
- if (selectedLayer.feature != feature || $("#browse_content").firstChild == browseObjectList) {
- return;
- }
-
- $(this).remove();
-
- var history = [];
- var nodes = xml.getElementsByTagName(feature.type);
- for (var i = nodes.length - 1; i >= 0; i--) {
- history.push({
- user: nodes[i].getAttribute("user") || I18n.t('browse.start_rjs.private_user'),
- timestamp: nodes[i].getAttribute("timestamp")
- });
- }
-
- $("#browse_content").append(JST["templates/browse/feature_history"]({
- name: featureNameHistory(feature),
- url: "/browse/" + feature.type + "/" + feature.id,
- history: history
- }));
- }.bind(this)
- });
-
- return false;
- }
-
- function featureTypeName(feature) {
- return I18n.t('browse.start_rjs.object_list.type.' + feature.type);
- }
-
- function featureName(feature) {
- return feature.tags['name:' + $('html').attr('lang')] ||
- feature.tags.name ||
- feature.id;
- }
-
- function featureNameSelect(feature) {
- return feature.tags['name:' + $('html').attr('lang')] ||
- feature.tags.name ||
- I18n.t("browse.start_rjs.object_list.selected.type." + feature.type, { id: feature.id });
- }
-
- function featureNameHistory(feature) {
- return feature.tags['name:' + $('html').attr('lang')] ||
- feature.tags.name ||
- I18n.t("browse.start_rjs.object_list.history.type." + feature.type, { id: feature.id });
- }
-
- function setStatus(status) {
- $("#browse_status").html(status);
- $("#browse_status").show();
- }
-
- function clearStatus() {
- $("#browse_status").html("");
- $("#browse_status").hide();
- }
}
diff --git a/app/assets/javascripts/index/export.js b/app/assets/javascripts/index/export.js
index aec35ed2b1..053f5169fa 100644
--- a/app/assets/javascripts/index/export.js
+++ b/app/assets/javascripts/index/export.js
@@ -1,73 +1,78 @@
-function initializeExport(map) {
- if (window.location.pathname == "/export") {
- startExport();
+OSM.Export = function(map) {
+ var page = {};
+
+ var locationFilter = new L.LocationFilter({
+ enableButton: false,
+ adjustButton: false
+ }).on("change", update);
+
+ function getBounds() {
+ return L.latLngBounds(
+ L.latLng($("#minlat").val(), $("#minlon").val()),
+ L.latLng($("#maxlat").val(), $("#maxlon").val()));
}
- function startExport() {
- var locationFilter = new L.LocationFilter({
- enableButton: false,
- adjustButton: false
- }).addTo(map);
-
- locationFilter.on("change", update);
-
- map.on("moveend", update);
-
- $("#sidebar_title").html(I18n.t('export.start_rjs.export'));
-
- $("#maxlat,#minlon,#maxlon,#minlat").change(boundsChanged);
+ function boundsChanged() {
+ var bounds = getBounds();
+ map.fitBounds(bounds);
+ locationFilter.setBounds(bounds);
+ locationFilter.enable();
+ validateControls();
+ }
- $("#drag_box").click(enableFilter);
+ function enableFilter(e) {
+ e.preventDefault();
- openSidebar();
+ $("#drag_box").hide();
- setBounds(map.getBounds());
+ locationFilter.setBounds(map.getBounds().pad(-0.2));
+ locationFilter.enable();
+ validateControls();
+ }
- $("#sidebar").one("closed", function () {
- map.removeLayer(locationFilter);
- map.off("moveend", update);
- locationFilter.off("change", update);
- });
+ function update() {
+ setBounds(locationFilter.isEnabled() ? locationFilter.getBounds() : map.getBounds());
+ validateControls();
+ }
- function getBounds() {
- return L.latLngBounds(L.latLng($("#minlat").val(), $("#minlon").val()),
- L.latLng($("#maxlat").val(), $("#maxlon").val()));
- }
+ function setBounds(bounds) {
+ var precision = zoomPrecision(map.getZoom());
+ $("#minlon").val(bounds.getWest().toFixed(precision));
+ $("#minlat").val(bounds.getSouth().toFixed(precision));
+ $("#maxlon").val(bounds.getEast().toFixed(precision));
+ $("#maxlat").val(bounds.getNorth().toFixed(precision));
+ }
- function boundsChanged() {
- var bounds = getBounds();
+ function validateControls() {
+ $("#export_osm_too_large").toggle(getBounds().getSize() > OSM.MAX_REQUEST_AREA);
+ $("#export_commit").toggle(getBounds().getSize() < OSM.MAX_REQUEST_AREA);
+ }
- map.fitBounds(bounds);
- locationFilter.setBounds(bounds);
+ page.pushstate = page.popstate = function(path) {
+ $("#export_tab").addClass("current");
+ OSM.loadSidebarContent(path, page.load);
+ };
- enableFilter();
- validateControls();
- }
+ page.load = function() {
+ map
+ .addLayer(locationFilter)
+ .on("moveend", update);
- function enableFilter() {
- if (!locationFilter.getBounds().isValid()) {
- locationFilter.setBounds(map.getBounds().pad(-0.2));
- }
+ $("#maxlat, #minlon, #maxlon, #minlat").change(boundsChanged);
+ $("#drag_box").click(enableFilter);
+ $("#sidebar_content .close").on("click", page.minimizeSidebar);
- $("#drag_box").hide();
- locationFilter.enable();
- }
+ update();
+ return map.getState();
+ };
- function update() {
- setBounds(locationFilter.isEnabled() ? locationFilter.getBounds() : map.getBounds());
- validateControls();
- }
+ page.unload = function() {
+ map
+ .removeLayer(locationFilter)
+ .off("moveend", update);
- function setBounds(bounds) {
- var precision = zoomPrecision(map.getZoom());
- $("#minlon").val(bounds.getWest().toFixed(precision));
- $("#minlat").val(bounds.getSouth().toFixed(precision));
- $("#maxlon").val(bounds.getEast().toFixed(precision));
- $("#maxlat").val(bounds.getNorth().toFixed(precision));
- }
+ $("#export_tab").removeClass("current");
+ };
- function validateControls() {
- $("#export_osm_too_large").toggle(getBounds().getSize() > OSM.MAX_REQUEST_AREA);
- }
- }
-}
+ return page;
+};
diff --git a/app/assets/javascripts/index/history.js b/app/assets/javascripts/index/history.js
new file mode 100644
index 0000000000..639705f91c
--- /dev/null
+++ b/app/assets/javascripts/index/history.js
@@ -0,0 +1,137 @@
+OSM.History = function(map) {
+ var page = {};
+
+ $("#sidebar_content")
+ .on("click", ".changeset_more a", loadMore)
+ .on("mouseover", "[data-changeset]", function () {
+ highlightChangeset($(this).data("changeset").id);
+ })
+ .on("mouseout", "[data-changeset]", function () {
+ unHighlightChangeset($(this).data("changeset").id);
+ })
+ .on("click", "[data-changeset]", function () {
+ clickChangeset($(this).data("changeset").id);
+ });
+
+ var group = L.featureGroup()
+ .on("mouseover", function (e) {
+ highlightChangeset(e.layer.id);
+ })
+ .on("mouseout", function (e) {
+ unHighlightChangeset(e.layer.id);
+ })
+ .on("click", function (e) {
+ clickChangeset(e.layer.id);
+ });
+
+ group.getLayerId = function(layer) {
+ return layer.id;
+ };
+
+ function highlightChangeset(id) {
+ group.getLayer(id).setStyle({fillOpacity: 0.3});
+ $("#changeset_" + id).addClass("selected");
+ }
+
+ function unHighlightChangeset(id) {
+ group.getLayer(id).setStyle({fillOpacity: 0});
+ $("#changeset_" + id).removeClass("selected");
+ }
+
+ function clickChangeset(id) {
+ OSM.router.route($("#changeset_" + id).find(".changeset_id").attr("href"));
+ }
+
+ function loadData() {
+ var data = {};
+
+ if (window.location.pathname === '/history') {
+ data = {bbox: map.getBounds().wrap().toBBoxString()};
+ }
+
+ $.ajax({
+ url: window.location.pathname,
+ method: "GET",
+ data: data,
+ success: function(html, status, xhr) {
+ $('#sidebar_content .changesets').html(html);
+ updateMap();
+ }
+ });
+ }
+
+ function loadMore(e) {
+ e.preventDefault();
+ e.stopPropagation();
+
+ var div = $(this).parents(".changeset_more");
+
+ $(this).hide();
+ div.find(".loader").show();
+
+ $.get($(this).attr("href"), function(data) {
+ div.replaceWith(data);
+ updateMap();
+ });
+ }
+
+ function updateMap() {
+ group.clearLayers();
+
+ var changesets = [];
+
+ $("[data-changeset]").each(function () {
+ var changeset = $(this).data('changeset');
+ if (changeset.bbox) {
+ changeset.bounds = L.latLngBounds(
+ [changeset.bbox.minlat, changeset.bbox.minlon],
+ [changeset.bbox.maxlat, changeset.bbox.maxlon]);
+ changesets.push(changeset);
+ }
+ });
+
+ changesets.sort(function (a, b) {
+ return b.bounds.getSize() - a.bounds.getSize();
+ });
+
+ for (var i = 0; i < changesets.length; ++i) {
+ var changeset = changesets[i],
+ rect = L.rectangle(changeset.bounds,
+ {weight: 2, color: "#FF9500", opacity: 1, fillColor: "#FFFFBF", fillOpacity: 0});
+ rect.id = changeset.id;
+ rect.addTo(group);
+ }
+
+ if (window.location.pathname !== '/history') {
+ var bounds = group.getBounds();
+ if (bounds.isValid()) map.fitBounds(bounds);
+ }
+ }
+
+ page.pushstate = page.popstate = function(path) {
+ $("#history_tab").addClass("current");
+ OSM.loadSidebarContent(path, page.load);
+ };
+
+ page.load = function() {
+ map.addLayer(group);
+
+ if (window.location.pathname === '/history') {
+ map.on("moveend", loadData)
+ }
+
+ loadData();
+ };
+
+ page.unload = function() {
+ map.removeLayer(group);
+
+ if (window.location.pathname === '/history') {
+ map.off("moveend", loadData)
+ }
+
+ $("#history_tab").removeClass("current");
+ };
+
+ return page;
+};
diff --git a/app/assets/javascripts/index/new_note.js.erb b/app/assets/javascripts/index/new_note.js.erb
new file mode 100644
index 0000000000..6f734a35b1
--- /dev/null
+++ b/app/assets/javascripts/index/new_note.js.erb
@@ -0,0 +1,163 @@
+OSM.NewNote = function(map) {
+ var noteLayer = map.noteLayer,
+ content = $('#sidebar_content'),
+ page = {},
+ addNoteButton = $(".control-note .control-button"),
+ newNote,
+ halo;
+
+ var noteIcons = {
+ "new": L.icon({
+ iconUrl: "<%= image_path 'new_note_marker.png' %>",
+ iconSize: [25, 40],
+ iconAnchor: [12, 40]
+ }),
+ "open": L.icon({
+ iconUrl: "<%= image_path 'open_note_marker.png' %>",
+ iconSize: [25, 40],
+ iconAnchor: [12, 40]
+ }),
+ "closed": L.icon({
+ iconUrl: "<%= image_path 'closed_note_marker.png' %>",
+ iconSize: [25, 40],
+ iconAnchor: [12, 40]
+ })
+ };
+
+ addNoteButton.on("click", function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+
+ if ($(this).hasClass('disabled')) return;
+
+ OSM.router.route('/note/new');
+ });
+
+ function createNote(marker, form, url) {
+ var location = marker.getLatLng().wrap();
+
+ marker.options.draggable = false;
+ marker.dragging.disable();
+
+ $(form).find("input[type=submit]").prop("disabled", true);
+
+ $.ajax({
+ url: url,
+ type: "POST",
+ oauth: true,
+ data: {
+ lat: location.lat,
+ lon: location.lng,
+ text: $(form.text).val()
+ },
+ success: function (feature) {
+ noteCreated(feature, marker);
+ }
+ });
+
+ function noteCreated(feature, marker) {
+ content.find("textarea").val("");
+ updateMarker(feature);
+ newNote = null;
+ noteLayer.removeLayer(marker);
+ addNoteButton.removeClass("active");
+ OSM.route('/note/' + feature.properties.id);
+ }
+ }
+
+ function updateMarker(feature) {
+ var marker = L.marker(feature.geometry.coordinates.reverse(), {
+ icon: noteIcons[feature.properties.status],
+ opacity: 0.9,
+ clickable: true
+ });
+ marker.id = feature.properties.id;
+ marker.addTo(noteLayer);
+ return marker;
+ }
+
+ page.pushstate = page.popstate = function (path) {
+ OSM.loadSidebarContent(path, page.load);
+ };
+
+ function newHalo(loc, a) {
+ if (a == 'dragstart' && map.hasLayer(halo)) {
+ map.removeLayer(halo);
+ } else {
+ if (map.hasLayer(halo)) map.removeLayer(halo);
+
+ halo = L.circleMarker(loc, {
+ weight: 2.5,
+ radius: 20,
+ fillOpacity: 0.5,
+ color: "#FF6200"
+ });
+
+ map.addLayer(halo);
+ }
+ }
+
+ page.load = function () {
+ if (addNoteButton.hasClass("disabled")) return;
+ if (addNoteButton.hasClass("active")) return;
+
+ addNoteButton.addClass("active");
+
+ map.addLayer(noteLayer);
+
+ var mapSize = map.getSize();
+ var markerPosition;
+
+ if (mapSize.y > 800) {
+ markerPosition = [mapSize.x / 2, mapSize.y / 2];
+ } else if (mapSize.y > 400) {
+ markerPosition = [mapSize.x / 2, 400];
+ } else {
+ markerPosition = [mapSize.x / 2, mapSize.y];
+ }
+
+ newNote = L.marker(map.containerPointToLatLng(markerPosition), {
+ icon: noteIcons["new"],
+ opacity: 0.9,
+ draggable: true
+ });
+
+ newNote.on("dragstart dragend", function(a) {
+ newHalo(newNote.getLatLng(), a.type);
+ });
+
+ newNote.addTo(noteLayer);
+ newHalo(newNote.getLatLng());
+
+ newNote.on("remove", function () {
+ addNoteButton.removeClass("active");
+ }).on("dragstart",function () {
+ $(newNote).stopTime("removenote");
+ }).on("dragend", function () {
+ content.find("textarea").focus();
+ });
+
+ content.find("textarea")
+ .on("input", disableWhenBlank)
+ .focus();
+
+ function disableWhenBlank(e) {
+ $(e.target.form.add).prop("disabled", $(e.target).val() === "");
+ }
+
+ content.find('input[type=submit]').on('click', function (e) {
+ e.preventDefault();
+ createNote(newNote, e.target.form, '/api/0.6/notes.json');
+ });
+
+ return map.getState();
+ };
+
+ page.unload = function () {
+ noteLayer.removeLayer(newNote);
+ map.removeLayer(halo);
+ addNoteButton.removeClass("active");
+ };
+
+ return page;
+};
diff --git a/app/assets/javascripts/index/note.js.erb b/app/assets/javascripts/index/note.js.erb
new file mode 100644
index 0000000000..aa746265cb
--- /dev/null
+++ b/app/assets/javascripts/index/note.js.erb
@@ -0,0 +1,98 @@
+OSM.Note = function (map) {
+ var noteLayer = map.noteLayer,
+ content = $('#sidebar_content'),
+ page = {},
+ halo, currentNote;
+
+ var noteIcons = {
+ "new": L.icon({
+ iconUrl: "<%= image_path('new_note_marker.png') %>",
+ iconSize: [25, 40],
+ iconAnchor: [12, 40]
+ }),
+ "open": L.icon({
+ iconUrl: "<%= image_path('open_note_marker.png') %>",
+ iconSize: [25, 40],
+ iconAnchor: [12, 40]
+ }),
+ "closed": L.icon({
+ iconUrl: "<%= image_path('closed_note_marker.png') %>",
+ iconSize: [25, 40],
+ iconAnchor: [12, 40]
+ })
+ };
+
+ function updateNote(form, method, url) {
+ $(form).find("input[type=submit]").prop("disabled", true);
+
+ $.ajax({
+ url: url,
+ type: method,
+ oauth: true,
+ data: {text: $(form.text).val()},
+ success: function () {
+ OSM.loadSidebarContent(window.location.pathname, page.load);
+ }
+ });
+ }
+
+ page.pushstate = page.popstate = function (path) {
+ OSM.loadSidebarContent(path, page.load);
+ };
+
+ page.load = function () {
+ content.find("input[type=submit]").on("click", function (e) {
+ e.preventDefault();
+ var data = $(e.target).data();
+ updateNote(e.target.form, data.method, data.url);
+ });
+
+ content.find("textarea").on("input", function (e) {
+ var form = e.target.form;
+
+ if ($(e.target).val() == "") {
+ $(form.close).val(I18n.t("javascripts.notes.show.resolve"));
+ $(form.comment).prop("disabled", true);
+ } else {
+ $(form.close).val(I18n.t("javascripts.notes.show.comment_and_resolve"));
+ $(form.comment).prop("disabled", false);
+ }
+ });
+
+ content.find("textarea").val('').trigger("input");
+
+ var data = $('.details').data(),
+ latLng = data.coordinates.split(',');
+
+ if (!window.location.hash) {
+ OSM.router.moveListenerOff();
+ map.once('moveend', OSM.router.moveListenerOn);
+ map.getZoom() > 15 ? map.panTo(latLng) : map.setView(latLng, 16);
+ }
+
+ if (!map.hasLayer(halo)) {
+ halo = L.circleMarker(latLng, {
+ weight: 2.5,
+ radius: 20,
+ fillOpacity: 0.5,
+ color: "#FF6200"
+ });
+ map.addLayer(halo);
+ }
+
+ if (map.hasLayer(currentNote)) map.removeLayer(currentNote);
+ currentNote = L.marker(latLng, {
+ icon: noteIcons[data.status],
+ opacity: 1,
+ clickable: true
+ });
+ map.addLayer(currentNote);
+ };
+
+ page.unload = function () {
+ if (map.hasLayer(halo)) map.removeLayer(halo);
+ if (map.hasLayer(currentNote)) map.removeLayer(currentNote);
+ };
+
+ return page;
+};
diff --git a/app/assets/javascripts/index/notes.js.erb b/app/assets/javascripts/index/notes.js.erb
index 8972d6bf9d..841ae1f7bd 100644
--- a/app/assets/javascripts/index/notes.js.erb
+++ b/app/assets/javascripts/index/notes.js.erb
@@ -1,10 +1,6 @@
-//= require templates/notes/show
-//= require templates/notes/new
-
-function initializeNotes(map, params) {
+function initializeNotes(map) {
var noteLayer = map.noteLayer,
- notes = {},
- newNote;
+ notes = {};
var noteIcons = {
"new": L.icon({
@@ -35,57 +31,31 @@ function initializeNotes(map, params) {
noteLayer.clearLayers();
notes = {};
}
- }).on("popupclose", function (e) {
- if (newNote && e.popup == newNote._popup) {
- $(newNote).oneTime(10, "removenote", function () {
- map.removeLayer(newNote);
- newNote = null;
- });
- }
- }).on("popupopen", function (e) {
- if (!('ontouchstart' in document.documentElement)) {
- $(e.popup._container).find(".comment").focus();
- }
});
- if (OSM.STATUS != 'api_offline' && OSM.STATUS != 'database_offline') {
- if (params.layers.indexOf(noteLayer.options.code) >= 0) {
- map.addLayer(noteLayer);
- }
-
- if (params.note) {
- $.ajax({
- url: "/api/" + OSM.API_VERSION + "/notes/" + params.note + ".json",
- success: function (feature) {
- var marker = updateMarker(notes[feature.properties.id], feature);
- notes[feature.properties.id] = marker;
- map.addLayer(noteLayer);
- marker.openPopup();
- }
- });
- }
- }
+ noteLayer.on('click', function(e) {
+ OSM.router.route('/note/' + e.layer.id);
+ });
function updateMarker(marker, feature) {
if (marker) {
marker.setIcon(noteIcons[feature.properties.status]);
- marker.setPopupContent(createPopupContent(
- marker, feature.properties,
- $(marker._popup._content).find("textarea").val()
- ));
} else {
marker = L.marker(feature.geometry.coordinates.reverse(), {
icon: noteIcons[feature.properties.status],
- opacity: 0.9
+ opacity: 0.8,
+ clickable: true
});
- marker.addTo(noteLayer).bindPopup(
- createPopupContent(marker, feature.properties),
- popupOptions()
- );
+ marker.id = feature.properties.id;
+ marker.addTo(noteLayer);
}
return marker;
}
+ noteLayer.getLayerId = function(marker) {
+ return marker.id;
+ };
+
var noteLoader;
function loadNotes() {
@@ -114,160 +84,11 @@ function initializeNotes(map, params) {
notes[feature.properties.id] = updateMarker(marker, feature);
}
- for (id in oldNotes) {
+ for (var id in oldNotes) {
noteLayer.removeLayer(oldNotes[id]);
}
noteLoader = null;
}
- };
-
- function popupOptions() {
- var mapSize = map.getSize();
-
- return {
- minWidth: 320,
- maxWidth: mapSize.y * 1 / 3,
- maxHeight: mapSize.y * 2 / 3,
- offset: new L.Point(0, -40),
- autoPanPadding: new L.Point(60, 40)
- };
- }
-
- function createPopupContent(marker, properties, comment) {
- var content = $(JST["templates/notes/show"]({ note: properties }));
-
- content.find("textarea").on("input", function (e) {
- var form = e.target.form;
-
- if ($(e.target).val() == "") {
- $(form.close).val(I18n.t("javascripts.notes.show.resolve"));
- $(form.comment).prop("disabled", true);
- } else {
- $(form.close).val(I18n.t("javascripts.notes.show.comment_and_resolve"));
- $(form.comment).prop("disabled", false);
- }
- });
-
- content.find("input[type=submit]").on("click", function (e) {
- e.preventDefault();
- var data = $(e.target).data();
- updateNote(marker, e.target.form, data.method, data.url);
- });
-
- if (comment) {
- content.find("textarea").val(comment).trigger("input");
- }
-
- return content[0];
- }
-
- var addNoteButton = $(".control-note .control-button");
-
- function createNote(marker, form, url) {
- var location = marker.getLatLng();
-
- marker.options.draggable = false;
- marker.dragging.disable();
-
- $(form).find("input[type=submit]").prop("disabled", true);
-
- $.ajax({
- url: url,
- type: "POST",
- oauth: true,
- data: {
- lat: location.lat,
- lon: location.lng,
- text: $(form.text).val()
- },
- success: noteCreated
- });
-
- function noteCreated(feature) {
- $(marker._popup._content).find("textarea").val("");
-
- notes[feature.properties.id] = updateMarker(marker, feature);
- newNote = null;
-
- addNoteButton.removeClass("active").addClass("geolink");
- }
}
-
- function updateNote(marker, form, method, url) {
- $(form).find("input[type=submit]").prop("disabled", true);
-
- $.ajax({
- url: url,
- type: method,
- oauth: true,
- data: {
- text: $(form.text).val()
- },
- success: function (feature) {
- if (feature.properties.status == "hidden") {
- noteLayer.removeLayer(marker);
-
- delete notes[feature.properties.id];
- } else {
- var popupContent = createPopupContent(marker, feature.properties);
-
- marker.setIcon(noteIcons[feature.properties.status]);
- marker.setPopupContent(popupContent);
- }
- }
- });
- }
-
- addNoteButton.on("click", function (e) {
- e.preventDefault();
- e.stopPropagation();
-
- if (addNoteButton.hasClass("disabled")) return;
- if (addNoteButton.hasClass("active")) return;
-
- addNoteButton.removeClass("geolink").addClass("active");
-
- map.addLayer(noteLayer);
-
- var mapSize = map.getSize();
- var markerPosition;
-
- if (mapSize.y > 800) {
- markerPosition = [mapSize.x / 2, mapSize.y / 2];
- } else if (mapSize.y > 400) {
- markerPosition = [mapSize.x / 2, 400];
- } else {
- markerPosition = [mapSize.x / 2, mapSize.y];
- }
-
- newNote = L.marker(map.containerPointToLatLng(markerPosition), {
- icon: noteIcons["new"],
- opacity: 0.9,
- draggable: true
- });
-
- var popupContent = $(JST["templates/notes/new"]());
-
- popupContent.find("textarea").on("input", disableWhenBlank);
-
- function disableWhenBlank(e) {
- $(e.target.form.add).prop("disabled", $(e.target).val() === "");
- }
-
- popupContent.find("input[type=submit]").on("click", function (e) {
- e.preventDefault();
- createNote(newNote, e.target.form, '/api/0.6/notes.json');
- });
-
- newNote.addTo(noteLayer).bindPopup(popupContent[0], popupOptions()).openPopup();
-
- newNote.on("remove", function (e) {
- addNoteButton.removeClass("active").addClass("geolink");
- }).on("dragstart", function (e) {
- $(newNote).stopTime("removenote");
- }).on("dragend", function (e) {
- e.target.openPopup();
- });
- });
}
diff --git a/app/assets/javascripts/index/search.js b/app/assets/javascripts/index/search.js
index dc4df821e8..c1c95a3e43 100644
--- a/app/assets/javascripts/index/search.js
+++ b/app/assets/javascripts/index/search.js
@@ -1,77 +1,79 @@
-function initializeSearch(map) {
- $("#search_form").submit(submitSearch);
- $("#describe_location").click(describeLocation);
-
- if ($("#query").val()) {
- $("#search_form").submit();
- }
-
- // Focus the search field for browsers that don't support
- // the HTML5 'autofocus' attribute
- if (!("autofocus" in document.createElement("input"))) {
- $("#query").focus();
- }
-
- $("#sidebar_content").on("click", ".search_results_entry a.set_position", clickSearchResult);
+OSM.Search = function(map) {
+ $(".search_form input[name=query]")
+ .on("focus", function() {
+ $(".describe_location").fadeOut(100);
+ })
+ .on("blur", function() {
+ $(".describe_location").fadeIn(100);
+ });
- var marker = L.marker([0, 0], {icon: getUserIcon()});
+ $("#sidebar_content")
+ .on("click", ".search_more a", clickSearchMore)
+ .on("click", ".search_results_entry a.set_position", clickSearchResult);
- function submitSearch(e) {
+ function clickSearchMore(e) {
e.preventDefault();
+ e.stopPropagation();
- var bounds = map.getBounds();
-
- $("#sidebar_title").html(I18n.t('site.sidebar.search_results'));
- $("#sidebar_content").load($(this).attr("action"), {
- query: $("#query").val(),
- zoom: map.getZoom(),
- minlon: bounds.getWest(),
- minlat: bounds.getSouth(),
- maxlon: bounds.getEast(),
- maxlat: bounds.getNorth()
- });
+ var div = $(this).parents(".search_more");
- openSidebar();
+ $(this).hide();
+ div.find(".loader").show();
- $("#sidebar").one("closed", function () {
- map.removeLayer(marker);
- map.removeObject();
+ $.get($(this).attr("href"), function(data) {
+ div.replaceWith(data);
});
}
function clickSearchResult(e) {
- e.preventDefault();
-
var data = $(this).data(),
center = L.latLng(data.lat, data.lon);
if (data.minLon && data.minLat && data.maxLon && data.maxLat) {
map.fitBounds([[data.minLat, data.minLon],
- [data.maxLat, data.maxLon]]);
+ [data.maxLat, data.maxLon]]);
} else {
map.setView(center, data.zoom);
}
+ }
- marker
- .setLatLng(center)
- .addTo(map);
+ var marker = L.marker([0, 0], {icon: getUserIcon()});
- if (data.type && data.id) {
- map.addObject(data, { zoom: false, style: { opacity: 0.2, fill: false } });
- }
- }
+ var page = {};
+
+ page.pushstate = page.popstate = function(path) {
+ var params = querystring.parse(path.substring(path.indexOf('?') + 1));
+ $(".search_form input[name=query]").val(params.query);
+ OSM.loadSidebarContent(path, page.load);
+ };
+
+ page.load = function() {
+ $(".search_results_entry").each(function() {
+ var entry = $(this);
+ $.ajax({
+ url: entry.data("href"),
+ method: 'GET',
+ data: {
+ zoom: map.getZoom(),
+ minlon: map.getBounds().getWest(),
+ minlat: map.getBounds().getSouth(),
+ maxlon: map.getBounds().getEast(),
+ maxlat: map.getBounds().getNorth()
+ },
+ success: function(html) {
+ entry.html(html);
+ }
+ });
+ });
- function describeLocation(e) {
- e.preventDefault();
+ return map.getState();
+ };
- var center = map.getCenter(),
- zoom = map.getZoom();
+ page.unload = function() {
+ map.removeLayer(marker);
+ map.removeObject();
+ $(".search_form input[name=query]").val("");
+ };
- $("#sidebar_title").html(I18n.t('site.sidebar.search_results'));
- $("#sidebar_content").load($(this).attr("href"), {
- lat: center.lat,
- lon: center.lng,
- zoom: zoom
- }, openSidebar);
- }
-}
+ return page;
+};
diff --git a/app/assets/javascripts/leaflet.key.js b/app/assets/javascripts/leaflet.key.js
index cc86736ef8..58bfbf6d2a 100644
--- a/app/assets/javascripts/leaflet.key.js
+++ b/app/assets/javascripts/leaflet.key.js
@@ -19,10 +19,9 @@ L.OSM.key = function (options) {
.attr('class', 'sidebar_heading')
.appendTo($ui)
.append(
- $('')
+ $('')
.text(I18n.t('javascripts.close'))
- .attr('class', 'sidebar_close')
- .attr('href', '#')
+ .attr('class', 'icon close')
.bind('click', toggle))
.append(
$('') .text(I18n.t('javascripts.map.layers.overlays')) + .attr("class", "deemphasize") .appendTo(overlaySection); var list = $('