From a359de90c209df00b40ba5520291b7e295b0b2c8 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.layers.js    |  4 ++--
 app/assets/javascripts/leaflet.map.js       |  3 +++
 app/assets/javascripts/leaflet.share.js     |  2 +-
 5 files changed, 13 insertions(+), 14 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..e1802ee6ba 100644
--- a/app/assets/javascripts/index/layers/data.js
+++ b/app/assets/javascripts/index/layers/data.js
@@ -25,19 +25,15 @@ OSM.initializeDataLayer = function (map) {
     onSelect(e.layer);
   });
 
-  map.on("layeradd", function (e) {
-    if (e.layer === dataLayer) {
+  dataLayer.on("add", function (e) {
       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 (e) {
+    map.off("moveend", updateData);
+    $("#browse_status").empty();
+  })
 
   function updateData() {
     var bounds = map.getBounds();
diff --git a/app/assets/javascripts/leaflet.layers.js b/app/assets/javascripts/leaflet.layers.js
index 35b958c7aa..43fb4f2953 100644
--- a/app/assets/javascripts/leaflet.layers.js
+++ b/app/assets/javascripts/leaflet.layers.js
@@ -72,7 +72,7 @@ L.OSM.layers = function (options) {
 
       item.on("dblclick", toggle);
 
-      map.on("layeradd layerremove", function () {
+      map.on("baselayerchange overlaylayerchange", function () {
         input.prop("checked", map.hasLayer(layer));
       });
     });
@@ -124,7 +124,7 @@ L.OSM.layers = function (options) {
           map.fire("overlaylayerchange", { layer: layer });
         });
 
-        map.on("layeradd layerremove", function () {
+        map.on("baselayerchange overlaylayerchange", function () {
           input.prop("checked", map.hasLayer(layer));
         });
 
diff --git a/app/assets/javascripts/leaflet.map.js b/app/assets/javascripts/leaflet.map.js
index 5e6112fc05..3d3fa79fed 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({
@@ -328,6 +329,7 @@ L.OSM.Map = L.Map.extend({
           map._objectLayer.addTo(map);
 
           if (callback) callback(map._objectLayer.getBounds());
+          map.fire("overlaylayerchange", { layer: map._objectLayer });
         }
       });
     }
@@ -337,6 +339,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)