X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/ae00fa84c8f981e909c61ab31b6115bb96e859cc..00108bc9b7e9e03a47d89343e7f53eb924977ff8:/app/assets/javascripts/index/layers/notes.js

diff --git a/app/assets/javascripts/index/layers/notes.js b/app/assets/javascripts/index/layers/notes.js
index eaa5c3654..104f6f2f2 100644
--- a/app/assets/javascripts/index/layers/notes.js
+++ b/app/assets/javascripts/index/layers/notes.js
@@ -1,8 +1,9 @@
 OSM.initializeNotesLayer = function (map) {
-  var noteLayer = map.noteLayer,
-      notes = {};
+  let noteLoader;
+  const noteLayer = map.noteLayer;
+  let notes = {};
 
-  var noteIcons = {
+  const noteIcons = {
     "new": L.icon({
       iconUrl: OSM.NEW_NOTE_MARKER,
       iconSize: [25, 40],
@@ -20,33 +21,38 @@ OSM.initializeNotesLayer = function (map) {
     })
   };
 
-  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 = {};
-    }
-  });
-
-  noteLayer.on("click", function (e) {
+  noteLayer.on("add", () => {
+    loadNotes();
+    map.on("moveend", loadNotes);
+    map.fire("overlayadd", { layer: noteLayer });
+  }).on("remove", () => {
+    if (noteLoader) noteLoader.abort();
+    noteLoader = null;
+    map.off("moveend", loadNotes);
+    noteLayer.clearLayers();
+    notes = {};
+    map.fire("overlayremove", { layer: noteLayer });
+  }).on("click", function (e) {
     if (e.layer.id) {
       OSM.router.route("/note/" + e.layer.id);
     }
   });
 
   function updateMarker(old_marker, feature) {
-    var marker = old_marker;
+    let marker = old_marker;
     if (marker) {
       marker.setIcon(noteIcons[feature.properties.status]);
     } else {
+      let title;
+      const description = feature.properties.comments[0];
+
+      if (description?.action === "opened") {
+        title = description.text;
+      }
+
       marker = L.marker(feature.geometry.coordinates.reverse(), {
         icon: noteIcons[feature.properties.status],
-        title: feature.properties.comments[0].text,
+        title,
         opacity: 0.8,
         interactive: true
       });
@@ -60,39 +66,35 @@ OSM.initializeNotesLayer = function (map) {
     return marker.id;
   };
 
-  var noteLoader;
-
   function loadNotes() {
-    var bounds = map.getBounds();
-    var size = bounds.getSize();
+    const bounds = map.getBounds();
+    const size = bounds.getSize();
 
     if (size <= OSM.MAX_NOTE_REQUEST_AREA) {
-      var url = "/api/" + OSM.API_VERSION + "/notes.json?bbox=" + bounds.toBBoxString();
+      const url = "/api/" + OSM.API_VERSION + "/notes.json?bbox=" + bounds.toBBoxString();
 
       if (noteLoader) noteLoader.abort();
 
-      noteLoader = $.ajax({
-        url: url,
-        success: success
-      });
+      noteLoader = new AbortController();
+      fetch(url, { signal: noteLoader.signal })
+        .then(response => response.json())
+        .then(success)
+        .catch(() => {})
+        .finally(() => noteLoader = null);
     }
 
     function success(json) {
-      var oldNotes = notes;
+      const oldNotes = notes;
       notes = {};
-      json.features.forEach(updateMarkers);
-
-      function updateMarkers(feature) {
-        var marker = oldNotes[feature.properties.id];
+      for (const feature of json.features) {
+        const marker = oldNotes[feature.properties.id];
         delete oldNotes[feature.properties.id];
         notes[feature.properties.id] = updateMarker(marker, feature);
       }
 
-      for (var id in oldNotes) {
+      for (const id in oldNotes) {
         noteLayer.removeLayer(oldNotes[id]);
       }
-
-      noteLoader = null;
     }
   }
 };