Treat notes as map objects

app/assets/javascripts/index/note.js

@@ -1,7 +1,6 @@
 OSM.Note = function (map) {
   var content = $("#sidebar_content"),
-      page = {},
-      halo, currentNote;
+      page = {};
 
   var noteIcons = {
     "new": L.icon({
@@ -70,28 +69,14 @@ OSM.Note = function (map) {
 
     content.find("textarea").val("").trigger("input");
 
-    var data = $(".details").data(),
-        latLng = L.latLng(data.coordinates.split(","));
+    var data = $(".details").data();
 
-    if (!halo || !map.hasLayer(halo)) {
-      halo = L.circleMarker(latLng, {
-        weight: 2.5,
-        radius: 20,
-        fillOpacity: 0.5,
-        color: "#FF6200"
+    map.addObject({
+      type: "note",
+      id: parseInt(id, 10),
+      latLng: L.latLng(data.coordinates.split(",")),
+      icon: noteIcons[data.status]
     });
-      map.addLayer(halo);
-    }
-
-    if (currentNote && map.hasLayer(currentNote)) map.removeLayer(currentNote);
-
-    currentNote = L.marker(latLng, {
-      icon: noteIcons[data.status],
-      opacity: 1,
-      interactive: true
-    });
-
-    map.addLayer(currentNote);
 
     if (callback) callback();
   }
@@ -108,8 +93,7 @@ OSM.Note = function (map) {
   }
 
   page.unload = function () {
-    if (map.hasLayer(halo)) map.removeLayer(halo);
-    if (map.hasLayer(currentNote)) map.removeLayer(currentNote);
+    map.removeObject();
   };
 
   return page;

app/assets/javascripts/leaflet.map.js

@@ -242,8 +242,29 @@ L.OSM.Map = L.Map.extend({
       interactive: false
     };
 
+    var haloStyle = {
+      weight: 2.5,
+      radius: 20,
+      fillOpacity: 0.5,
+      color: "#FF6200"
+    };
+
     this.removeObject();
 
+    if (object.type === "note") {
+      this._objectLoader = {
+        abort: function () {}
+      };
+      this._object = object;
+      this._objectLayer = L.featureGroup().addTo(this);
+      L.circleMarker(object.latLng, haloStyle).addTo(this._objectLayer);
+      L.marker(object.latLng, {
+        icon: object.icon,
+        opacity: 1,
+        interactive: true
+      }).addTo(this._objectLayer);
+      if (callback) callback(this._objectLayer.getBounds());
+    } else { // element or changeset handled by L.OSM.DataLayer
       var map = this;
       this._objectLoader = $.ajax({
         url: OSM.apiUrl(object),
@@ -278,6 +299,7 @@ L.OSM.Map = L.Map.extend({
           if (callback) callback(map._objectLayer.getBounds());
         }
       });
+    }
   },
 
   removeObject: function () {