From 30403cb9307262871e7fa304430ca4d691e3bfb2 Mon Sep 17 00:00:00 2001
From: Roman Deev <roman.deev06@gmail.com>
Date: Tue, 7 Jan 2025 03:17:24 +0300
Subject: [PATCH] Use baselayerchange/overlaylayerchange instead of
 layeradd/layerremove for speed up Map Data layer render

---
 app/assets/javascripts/index.js             |  2 +-
 app/assets/javascripts/index/layers/data.js | 16 ++++++----------
 app/assets/javascripts/leaflet.map.js       |  3 +++
 app/assets/javascripts/leaflet.share.js     |  2 +-
 4 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 56495b31a3..9a581c9367 100644
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -173,7 +173,7 @@ $(document).ready(function () {
   var expiry = new Date();
   expiry.setYear(expiry.getFullYear() + 10);
 
-  map.on("moveend layeradd layerremove", function () {
+  map.on("moveend baselayerchange overlaylayerchange", function () {
     updateLinks(
       map.getCenter().wrap(),
       map.getZoom(),
diff --git a/app/assets/javascripts/index/layers/data.js b/app/assets/javascripts/index/layers/data.js
index 0a996f0c70..0be0fbdec0 100644
--- a/app/assets/javascripts/index/layers/data.js
+++ b/app/assets/javascripts/index/layers/data.js
@@ -25,18 +25,14 @@ OSM.initializeDataLayer = function (map) {
     onSelect(e.layer);
   });
 
-  map.on("layeradd", function (e) {
-    if (e.layer === dataLayer) {
-      map.on("moveend", updateData);
-      updateData();
-    }
+  dataLayer.on("add", function () {
+    map.on("moveend", updateData);
+    updateData();
   });
 
-  map.on("layerremove", function (e) {
-    if (e.layer === dataLayer) {
-      map.off("moveend", updateData);
-      $("#browse_status").empty();
-    }
+  dataLayer.on("remove", function () {
+    map.off("moveend", updateData);
+    $("#browse_status").empty();
   });
 
   function updateData() {
diff --git a/app/assets/javascripts/leaflet.map.js b/app/assets/javascripts/leaflet.map.js
index e0c2ee60b4..0d59a210ff 100644
--- a/app/assets/javascripts/leaflet.map.js
+++ b/app/assets/javascripts/leaflet.map.js
@@ -295,6 +295,7 @@ L.OSM.Map = L.Map.extend({
       }
 
       if (callback) callback(this._objectLayer.getBounds());
+      this.fire("overlaylayerchange", { layer: this._objectLayer });
     } else { // element handled by L.OSM.DataLayer
       var map = this;
       this._objectLoader = $.ajax({
@@ -326,6 +327,7 @@ L.OSM.Map = L.Map.extend({
           map._objectLayer.addTo(map);
 
           if (callback) callback(map._objectLayer.getBounds());
+          map.fire("overlaylayerchange", { layer: map._objectLayer });
         }
       });
     }
@@ -335,6 +337,7 @@ L.OSM.Map = L.Map.extend({
     this._object = null;
     if (this._objectLoader) this._objectLoader.abort();
     if (this._objectLayer) this.removeLayer(this._objectLayer);
+    this.fire("overlaylayerchange", { layer: this._objectLayer });
   },
 
   getState: function () {
diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index 7713a6b147..009e15c7a1 100644
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -269,7 +269,7 @@ L.OSM.share = function (options) {
 
     marker.on("dragend", movedMarker);
     map.on("move", movedMap);
-    map.on("moveend layeradd layerremove", update);
+    map.on("moveend baselayerchange overlaylayerchange", update);
 
     $ui
       .on("show", shown)