notes.js.erb

//= require templates/notes/show
//= require templates/notes/new

$(document).ready(function () {
  var params = OSM.mapParams();

  var noteIcons = {
    "new": L.icon({
      iconUrl: "<%= image_path 'new_note_marker.png' %>",
      iconSize: [22, 22],
      iconAnchor: [11, 11]
    }),
    "open": L.icon({
      iconUrl: "<%= image_path 'open_note_marker.png' %>",
      iconSize: [22, 22],
      iconAnchor: [11, 11]
    }),
    "closed": L.icon({
      iconUrl: "<%= image_path 'closed_note_marker.png' %>",
      iconSize: [22, 22],
      iconAnchor: [11, 11]
    })
  };

  var noteLayer = new L.LayerGroup();
  var notes = {};
  var newNote;

  map.on("layeradd", function (e) {
    if (e.layer == noteLayer) {
      loadNotes();
      map.on("moveend", loadNotes);
    }
  });

  map.on("layerremove", function (e) {
    if (e.layer == noteLayer) {
      map.off("moveend", loadNotes);
      noteLayer.clearLayers();
    }
  });

  map.on("popupclose", function (e) {
    if (e.popup == newNote._popup) {
      $(newNote).oneTime(10, "removenote", function () {
        map.removeLayer(newNote);
      });
    }
  });

  if (OSM.STATUS != 'api_offline' && OSM.STATUS != 'database_offline') {
    map.layersControl.addOverlay(noteLayer, I18n.t("browse.start_rjs.notes_layer_name"));

    if (params.notes) 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();
        }
      });
    }
  }

  function updateMarker(marker, feature) {
    var icon = noteIcons[feature.properties.status];
    var popupContent = createPopupContent(marker, feature.properties);

    if (marker)
    {
      marker.setIcon(noteIcons[feature.properties.status]);
      marker._popup.setContent(popupContent);
    }
    else
    {
      marker = L.marker(feature.geometry.coordinates.reverse(), {
        icon: icon,
        opacity: 0.7
      });

      marker.addTo(noteLayer).bindPopup(popupContent, popupOptions());
    }

    return marker;
  }

  var noteLoader;

  function loadNotes() {
    var bounds = map.getBounds();
    var size = bounds.getSize();

    if (size <= OSM.MAX_NOTE_REQUEST_AREA) {
      var url = "/api/" + OSM.API_VERSION + "/notes.json?bbox=" + bounds.toBBOX();

      if (noteLoader) noteLoader.abort();

      noteLoader = $.ajax({
        url: url,
        success: function (json) {
          var oldNotes = notes;

          notes = {};

          json.features.forEach(function (feature) {
            var marker = oldNotes[feature.properties.id];

            delete oldNotes[feature.properties.id];

            notes[feature.properties.id] = updateMarker(marker, feature);
          });

          for (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, -3),
      autoPanPadding: new L.Point(60, 40)
    };
  }

  function createPopupContent(marker, properties) {
    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.close"));
        $(form.comment).prop("disabled", true);
      } else {
        $(form.close).val(I18n.t("javascripts.notes.show.comment_and_close"));
        $(form.comment).prop("disabled", false);
      }
    });

    content.find("input[type=submit]").on("click", function (e) {
      e.preventDefault();
      updateNote(marker, e.target.form, $(e.target).data("url"));
    });

    return content[0];
  }

  function createNote(marker, form, url) {
    var location = marker.getLatLng();

    $(form).find("input[type=submit]").prop("disabled", true);

    $.ajax({
      url: url,
      type: "POST",
      data: {
        lat: location.lat,
        lon: location.lng,
        text: $(form.text).val()
      },
      success: function (feature) {
        notes[feature.properties.id] = updateMarker(marker, feature);

        $(".leaflet-popup-close-button").off("click.close");
        $("#createnoteanchor").removeClass("disabled").addClass("geolink");
      }
    });
  }

  function updateNote(marker, form, url) {
    $(form).find("input[type=submit]").prop("disabled", true);

    $.ajax({
      url: url,
      type: "POST",
      data: {
        text: $(form.text).val()
      },
      success: function (feature) {
        var popupContent = createPopupContent(marker, feature.properties);

        marker.setIcon(noteIcons[feature.properties.status]);
        marker._popup.setContent(popupContent);
      }
    });
  }

  $("#createnoteanchor").click(function (e) {
    e.preventDefault();

    if ($(e.target).hasClass("disabled")) return;

    $(e.target).removeClass("geolink").addClass("disabled");

    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.7,
      draggable: true
    });

    var popupContent = $(JST["templates/notes/new"]({ create_url: $(e.target).attr("href") }));

    popupContent.find("textarea").on("input", function (e) {
      var form = e.target.form;

      if ($(e.target).val() == "") {
        $(form.add).prop("disabled", true);
      } else {
        $(form.add).prop("disabled", false);
      }
    });

    popupContent.find("input[type=submit]").on("click", function (e) {
      e.preventDefault();
      createNote(newNote, e.target.form, $(e.target).data("url"));
    });

    newNote.addTo(noteLayer).bindPopup(popupContent[0], popupOptions()).openPopup();

    newNote.on("remove", function (e) {
      $("#createnoteanchor").removeClass("disabled").addClass("geolink");
    });

    newNote.on("dragstart", function (e) {
      $(newNote).stopTime("removenote");
    });

    newNote.on("dragend", function (e) {
      e.target.openPopup();
    });
  });
});