Leaflet popups for specific base maps

Question

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 to make an overlay map with popups, but I want the popups to change depending on the base map selected by the user. How would I go about doing this? Thank You So Much

Answer 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 map
var map = L.map('map').setView([39.5, -0.5], 5);

// Set up the OSM layer
var 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 markers
function createMarker(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 overlay
var 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 control
var baseMaps = {};
baseMaps[baseLayer1.options.name] = baseLayer1;
baseMaps[baseLayer2.options.name] = baseLayer2;

var overlays = {
  "Overlay": overlay
};

// create layers control
var 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;
}

<script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script>
<link href="https://npmcdn.com/[email protected]/dist/leaflet.css" rel="stylesheet"/>
<div id="map"></div>