Leaflet Popups For Specific Base Maps

so I'm making a website using leaflet with dozens of base maps. I want to incorporate information about each map that is only visible if the user wants it. To do this, I would like

Solution 1:

You need to either use a plugin that keeps track of the base maps for you (like active layers) or you need to do it yourself.

If you are using the Leaflet layers control, you can subscribe to the basemapchange event to do this easily.

You need two things: active base layer management (easy) and dynamic popups (not too hard)

To wit:

First, here is the event handler to track active base layer when it changes.

map.on("baselayerchange",
  function(e) {
    // e.name has the layer name// e.layer has the layer reference
    map.activeBaseLayer = e.layer;
    console.log("base map changed to " + e.name);
  });

Because using L.marker().bindPopup() creates the popup content right there and does not support callbacks, you must manually create the popups in response to click event by calling map.openPopup() with your dynamic html (dynamic because it uses a variable: the active basemap name)

  marker.on("click", function(e) {
    var html = "Current base layer: <br/><b>" + map.activeBaseLayer.options.name + "<b>";
    map.openPopup(html,
      e.latlng, {
        offset: L.point(1, -24)
      });
  });

Here is a working example on JS fiddle: http://jsfiddle.net/4caaznsc/

Working code snippet also below (relies on Leaflet CDN):

// Create the mapvar map = L.map('map').setView([39.5, -0.5], 5);

// Set up the OSM layervar baseLayer1 = L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    name: "Base layer 1"
  });

var baseLayer2 = L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    name: "Base layer 2"
  });

// add some markersfunctioncreateMarker(lat, lng) {
  var marker = L.marker([lat, lng]);
  marker.on("click", function(e) {
    var html = "Current base layer: <br/><b>" + map.activeBaseLayer.options.name + "<b>";
    map.openPopup(html,
      e.latlng, {
        offset: L.point(1, -24)
      });
  });
  return marker;
}
var markers = [createMarker(36.9, -2.45), createMarker(36.9, -2.659), createMarker(36.83711, -2.464459)];

// create group to hold markers, it will be added as an overlayvar overlay = L.featureGroup(markers);

// show overlay by default
overlay.addTo(map);

// show features
map.fitBounds(overlay.getBounds(), {
  maxZoom: 11
});

// make up our own property for activeBaseLayer, we will keep track of this when it changes
map.activeBaseLayer = baseLayer1;
baseLayer1.addTo(map);

// create basemaps and overlays collections for the layers controlvar baseMaps = {};
baseMaps[baseLayer1.options.name] = baseLayer1;
baseMaps[baseLayer2.options.name] = baseLayer2;

var overlays = {
  "Overlay": overlay
};

// create layers controlvar layersControl = L.control.layers(baseMaps, overlays).addTo(map);

// update active base layer when changed
map.on("baselayerchange",
  function(e) {
    // e.name has the name, but it may be handy to have layer reference
    map.activeBaseLayer = e.layer;
    map.closePopup(); // any open popups will no longer be correct; take easy way out and hide 'em
  });

#map {
  height: 400px;
}

<scriptsrc="https://npmcdn.com/leaflet@0.7.7/dist/leaflet.js"></script><linkhref="https://npmcdn.com/leaflet@0.7.7/dist/leaflet.css" /><divid="map"></div>