Hugging Face's logo

Spaces:
gauthamnairy
/
GeoToolsHub
Build error

App Files Community
GeoToolsHub
File size: 6,475 Bytes 
f70764d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
0784d15
 
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
127
128
129
130
131
132
133
134
135
136
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ground Elevation Calculator - GeoTools Hub</title>
    
    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" />
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
    
    <!-- Google Fonts -->
    <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@300;400;500;600;700&family=Montserrat:wght@700;800;900&display=swap" rel="stylesheet">
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="/frontend/styles.css">
</head>
<body>
    <div class="app-container">
        <!-- Header -->
        <header>
            <div class="header-content">
                <div class="title-section">
                    <h1 class="main-title">Ground Elevation Calculator</h1>
                    <p class="subtitle">Powered by GeoTools Hub</p>
                </div>
                <a href="index.html" class="nav-link home-btn"><i class="fas fa-home"></i> Home</a>
            </div>
        </header>
        
        <!-- Main Content -->
        <main>
            <div class="content-wrapper">
                <!-- Map Panel -->
                <div class="map-panel">
                    <h2 class="section-title">Interactive Map</h2>
                    <div id="map"></div>
                </div>
                
                <!-- Input Panel -->
                <div class="input-panel">
                    <div class="coordinates-section">
                        <div class="section-header">
                            <h2 class="section-title">Coordinates</h2>
                            <button id="add-coords" class="btn-action">
                                <i class="fas fa-plus"></i> Add Coordinate
                            </button>
                        </div>
                        
                        <div id="coordinates-container">
                            <!-- Initial coordinate input -->
                            <div class="coordinate-group" data-index="0">
                                <div class="coord-header">
                                    <h3>Point 1</h3>
                                    <button class="remove-coord" title="Remove" disabled>
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                                <div class="form-row">
                                    <div class="form-group">
                                        <label for="latitude-0">Latitude</label>
                                        <input type="number" id="latitude-0" class="latitude-input" step="any" placeholder="e.g. 37.7749">
                                    </div>
                                    <div class="form-group">
                                        <label for="longitude-0">Longitude</label>
                                        <input type="number" id="longitude-0" class="longitude-input" step="any" placeholder="e.g. -122.4194">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="crs-0">Coordinate Reference System</label>
                                    <select id="crs-0" class="crs-select">
                                        <!-- Will be populated by JavaScript -->
                                    </select>
                                </div>
                                <div class="elevation-result hidden">
                                    <div class="result-badge">
                                        <div class="elevation-metrics">
                                            <div class="metric">
                                                <span class="value meters">0</span>
                                                <span class="unit">meters</span>
                                            </div>
                                            <div class="metric">
                                                <span class="value feet">0</span>
                                                <span class="unit">feet</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="coord-detail">
                                        <small>WGS84: <span class="wgs84-coords">--</span></small>
                                        <small>Original: <span class="original-coords">--</span></small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <button id="calculate-all" class="btn-primary">
                            <i class="fas fa-calculator"></i> Calculate All Elevations
                        </button>
                    </div>
                    
                    <!-- Results Section -->
                    <div id="results-container" class="hidden">
                        <h2 class="section-title">Results</h2>
                        <div id="elevation-results">
                            <!-- Results will be populated here by JavaScript -->
                        </div>
                    </div>
                </div>
            </div>
        </main>
        
        <!-- Footer -->
        <footer>
            <p>&copy; 2025 GeoTools Hub | <a href="index.html">Back to Tools</a></p>
        </footer>
    </div>
    
    <!-- Loading Overlay -->
    <div id="loading-overlay" class="hidden">
        <div class="loader"></div>
    </div>
    
    <!-- Leaflet JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
    
    <!-- ESRI Leaflet plugins -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/esri-leaflet/3.0.10/esri-leaflet.js"></script>
    
    <!-- Custom JS -->
    <script src="/frontend/script.js"></script>
</body>
</html>