Custom Leaflet layer control

user_16538252 0
Viewed 2374

I have 7 leaflet maps created via loop and data which is exactly the same on each map controlled by a checkbox; however, my plan was to make one layer visible per map. I have searched for a solution where my maps can remain while having one layer per map, but to no avail. I had the idea of keeping one of each layer on by default when the page loads in, but I can't seem to find anything on that either. Does anyone know how to do that? I have left one layer's coordinates in the code Toe_11000 (the "11000 years ago" checkbox) since my coordinates went over the character limit but please let me know if you need clarification. If you need more of the coordinates for the layers, the full code can be found in this JSFiddle: https://jsfiddle.net/wpc6707/3ksjh06p/21/ Here's my code:

var basemapTile =
  "https://stamen-tiles-{s}.a.ssl.fastly.net/terrain-background/{z}/{x}/{y}.{ext}";

var basemapOptions = {
  attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  subdomains: "abcd",
  minZoom: 0,
  maxZoom: 18,
  ext: "png",
};

var glacier_map_Data = {
  glacier_1: {
    center: [45.5, -89.5],
    zoom: 7,
    description: "Glacier one",
    // add title, shapes etc here
    /*Glacier 11000*/
    shape: (Toe_11000 = {
      type: "FeatureCollection",
      features: [{
        type: "Feature",
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [-89.01714901099996, 47.701660041000025],
              [-88.98864567199996, 47.67105872900004],
              [-88.89693208899996, 47.632717624000065],
              [-88.76124959199996, 47.56169631900008],
              [-88.58375016199994, 47.49178961600006],
              [-88.44017698199997, 47.44707161100007],
              [-88.30330388599998, 47.44691295700005],
              [-88.17169811099996, 47.44667491700005],
              [-88.02148343399995, 47.45132287700005],
              [-87.87715720599994, 47.43981218000005],
              [-87.74844734199996, 47.433784306000064],
              [-87.64558455399998, 47.43885976400003],
              [-87.53193680099997, 47.44896815100003],
              [-87.38107493899997, 47.46526214000005],
              [-87.24572687999995, 47.48530297000008],
              [-87.13143423099996, 47.50392737300007],
              [-86.98182199599995, 47.53937042800004],
              [-86.82927429899996, 47.57632309400003],
              [-86.62586405499997, 47.62051563700004],
              [-86.53722267999996, 47.642872296000064],
              [-86.52848360499996, 47.655108436000035],
              [-86.66049972099995, 47.65724573000006],
              [-89.01447077999995, 47.70342257000004],
              [-89.01714901099996, 47.701660041000025],
            ],
          ],
        },
        properties: {
          OBJECTID_1: 1,
          OBJECTID: 1,
          Years_Ago: 11000,
          SHAPE_Leng: 387749.141631,
          Shape_Le_1: 5.06435076694,
          Shape_Area: 0.429078160361,
          filename: "11000.jpg",
        },
      }, ],
    }),

    shape_style: (g11000 = L.geoJSON(Toe_11000, {
      style: {
        color: "#e41a1c"
      },
    })),

    shape_listener: g11000.on({
      click: function() {
        $("#panel").html(
          Toe_11000.features[0].properties.Years_Ago +
          " Years Ago" +
          info11000 +
          glacierInfo +
          selfPlug
        );
      },
    }),
  },

  glacier_2: {
    center: [45.5, -89.5],
    zoom: 7,
    description: "Glacier two",
    // add title, shapes etc here
    /*Glacier 14600*/
    shape: (Toe_14600 = {
      type: "FeatureCollection",
      features: [{
        type: "Feature",
        geometry: {
          type: "Polygon",
          coordinates: [
            [

            ],
          ],
        },
        properties: {
          OBJECTID_1: 1,
          OBJECTID: 1,
          Years_Ago: 14600,
          SHAPE_Leng: 2202706.20984,
          Shape_Le_1: 25.0028099606,
          Shape_Area: 17.1995913109,
          filename: "14600.jpg",
        },
      }, ],
    }),

    shape_style: (g14600 = L.geoJSON(Toe_14600, {
      style: {
        color: "blue"
      },
    })),

    shape_listener: g14600.on({
      click: function() {
        $("#panel").html(
          Toe_14600.features[0].properties.Years_Ago +
          " Years Ago" +
          info14600 +
          glacierInfo +
          selfPlug
        );
      },
    }),
  },

  glacier_3: {
    center: [45.5, -89.5],
    zoom: 7,
    description: "Glacier three",
    // add title, shapes etc here
    shape: (Toe_17000 = {
      type: "FeatureCollection",
      features: [{
        type: "Feature",
        geometry: {
          type: "Polygon",
          coordinates: [
            [

            ],
          ],
        },
        properties: {
          OBJECTID_1: 1,
          OBJECTID: 2,
          Years_Ago: 17000,
          SHAPE_Leng: 2261336.18634,
          Shape_Le_1: 24.4337768448,
          Shape_Area: 21.6098467975,
          filename: "17000.jpg",
        },
      }, ],
    }),

    shape_style: (g17000 = L.geoJSON(Toe_17000, {
      style: {
        color: "#4daf4a"
      },
    })),

    shape_listener: g17000.on({
      click: function() {
        $("#panel").html(
          Toe_17000.features[0].properties.Years_Ago +
          " Years Ago" +
          info17000 +
          glacierInfo +
          selfPlug
        );
      },
    }),
  },

  glacier_4: {
    center: [45.5, -89.5],
    zoom: 7,
    description: "Glacier four",
    // add title, shapes etc here
    /*Glacier 20500*/
    shape: (Toe_20500 = {
      type: "FeatureCollection",
      features: [{
        type: "Feature",
        geometry: {
          type: "MultiPolygon",
          coordinates: [
            [
              [

              ],
            ],
            [
              [

              ],
            ],
          ],
        },
        properties: {
          OBJECTID_1: 1,
          OBJECTID: 1,
          Years_Ago: 20500,
          SHAPE_Leng: 3087165.91023,
          Shape_Le_1: 33.5221258781,
          Shape_Area: 32.9568211425,
          filename: "20500.jpg",
        },
      }, ],
    }),

    shape_style: (g20500 = L.geoJSON(Toe_20500, {
      style: {
        color: "#ffff33"
      },
    })),

    shape_listener: g20500.on({
      click: function() {
        $("#panel").html(
          Toe_20500.features[0].properties.Years_Ago +
          " Years Ago" +
          info20500 +
          glacierInfo +
          selfPlug
        );
      },
    }),
  },

  glacier_5: {
    center: [45.5, -89.5],
    zoom: 7,
    description: "Glacier five",
    // add title, shapes etc here
    /*Glacier 24000*/
    shape: (Toe_24000 = {
      type: "FeatureCollection",
      features: [{
        type: "Feature",
        geometry: {
          type: "Polygon",
          coordinates: [
            [

            ],
          ],
        },
        properties: {
          OBJECTID_1: 1,
          OBJECTID: 1,
          Years_Ago: 24000,
          SHAPE_Leng: 3034250.36063,
          Shape_Le_1: 33.0014683974,
          Shape_Area: 35.7394984299,
          filename: "24000.jpg",
        },
      }, ],
    }),

    shape_style: (g24000 = L.geoJSON(Toe_24000, {
      style: {
        color: "#984ea3"
      },
    })),
    shape_listener: g24000.on({
      click: function() {
        $("#panel").html(
          Toe_24000.features[0].properties.Years_Ago +
          " Years Ago" +
          info24000 +
          glacierInfo +
          selfPlug
        );
      },
    }),
  },

  glacier_6: {
    center: [45.5, -89.5],
    zoom: 7,
    description: "Glacier six",
    // add title, shapes etc here
    /*Glacier 27500*/
    shape: (Toe_27500 = {
      type: "FeatureCollection",
      features: [{
        type: "Feature",
        geometry: {
          type: "Polygon",
          coordinates: [
            [

            ],
          ],
        },
        properties: {
          OBJECTID_1: 1,
          OBJECTID: 1,
          Years_Ago: 27500,
          SHAPE_Leng: 2984589.95454,
          Shape_Le_1: 32.3931138132,
          Shape_Area: 34.4347324387,
          filename: "27500.jpg",
        },
      }, ],
    }),

    shape_style: (g27500 = L.geoJSON(Toe_27500, {
      style: {
        color: "#ff7f00"
      },
    })),
    shape_listener: g27500.on({
      click: function() {
        $("#panel").html(
          Toe_27500.features[0].properties.Years_Ago +
          " Years Ago" +
          info27500 +
          glacierInfo +
          selfPlug
        );
      },
    }),
  },

  glacier_7: {
    center: [45.5, -89.5],
    zoom: 7,
    description: "Glacier seven",
    // add title, shapes etc here
    shape: (Toe_31500 = {
      type: "FeatureCollection",
      features: [{
        type: "Feature",
        geometry: {
          type: "Polygon",
          coordinates: [
            [

            ],
          ],
        },
        properties: {
          OBJECTID_1: 1,
          OBJECTID: 2,
          Years_Ago: 31500,
          SHAPE_Leng: 1478866.18087,
          Shape_Le_1: 15.9994195189,
          Shape_Area: 9.83976333148,
          filename: "31500.jpg",
        },
      }, ],
    }),

    shape_style: (g31500 = L.geoJSON(Toe_31500, {
      style: {
        color: "#a65628"
      },
    })),
    shape_listener: g31500.on({
      click: function() {
        $("#panel").html(
          Toe_31500.features[0].properties.Years_Ago +
          " Years Ago" +
          info31500 +
          glacierInfo +
          selfPlug
        );
      },
    }),
  },
};

var initMap = (EL) => {
  var id = EL.dataset.map; // returns i.e: "glacier_1"
  var data = glacier_map_Data[id];
  var map = L.map(EL).setView(data.center, data.zoom);
  L.tileLayer(basemapTile, basemapOptions).addTo(map);

  var glacierLayers = L.control
    .layers(null, {
      //formatting from iH8 answer on StackOverflow https://stackoverflow.com/a/46044847/16538252
      "31500 years ago": g31500,
      "27500 years ago": g27500,
      "24000 years ago": g24000,
      "20500 years ago": g20500,
      "17000 years ago": g17000,
      "14600 years ago": g14600,
      "11000 years ago": g11000,
    })
    .addTo(map);
};
var ELS_map = document.querySelectorAll("[data-map]");
ELS_map.forEach(initMap);
/*Stylesheet by Will P. Campbell,2021*/

body {
  background-color: #ececec;
}


/* idea from Roko C Buljian answer on StackOverflow: https://stackoverflow.com/q/68836662/16538252 */

[data-map] {
  height: 650px;
  width: 60%;
  border: 5px solid black;
  margin: 20px;
}

h1 {
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

#panel {
  position: relative;
  right: 0;
  border: 5px outset black;
  background-color: lightblue;
  text-align: center;
  width: 25%;
  height: auto;
  padding: 20px;
  display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>WISCONSIN GLACIER TIME LAPSE</title>



</head>

<body>

  <h1>WISCONSIN GLACIER TIME LAPSE</h1>


  <!-- map data divs -->
  <div data-map="glacier_1"></div>
  <div data-map="glacier_2"></div>
  <div data-map="glacier_3"></div>
  <div data-map="glacier_4"></div>
  <div data-map="glacier_5"></div>
  <div data-map="glacier_6"></div>
  <div data-map="glacier_7"></div>
  <!--idea from Roko C Buljian answer  on StackOverflow: https://stackoverflow.com/q/68836662/16538252-->



  <div id="panel"><b>Glacier Information Panel</b><br>
    <p>Use the checkbox and click on each glacier to learn more about them!</p>
  </div>
</body>

</html>

leaflet css html jquery javascript
1 Answers

You were on the right direction!
So, if you use all your data inside glacier_map_Data, where the properties reflect the data-* attribute of each element in the Document i.e: <div data-map="glacier_1"></div> add inside it also the properties label, shape and style :

Here's the "new" data example for every glacier_(N)

// glacier_* : 
{
    center: [45.5, -89.5],
    zoom: 7,
    label: "11000 years ago",
    description: "Glacier one description info goes here...",
    shape: {
        type: "FeatureCollection",
        features: [
            {
                type: "Feature",
                geometry: {
                    type: "Polygon",
                    coordinates: [[/* .... */],],
                },
                properties: { /* .... */ },
            },
        ],
    },
    style: {
        color: "#e41a1c",
    }
},

having that kind of data, you first need to:

Create all the LeafLet layers

Create all the LeafLet layers inside a separate Object. You'll later add that object to every map:

// Create the L.geoJSON LAYERS to be later added to each map!
const overlays = Object.entries(glacier_map_Data).reduce((acc_obj, [key, data]) => {

    // Define the geoJSON layer instance
    const L_geoLSON = L.geoJSON(data.shape, {style: data.style});

    // Add click listener to layer
    L_geoLSON.on({
        click() {
            EL_panel.innerHTML = `<h2>${data.title}</h2><p>${data.description}</p>`;
        }
    });

    // Create the return Object:
    acc_obj[key] = {
        label: data.title,
        L_geoJSON
    };

    // Return the accumulator (see: MDN: Array.prototype.reduce() for more info)
    return acc_obj;
}, {});

the above will generate something similar as what you used in your code for var glacierLayers but - with a slight difference:

// overlays = 
{
  glacier_1 : {
    label: "11000 years ago",
    L_geoJSON: {} // the LeafLet geoJSON instance
  },
  // glacier 2, 3 etc...
}

having that custom object in place now, all you need is to: when looping your Maps convert it to the format expected by LeafLet {"layer description 1": geoJSON, /* etc */}

Add multiple layers to LeafLet map and make respective one active:

while looping your Maps ELements, you get the current element's data-* attribute const id = EL.dataset.map ID - that ID can be now referenced to get the active layer too:

// Maps initializator 
// Applays LeafLet to each map Element `EL`
const initMap = (EL) => {
    const id = EL.dataset.map; // gives back i.e: "glacier_1" 2, 3 etc...
    const data = glacier_map_Data[id];

    // Assign a LeafLet Map instance to a specific DOM element and set its view
    const L_map = L.map(EL).setView(data.center, data.zoom);
    L.tileLayer(L_basemapTile, L_basemapOptions).addTo(L_map);

    // Convert the 
    const overlayMaps = Object.values(overlays).reduce((acc_obj, data) => {
        acc_obj[data.label] = data.L_geoLSON
        return acc_obj;
    }, {});

    // Add control layers to map:
    L.control.layers(null, overlayMaps).addTo(L_map);

    // Make specific one "Active" (checked!) and visible on map:
    L_map.addLayer(overlays[id].L_geoJSON);
};

That's basically it. See in the below example how the click handlers are resolved to make it all work:

const EL_panel = document.querySelector("#panel");

const L_basemapTile = "https://stamen-tiles-{s}.a.ssl.fastly.net/terrain-background/{z}/{x}/{y}.{ext}";

const L_basemapOptions = {
  attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  minZoom: 0,
  maxZoom: 18,
  ext: "png",
};

const glacier_map_Data = {
  glacier_1: {
    center: [45.5, -89.5],
    zoom: 7,
    label: "11000 years ago",
    description: "Glacier one description goes here...",
    shape: {
      type: "FeatureCollection",
      features: [{
        type: "Feature",
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [-89.01714901099996, 47.701660041000025],
              [-88.98864567199996, 47.67105872900004],
              [-88.89693208899996, 47.632717624000065],
              [-88.76124959199996, 47.56169631900008],
              [-88.58375016199994, 47.49178961600006],
              [-88.44017698199997, 47.44707161100007],
              [-88.30330388599998, 47.44691295700005],
              [-88.17169811099996, 47.44667491700005],
              [-88.02148343399995, 47.45132287700005],
              [-87.87715720599994, 47.43981218000005],
              [-87.74844734199996, 47.433784306000064],
              [-87.64558455399998, 47.43885976400003],
              [-87.53193680099997, 47.44896815100003],
              [-87.38107493899997, 47.46526214000005],
              [-87.24572687999995, 47.48530297000008],
              [-87.13143423099996, 47.50392737300007],
              [-86.98182199599995, 47.53937042800004],
              [-86.82927429899996, 47.57632309400003],
              [-86.62586405499997, 47.62051563700004],
              [-86.53722267999996, 47.642872296000064],
              [-86.52848360499996, 47.655108436000035],
              [-86.66049972099995, 47.65724573000006],
              [-89.01447077999995, 47.70342257000004],
              [-89.01714901099996, 47.701660041000025],
            ],
          ],
        },
        properties: {
          OBJECTID_1: 1,
          OBJECTID: 1,
          Years_Ago: 11000,
          SHAPE_Leng: 387749.141631,
          Shape_Le_1: 5.06435076694,
          Shape_Area: 0.429078160361,
          filename: "11000.jpg",
        },
      }, ],
    },
    style: {
      color: "#e41a1c",
    }
  },

  glacier_2: {
    center: [45.5, -89.5],
    zoom: 7,
    label: "14600 years ago",
    description: "Glacier two description goes here...",
    shape: {
      type: "FeatureCollection",
      features: [{
        type: "Feature",
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [-90.65116417499996, 47.70293454200004],
              [-90.72482365299999, 47.673924999000064],
              [-90.79822703099995, 47.63344243800003],
              [-90.87151684099996, 47.592913355000064],
              [-90.93607653299995, 47.54240954900007],
              [-90.98389479799994, 47.50486972300007],
              [-91.01266156999998, 47.46605101600005],
              [-91.03524057399994, 47.43585163000006],
              [-91.09569047499997, 47.40672034700003],
              [-91.16068607799997, 47.39608128700007],
              [-91.20242634199997, 47.38136616700007],
              [-91.24370674999994, 47.34807033200008],
              [-91.24727017899994, 47.32089010200008],
              [-91.27829107399998, 47.30054916700004],
              [-91.35252049299999, 47.24684182500005],
              [-91.42454322999998, 47.19454164700005],
              [-91.49851758599999, 47.142169952000074],
              [-91.58297018999997, 47.09531966900005],
              [-91.69593298799998, 47.02941600500003],
              [-91.78970295499994, 46.95941544900006],
              [-91.82835428899995, 46.930232197000066],
              [-91.91162510599997, 46.86744039100006],
              [-91.99554737199998, 46.82743409100004],
              [-92.06911560299994, 46.79183942000003],
              [-92.12271105199994, 46.779428163000034],
              [-92.18228311199994, 46.76116312500005],
              [-92.25397574199997, 46.73548525600006],
              [-92.32346255299996, 46.70837829200008],
              [-92.37452539699996, 46.68875637000008],
              [-92.41380912499994, 46.68507654200005],
              [-92.47155654999995, 46.67669948400004],
              [-92.49779041299996, 46.66041357700004],
              [-92.53630909799995, 46.640992280000034],
              [-92.60352557599998, 46.61519304900003],
              [-92.65025475699997, 46.595545755000046],
              [-92.66997578199994, 46.57508444400003],
              [-92.69410222099998, 46.56023089900003],
              [-92.73425967299994, 46.53498854400004],
              [-92.79268852199999, 46.503571829000066],
              [-92.84256524699998, 46.468051606000074],
              [-92.88183268599994, 46.42849094400003],
              [-92.92753540999996, 46.394466917000045],
              [-92.94989701799994, 46.34959887800005],
              [-92.95186608799997, 46.30954130100008],
              [-92.92975250899997, 46.28153421700006],
              [-92.85925850399997, 46.27331860700008],
              [-92.79127616799997, 46.27357100900008],
              [-92.71321257399995, 46.27830917600005],
              [-92.63952461199995, 46.28860811000004],
              [-92.57829646799996, 46.301436514000045],
              [-92.50925582199994, 46.32440533500005],
              [-92.44221727099995, 46.347289440000054],
              [-92.41261793199999, 46.37792243000007],
              [-92.37035638299994, 46.40309578500006],
              [-92.32010085699994, 46.43555965100006],
              [-92.22421472899998, 46.46604055800003],
              [-92.16676037899998, 46.47714513900007],
              [-92.07164040799995, 46.47747958900004],
              [-91.96355058399996, 46.462242262000075],
              [-91.88129117799997, 46.47505522800003],
              [-91.84860834599993, 46.487018110000065],
              [-91.75759648199994, 46.48702458100007],
              [-91.67480884399998, 46.485409692000076],
              [-91.61092690599997, 46.49347106100004],
              [-91.53298945499995, 46.517401738000046],
              [-91.46184380399995, 46.56548027200006],
              [-91.39439978099995, 46.60108704600003],
              [-91.31293960199997, 46.66110276500007],
              [-91.18166198599994, 46.731109263000064],
              [-91.12163612599994, 46.77552488500004],
              [-91.02482937399998, 46.78786178000007],
              [-90.98063779999995, 46.797773128000074],
              [-90.96927097899999, 46.782631328000036],
              [-90.95760682899999, 46.75034730400006],
              [-91.00666688699994, 46.706114670000034],
              [-91.04472870499995, 46.66958103600007],
              [-91.09664029099997, 46.636712301000045],
              [-91.13687825499994, 46.57726777900007],
              [-91.18839689999999, 46.532931133000034],
              [-91.22591702999995, 46.48300696300004],
              [-91.22480609399997, 46.433490293000034],
              [-91.18738430599996, 46.359591409000075],
              [-91.12616009499999, 46.325921202000075],
              [-90.99618142799994, 46.285217860000046],
              [-90.89141040599998, 46.26322281700004],
              [-90.77320977799997, 46.256463342000075],
              [-90.59165834999999, 46.22897204100008],
              [-90.47359851299996, 46.22571206300006],
              [-90.21011180299996, 46.22840493600006],
              [-90.07834092799999, 46.21714115300006],
              [-89.99052527699996, 46.20002253800004],
              [-89.63663278999996, 46.19754044900003],
              [-89.30472963899996, 46.19409865700004],
              [-89.14564109599996, 46.193020372000035],
              [-89.10690236799996, 46.21367948200003],
              [-88.97509624199995, 46.21828879600008],
              [-88.74396655199996, 46.24455812300005],
              [-88.43920812199997, 46.263282384000036],
              [-88.18463496799995, 46.27857294900008],
              [-88.00977466999996, 46.175646776000065],
              [-87.99389010599998, 46.04677587200007],
              [-88.03142757799998, 45.90454467200004],
              [-88.07824403599994, 45.733876871000064],
              [-88.11693049199994, 45.64521481500003],
              [-88.15630836499997, 45.53154329200004],
              [-88.25459067099996, 45.31159869500004],
              [-88.32963412999999, 45.169820886000025],
              [-88.40834291299996, 45.06376788400007],
              [-88.48581727299995, 44.99336901300006],
              [-88.79481685399998, 44.90415892300007],
              [-88.88639060299994, 44.84792515000004],
              [-88.88261184299995, 44.78357859500005],
              [-88.94319230899998, 44.76271860500003],
              [-88.97231671099996, 44.62840776200005],
              [-89.00318747399996, 44.57866096200007],
              [-89.02004076199995, 44.46804576400007],
              [-89.04649611099995, 44.37537170000007],
              [-89.10740785599995, 44.30082986600007],
              [-89.08883401599996, 44.21492877800006],
              [-89.02088686299999, 44.117891385000064],
              [-88.83475711099999, 43.998228366000035],
              [-88.68786675299998, 43.92517043600003],
              [-88.62533997199995, 43.84939582800007],
              [-88.57299960499995, 43.76656712400006],
              [-88.46045322499998, 43.73294585800005],
              [-88.39507582999994, 43.78207346700003],
              [-88.33422715399996, 43.841949181000075],
              [-88.26389529699998, 43.883781630000044],
              [-88.26171217099994, 43.95878690500007],
              [-88.25436012199998, 44.04085874400005],
              [-88.13665456199999, 44.003267237000045],
              [-88.04759712699996, 44.00177966800004],
              [-87.97724235799996, 44.03271403600007],
              [-87.91264601899996, 44.03869804900006],
              [-87.85100620199995, 43.96251794800003],
              [-87.84031258699997, 43.84797273600003],
              [-87.77934997599993, 43.76104507100007],
              [-87.69970123099995, 43.65226923900008],
              [-87.59451333699997, 43.57506238600007],
              [-87.41895871099996, 43.54264457600004],
              [-87.19847646199997, 43.53030423300004],
              [-87.05535483399996, 43.54457143500008],
              [-86.90199607799997, 43.56552812900003],
              [-86.73246550099998, 43.61082922300005],
              [-86.59688342599998, 43.66046715300007],
              [-86.47311237099996, 43.75675903800004],
              [-86.41494068499998, 43.905016706000026],
              [-86.38487126299998, 43.99339418100004],
              [-86.33611529199999, 44.14190469500005],
              [-86.23094835399996, 44.23494796600005],
              [-86.07578505799995, 44.32618325100003],
              [-85.99546925899995, 44.409139733000075],
              [-85.93780993299998, 44.44997420000004],
              [-85.94529025199995, 44.48596854700003],
              [-85.88575853799995, 44.551719080000055],
              [-85.82903334099996, 44.64612264200008],
              [-85.67299230199995, 44.65817042300006],
              [-85.49721378799995, 44.66565292100006],
              [-85.37988257999996, 44.69311130300008],
              [-85.26070073999995, 44.74180747400004],
              [-85.20102381099997, 44.79647274300004],
              [-85.12731019099994, 44.896951657000045],
              [-85.07522771199996, 44.976883351000026],
              [-84.82164997499996, 47.579520486000035],
              [-90.67336377599997, 47.71242423500007],
              [-90.65116417499996, 47.70293454200004],
            ],
          ],
        },
        properties: {
          OBJECTID_1: 1,
          OBJECTID: 1,
          Years_Ago: 14600,
          SHAPE_Leng: 2202706.20984,
          Shape_Le_1: 25.0028099606,
          Shape_Area: 17.1995913109,
          filename: "14600.jpg",
        },
      }, ],
    },
    style: {
      color: "blue",
    }
  },

  glacier_3: {
    center: [45.5, -89.5],
    zoom: 7,
    label: "17000 years ago",
    description: "Glacier three description goes here...",
    shape: {
      type: "FeatureCollection",
      features: [{
        type: "Feature",
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [-90.80257177799996, 47.694422805000045],
              [-90.86222397199998, 47.665247442000066],
              [-90.91508604399996, 47.62484245700006],
              [-90.95803303899999, 47.58544825300004],
              [-91.01917862199997, 47.54492503300003],
              [-91.09271780999995, 47.49663293300006],
              [-91.13744776499999, 47.48572257300003],
              [-91.19432270499999, 47.453717991000076],
              [-91.22598803099999, 47.42671888800004],
              [-91.25327888599998, 47.39404483100003],
              [-91.29858830799998, 47.35449497500008],
              [-91.35488375299997, 47.30908341500003],
              [-91.41382942899997, 47.261706307000054],
              [-91.49191066199995, 47.20262235200005],
              [-91.56326114699999, 47.15786191900003],
              [-91.61665197199994, 47.12283520300008],
              [-91.64494317099997, 47.09005134100005],
              [-91.68031442299997, 47.061918510000055],
              [-91.73452409299995, 47.01444274000005],
              [-91.74858348099997, 46.94175084200003],
              [-91.73854830599998, 46.900235628000075],
              [-91.72864410799997, 46.86228889100005],
              [-91.70514887199994, 46.83287815500006],
              [-91.66600897199999, 46.80131027900006],
              [-91.62366569299996, 46.776917671000035],
              [-91.55026225899996, 46.75531549600004],
              [-91.46858503999994, 46.74567813800007],
              [-91.38377803899994, 46.747925758000065],
              [-91.24871820299995, 46.74947940000004],
              [-91.19708552899993, 46.76431757600005],
              [-91.14894001899995, 46.781478469000035],
              [-91.08834267399999, 46.78445186300007],
              [-91.00692035499998, 46.786387758000046],
              [-90.97908530999996, 46.78067668300008],
              [-90.94737340199998, 46.75118052900007],
              [-90.93838366699998, 46.73220616100008],
              [-90.94831208099998, 46.70593260000004],
              [-90.95989734799997, 46.67607254100005],
              [-91.00120538799996, 46.66500363200004],
              [-91.02850889499996, 46.64571269000004],
              [-91.05754397599998, 46.62758970900006],
              [-91.07281220699997, 46.61316088700005],
              [-91.09452456799994, 46.57604782900006],
              [-91.11295233699997, 46.54848696500005],
              [-91.11776169199999, 46.53058148500003],
              [-91.12399765899994, 46.498374786000056],
              [-91.12685495599999, 46.46977266600004],
              [-91.11093806599996, 46.449688397000045],
              [-91.08423164199996, 46.405892745000074],
              [-91.04970107799994, 46.400261948000036],
              [-91.00833934399998, 46.39706236200004],
              [-90.95158052599999, 46.39873937200008],
              [-90.91358681599996, 46.39071504300006],
              [-90.87046244599998, 46.383907855000075],
              [-90.81185063999999, 46.37600480700007],
              [-90.76383959199995, 46.38705097700006],
              [-90.72438110399997, 46.39564190900006],
              [-90.63847221899994, 46.40686916000004],
              [-90.56462655999997, 46.42273526000008],
              [-90.51134690599997, 46.432510584000056],
              [-90.45289127799998, 46.44347225900003],
              [-90.32730869399995, 46.46771218100008],
              [-90.26707800199995, 46.483346151000035],
              [-90.14297639499995, 46.48118746100005],
              [-89.84300789599996, 46.47969872700003],
              [-89.65732711399994, 46.40785826900003],
              [-89.46590880699995, 46.26901435500008],
              [-89.38473015499994, 46.15906824800004],
              [-89.37232217399998, 46.044697961000054],
              [-89.29895872499998, 45.89662691800004],
              [-89.19127953899994, 45.795896034000066],
              [-89.04288713099999, 45.713779739000074],
              [-88.81317766399997, 45.64494244800005],
              [-88.52326877299998, 45.56535339100003],
              [-88.34772919599999, 45.53913320500004],
              [-88.28172005799996, 45.481001443000025],
              [-88.24935543399994, 45.432878068000036],
              [-88.29265439599999, 45.34303229100004],
              [-88.51505546999994, 45.10321006100003],
              [-88.68092601499995, 44.90994226600003],
              [-88.83212689599998, 44.72580551000004],
              [-88.88282864799999, 44.521468026000036],
              [-88.93928291699996, 44.345738820000065],
              [-88.91597518599997, 44.16924722700003],
              [-88.90511613299998, 44.04050887900007],
              [-88.77686594499994, 43.85339730000004],
              [-88.63498640399996, 43.723149343000046],
              [-88.45317832499995, 43.63983570600004],
              [-88.30836892799994, 43.656842280000035],
              [-88.18115130199999, 43.74064944300005],
              [-88.10533528899998, 43.64412736300005],
              [-88.07694916099996, 43.50548020300005],
              [-88.01697621299996, 43.33769126900006],
              [-88.02053189599997, 43.22816265400007],
              [-87.97488779599996, 43.032002686000055],
              [-87.92574681699995, 42.754748824000046],
              [-87.89018209199998, 42.46818362000005],
              [-87.89013807499998, 42.277565752000044],
              [-87.84692496099996, 42.03848385400005],
              [-87.74604783999996, 41.817324159000066],
              [-87.58802798299996, 41.613950112000055],
              [-87.35004156799994, 41.532454906000055],
              [-87.03022367399996, 41.59135333200004],
              [-86.77141863699995, 41.68921014000006],
              [-86.51666584599997, 41.81518954100005],
              [-86.41223131899994, 41.97398477400003],
              [-86.29809079699999, 42.180014037000035],
              [-86.12804763999998, 42.445983640000065],
              [-86.00558320699997, 42.65141657300006],
              [-85.85659114999999, 43.04632439000005],
              [-85.84500492099994, 43.21741730100007],
              [-86.03504616299995, 43.40045063700006],
              [-85.91772016199997, 43.686927799000046],
              [-85.72568643499994, 43.89427499900006],
              [-85.70752393799995, 44.146079014000065],
              [-85.57577670099994, 44.226791743000035],
              [-85.33539704999998, 44.25055543500008],
              [-85.15006930999994, 44.24758344700007],
              [-84.83610884999996, 47.577689332000034],
              [-90.81976554599999, 47.700655631000075],
              [-90.80257177799996, 47.694422805000045],
            ],
          ],
        },
        properties: {
          OBJECTID_1: 1,
          OBJECTID: 2,
          Years_Ago: 17000,
          SHAPE_Leng: 2261336.18634,
          Shape_Le_1: 24.4337768448,
          Shape_Area: 21.6098467975,
          filename: "17000.jpg",
        },
      }, ],
    },
    style: {
      color: "#4daf4a",
    }
  }
};

// Create the L.geoJSON LAYERS to be later added to each map!
const overlays = Object.entries(glacier_map_Data).reduce((acc_obj, [key, data]) => {

  // Define the geoJSON layer instance
  const L_geoJSON = L.geoJSON(data.shape, {
    style: data.style
  });

  // Add click listener to layer
  L_geoJSON.on({
    click() {
      EL_panel.innerHTML = `<h2>${data.label}</h2><p>${data.description}</p>`;
    }
  });

  // Create the return Object:
  acc_obj[key] = {
    label: data.label,
    L_geoJSON
  };

  // Return the accumulator (see: MDN: Array.prototype.reduce() for more info)
  return acc_obj;
}, {});

// console.log(overlays); // See it to understand it!


// Maps initializator 
// Applays LeafLet to each map Element `EL`
const initMap = (EL) => {
  const id = EL.dataset.map; // gives back i.e: "glacier_1" 2, 3 etc...
  const data = glacier_map_Data[id];

  // Assign a LeafLet Map instance to a specific DOM element and set its view
  const L_map = L.map(EL).setView(data.center, data.zoom);
  L.tileLayer(L_basemapTile, L_basemapOptions).addTo(L_map);

  // Convert the 
  const overlayMaps = Object.values(overlays).reduce((acc_obj, data) => {
    acc_obj[data.label] = data.L_geoJSON
    return acc_obj;
  }, {});

  // Add control layers to map:
  L.control.layers(null, overlayMaps).addTo(L_map);

  // Make specific one "Active" (checked!) and visible on map:
  L_map.addLayer(overlays[id].L_geoJSON);
};

// Loop map elements in DOM and assign
var ELS_map = document.querySelectorAll("[data-map]");
ELS_map.forEach(initMap);
/*Stylesheet by Will P. Campbell,2021*/

body {
  background-color: #ececec;
}

[data-map] {
  height: 650px;
  width: 60%;
  border: 5px solid black;
  margin: 20px;
}

h1 {
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

#panel {
  position: fixed;
  right: 0;
  top: 0;
  border: 5px outset black;
  background-color: lightblue;
  text-align: center;
  width: 25%;
  height: auto;
  padding: 20px;
}
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />

<h1>WISCONSIN GLACIER TIME LAPSE</h1>

<!-- map data divs -->
<div data-map="glacier_1"></div>
<div data-map="glacier_2"></div>
<div data-map="glacier_3"></div>

<div id="panel"><b>Glacier Information Panel</b><br>
  <p>Use the checkbox and click on each glacier to learn more about them!</p>
</div>

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<script type="text/javascript" src="js/main.js"></script>

user_3839040
Related