-//= require templates/notes/show
-//= require templates/notes/new
-
-$(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 noteSelected(o) {
- var feature = o.feature;
- var location = feature.geometry.getBounds().getCenterLonLat();
- var content;
- var onClose;
-
- if (feature.attributes.status === "new") {
- content = JST["templates/notes/new"]();
-
- onClose = function (e) {
- feature.attributes.status = "cancelled";
-
- map.noteSelector.unselect(feature);
- map.noteLayer.removeFeatures(feature);
+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 = {};
+ }
+ });
- feature.destroy();
+ noteLayer.on('click', function(e) {
+ if (e.layer.id) {
+ OSM.router.route('/note/' + e.layer.id);
+ }
+ });
- map.noteMover.deactivate();
- };
+ function updateMarker(marker, feature) {
+ if (marker) {
+ marker.setIcon(noteIcons[feature.properties.status]);
} else {
- content = JST["templates/notes/show"]({ note: feature.attributes });
-
- onClose = function (e) {
- map.noteSelector.unselect(feature)
- };
- };
-
- feature.popup = new OpenLayers.Popup.FramedCloud(
- feature.attributes.id, location, null, content, null, true, onClose
- );
-
- map.addPopup(feature.popup);
- // feature.popup.show();
-
- $(feature.popup.contentDiv).find("textarea").autoGrow();
-
- $(feature.popup.contentDiv).find("input#note-add").click(function (e) {
- var location = unproj(feature.geometry.getBounds().getCenterLonLat());
- var form = e.target.form;
-
- e.preventDefault();
-
- $.ajax($("#createnoteanchor").attr("href"), {
- type: "POST",
- data: {
- lon: location.lon,
- lat: location.lat,
- text: $(form.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.updateSize();
+ marker.id = feature.properties.id;
+ marker.addTo(noteLayer);
+ }
+ return marker;
}
- function noteUnselected(o) {
- var feature = o.feature;
+ noteLayer.getLayerId = function(marker) {
+ return marker.id;
+ };
- map.removePopup(feature.popup);
- }
-
- 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"
- });
-
- 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;
+ }
+ }
+}
projects / rails.git / blobdiff