leaflet_oms_spiderfy

HTML

<!-- BOOTSTRAP: jQuery first, then Popper.js and finally Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js" integrity="sha384-3qaqj0lc6sV/qpzrc1N5DC6i1VRn/HyX4qdPaiEFbn54VjQBEU341pvjz7Dv3n6P" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css" integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous" />
<!-- Moment.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js" integrity="sha256-4iQZ6BVL4qNKlQ27TExEhBN1HFPvAvAMbFavKKosSWQ=" crossorigin="anonymous"></script>
<!-- Load Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<!-- Leaflet Overlapping Marker Spiderfier-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OverlappingMarkerSpiderfier-Leaflet/0.2.6/oms.min.js" integrity="sha256-t+V41b9l6j8GMYAbpcnZbib1XiYwCAsDibD8sI1D7+Y=" crossorigin="anonymous"></script>
<!--  leaflet Fullscreen -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.fullscreen/1.6.0/Control.FullScreen.css" integrity="sha256-RTALnHN76PJ32RJx2mxggy+RUt9TIRV+mfPLSLbI75A=" crossorigin="anonymous" />
<script...

CSS

#map {
  z-index: 1;
  height: 600px;
  width: 100%;
}

JavaScript

// ―――――――――――――――――――――――――――――――――――
  // Leaflet Map and OMS spiderfy option
  // ―――――――――――――――――――――――――――――――――――

  var weekend = L.layerGroup([]);
  var earlyweek = L.layerGroup([]);
  var midweek = L.layerGroup([]);
  var old = L.layerGroup([]);
  var placeholders = L.layerGroup([]);

  function layersBring2Front() {
        //layer1.bringToFront(); // bringToFront not available for L.markers - using zIndexOffset instead
        weekend.eachLayer(function (layer) {
          layer.setZIndexOffset(5000);
        });
        earlyweek.eachLayer(function (layer) {
          layer.setZIndexOffset(4000);
        });
        midweek.eachLayer(function (layer) {
          layer.setZIndexOffset(3000);
        });
        placeholders.eachLayer(function (layer) {
          layer.setZIndexOffset(2000);
        });
        old.eachLayer(function (layer) {
          layer.setZIndexOffset(1000);
        });

    }

  var dataLayers = { old, placeholders,  midweek, earlyweek, weekend }

  var streets = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' });
  
  //var topographic = L.esri.basemapLayer('Topographic');

  var map = L.map('map', { center: [51.511, -0.117], zoom: 12, maxZoom: 18, layers: [streets, weekend, earlyweek, midweek, placeholders, old], fullscreenControl: true, fullscreenControlOptions: { position: 'topleft' } });

  var baseMaps = {  "Streets": streets },
  overlayMaps = {
      "<span class='b8'>Weekend</span> <span class='nb'></span>": weekend,
      "Early Week (<span class='nb'>Mon, Tue</span>)": earlyweek,
      "Mid Week (<span class='nb'>Wed, Thu</span>)": midweek,
      "<span style='color: slategray'>Unconfirmed Events</span>": placeholders,
      "<span style='color: darkgray'>Expired Events</span>": old //gray
  };

// ――――――――――――――――――――――――――――――――――――――
  // LAYER OPTIONS
  //...