Glacier maps

by wpc6707

HTML

<!DOCTYPE html>
<html lang="en">

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

    <!--put your external stylesheet links here-->
    <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="" />

    <!--[if IE<9]>
			<link rel="stylesheet" href="css/style.ie.css">
		<![endif]-->
  </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>




    <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>

    <!--put your initial page content here-->

    <!--you can also use this space for internal scripts or stylesheets;
		place these within <script> or <style> tags-->

    <!--put your external script links here-->

    <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>

    <script type="text/javascript" src="js/geojson.js"></script>



  </body>

</html>

CSS

/* 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: relative;
  right: 0;
  border: 5px outset black;
  background-color: lightblue;
  text-align: center;
  width: 25%;
  height: auto;
  padding: 20px;
  display: inline-block;

}

JavaScript

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

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,...