//= 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 (newNote && 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.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(); 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(); }); }); });