Leaflet minimal map

HTML

<script src="https://npmcdn.com/leaflet@0.7.7/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://npmcdn.com/leaflet@0.7.7/dist/leaflet.css">
<div id="map"></div>

CSS

#map {
  height: 400px;
}

JavaScript

// 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
  });