SunMaps/index.html at master · sofievargas/SunMaps · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Embedded Folium Map</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
        overflow: hidden;
        font-family: Arial, Helvetica, sans-serif; /* Sans-serif font for a clean look */
      }
      .map-container {
        position: relative;
        height: 100%;
        width: 100%;
      }
      iframe {
        width: 100%;
        height: 100%;
        border: none;
      }
      .side-menu {
        position: absolute;
        top: 100px; /* Moved up to be right under the zoom buttons */
        left: 10px; /* Positioned on the left side */
        width: 300px;
        height: calc(100% - 100px); /* Fill the remaining height */
        background-color: #f5f5dc; /* Beige background for a professional look */
        padding: 20px;
        box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
        overflow-y: auto; /* Scrollable menu */
        box-sizing: border-box;
        resize: horizontal; /* Resizable horizontally */
        min-width: 200px; /* Minimum width for the menu */
        max-width: 50%; /* Maximum width for the menu */
        z-index: 1000; /* Ensures the menu is above the map layers */
      }
      .tab {
        display: flex; /* Display the buttons side by side */
        justify-content: space-between; /* Add space between the buttons */
        margin-bottom: 15px;
      }
      .tab button {
        background-color: #d2b48c; /* Darker beige color for the buttons */
        width: 48%; /* Set button width to ensure they fit side by side */
        border: none;
        outline: none;
        cursor: pointer;
        padding: 10px;
        transition: 0.3s;
        font-size: 16px;
        font-family: Arial, Helvetica, sans-serif;
        border-radius: 4px;
      }
      .tab button:hover {
        background-color: #c3a384; /* Slightly darker on hover */
      }
      .tab button.active {
        background-color: #b39574; /* Even darker when active */
      }
      h1,
      h2 {
        margin-top: 0;
        font-family: Arial, Helvetica, sans-serif;
        color: #333;
      }
      p {
        line-height: 1.6;
        color: #666;
      }
    </style>
  </head>
  <body>
    <div class="map-container">
      <iframe src="lcz.html"></iframe>
      <div id="side-menu" class="side-menu">
        <h1>SunMaps</h1>
        <h2>Sustainable Insights for Phoenix Urban Planning</h2>
        <div class="tab">
          <button class="tablinks active" onclick="openTab(event, 'Info')">
            Climate Info
          </button>
          <button class="tablinks" onclick="openTab(event, 'Sources')">
            Cited Sources
          </button>
        </div>
        <div id="side-menu-content">
          <p>Click on a marker to see more information.</p>
        </div>
      </div>
    </div>

    <script>
      function openTab(evt, tabName) {
        if (tabName === "Info") {
          document.getElementById("side-menu-content").innerHTML =
            "<p>Click on a marker to see more information.</p>";
        } else if (tabName === "Sources") {
          fetch("citations.txt")
            .then((response) => response.text())
            .then((data) => {
              let formattedData = data
                .split("\n")
                .map((item) => `<li>${item}</li>`)
                .join("");
              document.getElementById("side-menu-content").innerHTML = `
                            <h2>Cited Sources</h2>
                            <ul>${formattedData}</ul>`;
            });
        }
        var tablinks = document.getElementsByClassName("tablinks");
        for (var i = 0; i < tablinks.length; i++) {
          tablinks[i].classList.remove("active");
        }
        evt.currentTarget.classList.add("active");
      }

      document.addEventListener("updateSideMenu", function (event) {
        document.getElementById("side-menu-content").innerHTML = event.detail;
      });
    </script>
  </body>
</html>