diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 56495b31a3..d61191fb43 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 overlayadd overlayremove", function () {
     updateLinks(
       map.getCenter().wrap(),
       map.getZoom(),
@@ -205,7 +205,7 @@ $(document).ready(function () {
   });
 
   if (OSM.MATOMO) {
-    map.on("layeradd", function (e) {
+    map.on("baselayerchange overlayadd", function (e) {
       if (e.layer.options) {
         var goal = OSM.MATOMO.goals[e.layer.options.layerId];
 
diff --git a/app/assets/javascripts/index/layers/data.js b/app/assets/javascripts/index/layers/data.js
index 7507a5f4e7..c699594670 100644
--- a/app/assets/javascripts/index/layers/data.js
+++ b/app/assets/javascripts/index/layers/data.js
@@ -25,18 +25,16 @@ 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.fire("overlayadd", { layer: this });
+    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();
+    map.fire("overlayremove", { layer: this });
   });
 
   function updateData() {
diff --git a/app/assets/javascripts/index/layers/notes.js b/app/assets/javascripts/index/layers/notes.js
index 4676aa425e..c0ba35d7e1 100644
--- a/app/assets/javascripts/index/layers/notes.js
+++ b/app/assets/javascripts/index/layers/notes.js
@@ -23,10 +23,12 @@ OSM.initializeNotesLayer = function (map) {
   noteLayer.on("add", () => {
     loadNotes();
     map.on("moveend", loadNotes);
+    map.fire("overlayadd", { layer: noteLayer });
   }).on("remove", () => {
     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);
diff --git a/app/assets/javascripts/leaflet.layers.js b/app/assets/javascripts/leaflet.layers.js
index 35b958c7aa..3f577b532d 100644
--- a/app/assets/javascripts/leaflet.layers.js
+++ b/app/assets/javascripts/leaflet.layers.js
@@ -61,18 +61,16 @@ L.OSM.layers = function (options) {
 
       input.on("click", function () {
         layers.forEach(function (other) {
-          if (other === layer) {
-            map.addLayer(other);
-          } else {
+          if (other !== layer) {
             map.removeLayer(other);
           }
         });
-        map.fire("baselayerchange", { layer: layer });
+        map.addLayer(layer);
       });
 
       item.on("dblclick", toggle);
 
-      map.on("layeradd layerremove", function () {
+      map.on("baselayerchange", function () {
         input.prop("checked", map.hasLayer(layer));
       });
     });
@@ -121,10 +119,9 @@ L.OSM.layers = function (options) {
           } else {
             map.removeLayer(layer);
           }
-          map.fire("overlaylayerchange", { layer: layer });
         });
 
-        map.on("layeradd layerremove", function () {
+        map.on("overlayadd overlayremove", function () {
           input.prop("checked", map.hasLayer(layer));
         });
 
diff --git a/app/assets/javascripts/leaflet.map.js b/app/assets/javascripts/leaflet.map.js
index 7929ea0ac7..99d5a60503 100644
--- a/app/assets/javascripts/leaflet.map.js
+++ b/app/assets/javascripts/leaflet.map.js
@@ -40,6 +40,9 @@ L.OSM.Map = L.Map.extend({
       }
 
       const layer = new layerConstructor(layerOptions);
+      layer.on("add", () => {
+        this.fire("baselayerchange", { layer: layer });
+      });
       this.baseLayers.push(layer);
     }
 
@@ -53,8 +56,14 @@ L.OSM.Map = L.Map.extend({
       pane: "overlayPane",
       code: "G"
     });
+    this.gpsLayer.on("add", () => {
+      this.fire("overlayadd", { layer: this.gpsLayer });
+    }).on("remove", () => {
+      this.fire("overlayremove", { layer: this.gpsLayer });
+    });
+
 
-    this.on("layeradd", function (event) {
+    this.on("baselayerchange", function (event) {
       if (this.baseLayers.indexOf(event.layer) >= 0) {
         this.setMaxZoom(event.layer.options.maxZoom);
       }
@@ -109,14 +118,18 @@ L.OSM.Map = L.Map.extend({
     var layers = layerParam || "M",
         layersAdded = "";
 
-    for (var i = this.baseLayers.length - 1; i >= 0; i--) {
+    for (let i = this.baseLayers.length - 1; i >= 0; i--) {
+      if (layers.indexOf(this.baseLayers[i].options.code) === -1) {
+        this.removeLayer(this.baseLayers[i]);
+      }
+    }
+
+    for (let i = this.baseLayers.length - 1; i >= 0; i--) {
       if (layers.indexOf(this.baseLayers[i].options.code) >= 0) {
         this.addLayer(this.baseLayers[i]);
         layersAdded = layersAdded + this.baseLayers[i].options.code;
       } else if (i === 0 && layersAdded === "") {
         this.addLayer(this.baseLayers[i]);
-      } else {
-        this.removeLayer(this.baseLayers[i]);
       }
     }
   },
@@ -297,6 +310,7 @@ L.OSM.Map = L.Map.extend({
       }
 
       if (callback) callback(this._objectLayer.getBounds());
+      this.fire("overlayadd", { layer: this._objectLayer });
     } else { // element handled by L.OSM.DataLayer
       var map = this;
       this._objectLoader = $.ajax({
@@ -328,6 +342,7 @@ L.OSM.Map = L.Map.extend({
           map._objectLayer.addTo(map);
 
           if (callback) callback(map._objectLayer.getBounds());
+          map.fire("overlayadd", { layer: map._objectLayer });
         }
       });
     }
@@ -337,6 +352,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("overlayremove", { layer: this._objectLayer });
   },
 
   getState: function () {
diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index 7713a6b147..1eed2151a9 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 overlayadd overlayremove", update);
 
     $ui
       .on("show", shown)
diff --git a/app/assets/javascripts/router.js b/app/assets/javascripts/router.js
index c4e5241700..a8659d3087 100644
--- a/app/assets/javascripts/router.js
+++ b/app/assets/javascripts/router.js
@@ -190,7 +190,7 @@ OSM.Router = function (map, rts) {
     currentRoute = routes.recognize(currentPath);
   };
 
-  map.on("moveend baselayerchange overlaylayerchange", router.updateHash);
+  map.on("moveend baselayerchange overlayadd overlayremove", router.updateHash);
   $(window).on("hashchange", router.hashUpdated);
 
   return router;