GEN-Database-Map/index.html at main · notAidven/GEN-Database-Map · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>U.S. Geothermal Systems Database</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>U.S. Geothermal Systems Database Map</h1>
            <p class="subtitle">Interactive map of geothermal heating and cooling projects across the United States</p>
        </header>

        <div class="controls">
            <div class="filter-section">
                <label for="system-type">Filter by System Type:</label>
                <select id="system-type">
                    <option value="all">All Systems</option>
                    <option value="gshp">Individual GSHP</option>
                    <option value="4gdhc">4th Gen District H&C</option>
                    <option value="5gdhc">5th Gen District H&C</option>
                </select>
            </div>

            <div class="filter-section">
                <label for="status-filter">Filter by Status:</label>
                <select id="status-filter">
                    <option value="all">All Statuses</option>
                    <option value="operating">Operating</option>
                    <option value="construction">Under Construction</option>
                    <option value="design">Design Phase</option>
                    <option value="feasibility">Feasibility / Pre-Construction</option>
                    <option value="decommissioned">Decommissioned</option>
                    <option value="unknown">Unknown</option>
                </select>
            </div>

            <div class="search-section">
                <label for="search">Search:</label>
                <input type="text" id="search" placeholder="Search by location or project name...">
            </div>
        </div>

        <div class="main-content" id="main-content">
            <div id="map"></div>
            <div class="resize-handle" id="resize-handle"></div>
            <div id="info-panel" class="info-panel">
                <div class="info-placeholder">
                    <h3>Welcome to the Geothermal Systems Database Map!</h3>
                    <p>Click on any marker on the map to view detailed information about that geothermal project.</p>

                    <div class="policy-highlight">
                        <h4>Why Geothermal Energy?</h4>
                        <div class="policy-points">
                            <div class="policy-point">
                                <div>
                                    <strong>• Decarbonizing Buildings</strong>
                                    <p>Buildings account for ~40% of U.S. energy consumption. Geothermal systems can reduce heating/cooling emissions by 50-80%, helping meet climate goals.</p>
                                </div>
                            </div>
                            <div class="policy-point">
                                <div>
                                    <strong>• Long-Term Cost Savings</strong>
                                    <p>Despite higher upfront costs, geothermal systems typically deliver 25-50% energy savings annually and last 25-50 years with minimal maintenance.</p>
                                </div>
                            </div>
                            <div class="policy-point">
                                <div>
                                    <strong>• Job Creation & Workforce Transition</strong>
                                    <p>Geothermal installation creates local jobs and offers a pathway for gas utility workers to transition to clean energy careers.</p>
                                </div>
                            </div>
                            <div class="policy-point">
                                <div>
                                    <strong>• Grid Resilience</strong>
                                    <p>Geothermal reduces peak electricity demand, easing strain on the grid during extreme weather when heating/cooling needs spike.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="info-section glossary">
                        <h4>Key Terms Explained:</h4>
                        <dl>
                            <dt>Heat Pump</dt>
                            <dd>A device that moves heat from one place to another (like a refrigerator in reverse). It can both heat and cool buildings using much less energy than traditional furnaces or AC units.</dd>
                            <dt>Borehole</dt>
                            <dd>A narrow hole drilled into the ground (typically 200-500 feet deep) where pipes are installed to exchange heat with the earth.</dd>
                            <dt>Thermal Resources</dt>
                            <dd>The underground heat source or sink - the earth maintains a stable temperature year-round, making it an efficient source for heating in winter and cooling in summer.</dd>
                            <dt>Distribution Network</dt>
                            <dd>The system of underground pipes that carries heated or cooled water between the central system and connected buildings.</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <footer>
            <p>The database map is illustrative, and the following examples were gathered from publicly available documents. There may be other individual GSHPs, 4GDH, and 5GDCH systems that are not included in the database map. If interested in adding additional projects, feel free to contact the clinic at <a href="mailto:renewable-energy-team@mit.edu">renewable-energy-team@mit.edu</a>.</p>
            <p>Data source: MIT Renewable Energy Clinic | Last updated: January 2026</p>
            <p style="font-size: 0.75em; color: #94a3b8; margin-top: 8px;">Version 2.0 - Modern UI Update</p>
        </footer>
    </div>

    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="data.js"></script>
    <script src="app.js"></script>
</body>
</html>