CellMap/index.html at main · walker93/CellMap · 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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Cell Map Designer</title>
    <meta charset="utf-8">
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.css' rel='stylesheet' />
    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.3.0/mapbox-gl-draw.js"></script>
    <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.3.0/mapbox-gl-draw.css"
        type="text/css">
    <script
        src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js"></script>
    <link rel="stylesheet"
        href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css"
        type="text/css">
    <link href='https://watergis.github.io/mapbox-gl-export/mapbox-gl-export.css' rel='stylesheet' />
    <script src="https://watergis.github.io/mapbox-gl-export/mapbox-gl-export.js"></script>
    <script src="https://kit.fontawesome.com/1f687205b2.js" crossorigin="anonymous"></script>
    <script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/12.4.2/math.js"></script>
    <script src="lib/tokml.js"></script>
    <script src="lib/papaparse.min.js"></script>
    <script src="config.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.6.0/jszip.min.js"></script>
    <link rel="stylesheet" href="lib/tom-select.default.min.css">
    <script src="lib/tom-select.complete.min.js"></script>


    <link rel="stylesheet" href="style.css" type="text/css">

    <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
    <link rel="manifest" href="favicon/site.webmanifest">
</head>

<body>
    <header class="line">
        <img id="logo" src="images/Logo.png">
        <h1>Cell Map Designer</h1>
    </header>
    <main>
        <div id="map-container">
            <div id="map"></div>
        </div>
        <div class="resizer" id="dragMe"></div>
        <div id="controls">
            <div id="inputs">
                <div id="cell-form">

                    <div class="line">
                        <label for="inp_name">Name:</label>
                        <input type="text" id="inp_name" placeholder="Enter cell name">
                    </div>
                    <div class="line">
                        <label for="inp_desc">Description:</label>
                        <input type="text" id="inp_desc" placeholder="Description">
                    </div>
                    <div class="line">
                        <label for="inp_lat">Lat:</label>
                        <input type="text" id="inp_lat" placeholder="Latitude">
                    </div>
                    <div class="line">
                        <label for="inp_lon">Long:</label>
                        <input type="text" id="inp_lon" placeholder="Longitude">
                    </div>
                    <div class="line">
                        <label for="inp_radius">Radius:</label>
                        <input type="number" id="inp_radius" placeholder="Radius in km" min="0.25" max="10" step="0.25"
                            value="3">
                    </div>
                    <div class="line">
                        <label for="angle1">Start angle:</label>
                        <input type="number" id="angle1" placeholder="Angle min" min="0" max="360" value="0">
                    </div>
                    <div class="line">
                        <label for="angle2">End angle:</label>
                        <input type="number" id="angle2" placeholder="Angle max" min="0" max="360" value="360">
                    </div>
                    <div class="line">
                        <label for="inp_alpha">Trasparency:</label>
                        <input type="number" id="inp_alpha" placeholder="Trasparency" min="0.1" max="1" step="0.01"
                            value="0.2">
                    </div>
                    <div class="line">
                        <label for="inp_fill">Color:</label>
                        <input type="color" id="inp_fill" placeholder="Colore" value="#FF0000">
                    </div>
                    <div class="line">
                        <label for="inp_icon">Icon:</label>
                        <select id="inp_icon" placeholder="Select icon" value="" disabled>
                            <option value="" selected>Choose an icon</option>
                        </select>
                    </div>
                    <input type="hidden" id="feature-id" value="">
                    <button class="form-btn" onclick="closeForm()">Annulla</button>
                    <button id="addbtn" class="form-btn" style="display: inline-block;"
                        onclick="aggiungiCella()">Aggiungi</button>
                    <button id="savebtn" class="form-btn" style="display: none;"
                        onclick="modificaCella()">Salva</button>
                </div>
            </div>
            <div id="buttons">
                <button id="add" onclick="openForm(null)"><i class="fa-sharp fa-solid fa-plus"></i> Add Cell</button>
                <button id="import" onclick="openfile()"><i class="fa-sharp fa-solid fa-file-csv"></i> Add from
                    CSV</button>
                <button id="savejson" onclick="scaricageojson()"><i class="fa-sharp fa-solid fa-file-export"></i> Export
                    GeoJson</button>
                <button id="importjson" onclick="importjson()"><i class="fa-sharp fa-solid fa-file-import"></i> Import
                    GeoJson</button>
                <button id="savekml" onclick="scaricaKML()"><i class="fa-sharp fa-solid fa-file-arrow-down"></i>
                    Generate KML</button>
                <button id="addoverlay" onclick="processKMZ()"><i class="fa-sharp fa-solid fa-file-arrow-up"></i>
                    Add Overlay</button>
                <button id="deleteall" onclick="deleteAll()"><i class="fa-sharp fa-solid fa-trash-can"></i> Delete
                    All</button>
            </div>
            <div id="elements">
                <div id="table" class="tab">
                    <input type="checkbox" name="accordion-1" id="cb1" checked>
                    <label for="cb1" class="tab__label">Cell Towers</label>
                    <div class="tab__content">
                        <div id="features">

                        </div>
                    </div>
                </div>
                <div id="poi-table" class="tab">
                    <input type="checkbox" name="accordion-2" id="cb2">
                    <label for="cb2" class="tab__label">Points of interest:</label>
                    <div class="tab__content">
                        <div id="poi">
                        </div>
                    </div>
                </div>
                <div id="over-table" class="tab">
                    <input type="checkbox" name="accordion-3" id="cb3">
                    <label for="cb3" class="tab__label">Overlays</label>
                    <div class="tab__content">
                        <div id="overlays">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <footer>
        <p>© 2024 Cell Map Designer by <a class="link" href="https://alexcortinovis.tech" target="_blank">Alex
                Cortinovis</a></p>
                <p>Icons by Maps Icons Collection <a class="link" href="https://mapicons.mapsmarker.com" target="_blank">https://mapicons.mapsmarker.com</a></p>
        <script src="new_script.js"></script>
        <script src="resizer.js"></script>
    </footer>
</body>

</html>