Use baselayerchange/overlaylayerchange instead of layeradd/layerremov…

…e for speed up Map Data layer render
openstreetmap · Jan 10, 2025 · a359de9 · a359de9
1 parent 97b14ce
commit a359de9
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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)