OpenMapViz/index.html at main · MCF2-Lab/OpenMapViz · 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
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />


    <link rel="stylesheet" href="styles.css">
    <!--Leaflet CSS file-->
    <link rel ="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
    <!--Leaflet Javascript file -->
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" defer>
    </script>

     <!-- Papa Parse library for CSV file parsing -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/chroma-js@2.4.2/chroma.min.js"></script>
     <script src= "data.js" defer></script>

    <title>Interactive Map Data Visualizer</title>

</head>
<body>


    <header class="topbar">
        <div class="bar">
            <div class="bar-title">Interactive Map Data Visualizer</div>
            <div class="bar-subtitle">Client-only • Multi-layer • CSV points • No storage</div>
        </div>
    </header>

    <main class="content">
        <div class="sidebar">

            <div class="one-section">
                <h2>Upload data</h2>

                <div class="choose-file">
                <input type="file" id="fileInput" accept=".csv">
                <div id="message"></div>
                <pre id="fileContent"></pre>
            </div>

            <div class="info">
                <p><b>CSV (points)</b>: must include <code>lat</code>, <code>lon</code>, and a numeric field like <code>sample_count</code>. You can load multiple CSVs.</p>
                <p class="small">All parsing happens in your browser. Nothing is uploaded or stored.</p>
            </div>

        </div>

        <div class="third-section">
            <h2>Legend</h2>
            <div id="legend" class="legend"></div>
        </div>

</div>
            <div class="map-container">
                <div id= "map"></div>
            </div>
        </div>
    </main>

</body>
</html>