X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/e3d5e3da52ffdf10445f2d9cdcc8c67633f2dd82..18c7c4f5d7995a56bf76bf81b86ff607bd27ef21:/app/assets/javascripts/index/notes.js.erb
diff --git a/app/assets/javascripts/index/notes.js.erb b/app/assets/javascripts/index/notes.js.erb
index 674aa9204..841ae1f7b 100644
--- a/app/assets/javascripts/index/notes.js.erb
+++ b/app/assets/javascripts/index/notes.js.erb
@@ -1,214 +1,94 @@
-$(document).ready(function () {
- var params = OSM.mapParams();
- var newNotes;
-
- function saveNewNotes(o) {
- var layer = o.object;
- newNotes = layer.getFeaturesByAttribute("status", "new")
- layer.removeFeatures(newNotes, { silent: true });
- }
-
- function restoreNewNotes(o) {
- var layer = o.object;
- layer.addFeatures(newNotes);
- newNotes = undefined;
- }
-
- function describeNote(n) {
- var description = "Note " + n.id + "
";
-
- n.comments.forEach(function (c) {
- description += "" + c.action + " by ";
- description += c.user + " at " + c.date + "
" + c.text + "
";
- });
-
- return description;
- }
+function initializeNotes(map) {
+ var noteLayer = map.noteLayer,
+ notes = {};
+
+ 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]
+ })
+ };
+
+ map.on("layeradd", function (e) {
+ if (e.layer == noteLayer) {
+ loadNotes();
+ map.on("moveend", loadNotes);
+ }
+ }).on("layerremove", function (e) {
+ if (e.layer == noteLayer) {
+ map.off("moveend", loadNotes);
+ noteLayer.clearLayers();
+ notes = {};
+ }
+ });
- function noteSelected(o) {
- var feature = o.feature;
- var location = feature.geometry.getBounds().getCenterLonLat();
- var content;
- var close;
+ noteLayer.on('click', function(e) {
+ OSM.router.route('/note/' + e.layer.id);
+ });
- if (feature.attributes.status === "new") {
- var form = $("#new-note").clone();
- form.removeClass("hidden");
- content = form.html();
- close = false;
+ function updateMarker(marker, feature) {
+ if (marker) {
+ marker.setIcon(noteIcons[feature.properties.status]);
} else {
- content = describeNote(feature.attributes);
- close = true;
- };
-
- feature.popup = new OpenLayers.Popup.FramedCloud(
- feature.attributes.id, location, null, content, null, close,
- function (e) { map.noteSelector.unselect(feature) }
- );
-
- map.addPopup(feature.popup);
- // feature.popup.show();
-
- $(feature.popup.contentDiv).find("textarea").autoGrow();
-
- $(feature.popup.contentDiv).find("input#note-submit").click(function (e) {
- var location = unproj(feature.geometry.getBounds().getCenterLonLat());
- var form = $(e.target).parents("form").first();
-
- $.ajax(form.prop("action"), {
- type: form.prop("method"),
- data: {
- lon: location.lon,
- lat: location.lat,
- text: form.find("textarea#comment").val()
- },
- success: function (data) {
- map.noteSelector.unselect(feature);
-
- feature.attributes.status = "open";
- feature.attributes.id = data;
-
- map.noteLayer.drawFeature(feature);
-
- map.noteMover.deactivate();
- }
+ marker = L.marker(feature.geometry.coordinates.reverse(), {
+ icon: noteIcons[feature.properties.status],
+ opacity: 0.8,
+ clickable: true
});
-
- e.preventDefault();
- });
-
- $(feature.popup.contentDiv).find("input#note-cancel").click(function (e) {
- feature.attributes.status = "cancelled";
-
- map.noteSelector.unselect(feature);
- map.noteLayer.removeFeatures(feature);
-
- feature.destroy();
-
- map.noteMover.deactivate();
-
- e.preventDefault();
- });
-
- feature.popup.updateSize();
- }
-
- function noteUnselected(o) {
- var feature = o.feature;
-
- map.removePopup(feature.popup);
+ marker.id = feature.properties.id;
+ marker.addTo(noteLayer);
+ }
+ return marker;
}
- function addNote() {
- var lonlat = map.getCenter();
- var layer = map.noteLayer;
- var geometry = new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat);
- var feature = new OpenLayers.Feature.Vector(geometry, {
- status: "new"
- });
+ noteLayer.getLayerId = function(marker) {
+ return marker.id;
+ };
- layer.addFeatures(feature);
- map.noteSelector.unselectAll();
- map.noteSelector.select(feature);
- map.noteMover.activate();
- map.noteLayer.setVisibility(true);
- }
+ var noteLoader;
- $("#map").on("initialised", function () {
- map.noteLayer = new OpenLayers.Layer.Vector("Notes", {
- visibility: params.notes,
- displayInLayerSwitcher: false,
- projection: new OpenLayers.Projection("EPSG:4326"),
- styleMap: new OpenLayers.StyleMap(new OpenLayers.Style({
- graphicWidth: 22,
- graphicHeight: 22,
- graphicOpacity: 0.7,
- graphicXOffset: -11,
- graphicYOffset: -11
- }, {
- rules: [
- new OpenLayers.Rule({
- filter: new OpenLayers.Filter.Comparison({
- type: OpenLayers.Filter.Comparison.EQUAL_TO,
- property: "status",
- value: "new"
- }),
- symbolizer: {
- externalGraphic: "<%= image_path 'new_note_marker.png' %>"
- }
- }),
- new OpenLayers.Rule({
- filter: new OpenLayers.Filter.Comparison({
- type: OpenLayers.Filter.Comparison.EQUAL_TO,
- property: "status",
- value: "open"
- }),
- symbolizer: {
- externalGraphic: "<%= image_path 'open_note_marker.png' %>"
- }
- }),
- new OpenLayers.Rule({
- filter: new OpenLayers.Filter.Comparison({
- type: OpenLayers.Filter.Comparison.EQUAL_TO,
- property: "status",
- value: "closed"
- }),
- symbolizer: {
- externalGraphic: "<%= image_path 'closed_note_marker.png' %>"
- }
- })
- ]
- })),
- strategies: [
- new OpenLayers.Strategy.BBOX()
- ],
- protocol: new OpenLayers.Protocol.HTTP({
- url: $("#show_notes").attr("href"),
- format: new OpenLayers.Format.GeoJSON()
- })
- });
+ function loadNotes() {
+ var bounds = map.getBounds();
+ var size = bounds.getSize();
- map.noteLayer.events.register("beforefeaturesremoved", map, saveNewNotes);
- map.noteLayer.events.register("featuresremoved", map, restoreNewNotes);
- map.noteLayer.events.register("featureselected", map, noteSelected);
- map.noteLayer.events.register("featureunselected", map, noteUnselected);
+ if (size <= OSM.MAX_NOTE_REQUEST_AREA) {
+ var url = "/api/" + OSM.API_VERSION + "/notes.json?bbox=" + bounds.toBBoxString();
- map.addLayer(map.noteLayer);
+ if (noteLoader) noteLoader.abort();
- map.noteSelector = new OpenLayers.Control.SelectFeature(map.noteLayer, {
- autoActivate: true
- });
+ noteLoader = $.ajax({
+ url: url,
+ success: success
+ });
+ }
- map.addControl(map.noteSelector);
+ function success(json) {
+ var oldNotes = notes;
+ notes = {};
+ json.features.forEach(updateMarkers);
- map.noteMover = new OpenLayers.Control.DragFeature(map.noteLayer, {
- onDrag: function (feature, pixel) {
- feature.popup.lonlat = feature.geometry.getBounds().getCenterLonLat();
- feature.popup.updatePosition();
- },
- featureCallbacks: {
- over: function (feature) {
- if (feature.attributes.status === "new") {
- map.noteMover.overFeature.apply(map.noteMover, [feature]);
- }
- }
+ function updateMarkers(feature) {
+ var marker = oldNotes[feature.properties.id];
+ delete oldNotes[feature.properties.id];
+ notes[feature.properties.id] = updateMarker(marker, feature);
}
- });
-
- map.addControl(map.noteMover);
-
- $("#show_notes").click(function (e) {
- map.noteLayer.setVisibility(true);
-
- e.preventDefault();
- });
- $("#createnoteanchor").click(function (e) {
- map.noteLayer.setVisibility(true);
-
- addNote();
+ for (var id in oldNotes) {
+ noteLayer.removeLayer(oldNotes[id]);
+ }
- e.preventDefault();
- });
- });
-});
+ noteLoader = null;
+ }
+ }
+}