-
Notifications
You must be signed in to change notification settings - Fork 0
/
photomap.html
138 lines (131 loc) · 8.25 KB
/
photomap.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Photo Map Creator</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Nathan Crews">
<meta name="description" content="drag and drop photos onto 2D or 3D map to geo-locate">
<meta name="google-site-verification" content="CMKPT92L4h6JYyYqIw0VBlumjHMl5_EwVO82AzemNNQ" />
<meta name="keywords"
content="client-side, image rendering, 2D, 3D, map, geolocate, GPS, drone, survey, HTML, CSS, JavaScript">
<meta name="keywords"
content="cesium, leaflet, geospatial, GIS, EXIF, photo, mapping, photogrammetry, civil engineer, land development">
<meta name="keywords" content="arial, imagery, memory, memories, where, was, picture, taken, photo, jpeg, jpg, png">
<meta name="keywords"
content="java, script, html, css, programming, application, nathan, crews, software, development">
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v3.6.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.6.0/mapbox-gl.js"></script>
<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=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="styles/fonts.css" />
<link rel="stylesheet" href="styles/photomap.css" />
<link rel="stylesheet" href="styles/settings.css" />
<link rel="stylesheet" href="styles/message.css" />
<link rel="stylesheet" href="styles/menubar.css" />
<script src="./src/geojson/geojson.min.js" type="module" defer></script>
<script src="./src/photomap-app.js" type="module" defer></script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2111887613548752"
crossorigin="anonymous"></script>
</head>
<body class="map-body">
<div style="margin-top:1rem">
<div class="button" data-page="about" title="About the app...">
<a href="https://apps.nathancrews.com" target="_blank">About</a>
</div>
<div class="button" id="help-btn" title="Watch Help Video">Help</div>
</div>
<header id="loading-header" name="loading-header" class="map-header">
<h1 class="map-h1">Photo Map Creator: Drop photos on map or choose</h1>
<div class="menu-controls">
<img id="menu-button-home" title="Show Map Menu" alt="Map Menu" src="images/menu.svg"
class="menu-button menu-button-home" />
<div id="menu-bar-1" class="menu-bar">
<img id="settings-button" title="Edit Settings" alt="Map Settings" src="images/settings.png"
class="menu-button menu-settings-button" />
<img id="show-2d-map" title="Zoom to photos on 2D Map" alt="Show 2D Map" src="images/map2d.svg"
class="menu-button menu-button-2d" />
<img id="show-3d-map" title="Zoom to photos on 3D Map" alt="Show 3D Map" src="images/map3d.svg"
class="menu-button menu-button-3d" />
<img id="reset-map" title="Remove all photos from Map" alt="Reset Map" src="images/erase.png"
class="menu-button menu-erase-button" />
</div>
<div id="menu-bar-2" class="menu-bar">
<input id="upload-files" class="menu-button menu-file-upload-button map-drop-zone__input"
title="Pick photos" type="file" name="upload-files" multiple="true">
</div>
<div id="menu-bar-3" class="menu-bar">
<a id="download-map-a" download="photoMap.geojson"><img id="download-map" title="Download Map File"
alt="Download Map File" src="images/download.svg" class="menu-button" /></a>
<a><img id="share-map" title="Create Map Link Share" alt="Create Map Link Share" src="images/share.svg"
class="menu-button" /></a>
</div>
<button id="submit-button" class="map-drop-submit-button" type="submit" hidden="true"></button>
</div>
<img id="loading-image" class="map-loading-image" name="loading-image" src="images/loading.gif" />
<!-- Modal message dialog -->
<dialog class="message-modal message-modal-hide">
<form class="message-dialog">
<div class="message-text"></div>
<div class="message-div"></div>
</form>
<div class="message-button-bar">
<button id="ok" class="message-button-ok" type="button">Ok</button>
<button id="cancel" class="message-button-cancel" type="button">Cancel</button>
</div>
</dialog>
<!-- Modal settings dialog -->
<form id="settings-modal" class="settings-modal settings-modal-hide">
<fieldset id="settings-form-fieldset" class="settings-form-fieldset">
<legend id="settings-legend" class="settings-legend">Map Settings</legend>
<div class="settings-section">
<label for="map-icon-selector" class="settings-form-input-label">2D icon:</label>
<select id="settings-map-icon-selector" class="settings-map-icon-selector" title="Mapping Icon">
<option value="thumbnail">Image Thumbnail</option>
<option value="drone2d">Drone</option>
</select>
<img id="settings-icon-2d" class="settings-icon-2d" src="images/image-thumb.png" />
</div>
<div class="settings-section">
<label id="settings-map-name-label" for="map-name" class="settings-form-input-label">Map
Name:</label>
<input id="settings-map-name" value="photoMap" type="text" title="Map Name"
class="map-menu-button settings-form-input-text">
</div>
</fieldset>
<span class="settings-close">×</span>
</form>
<form id="uploadForm" method="post" enctype="multipart/form-data" action="cgi-bin/ncupload.cgi" target="results"
class="map-form-input" class="map-form-input" hidden="true">
<input id="file" type="file" name="file" class="map-drop-zone__input map-menu-button map-file-upload-button"
multiple="true" accept=".geojson" hidden="true">
</div>
<button id="submit-button" class="map-drop-submit-button" name="submit-button" type="submit"
hidden="true">Upload</button>
<input id="directory" name="directory" value="" type="text" class="map-menu-button map-form-input-text">
<input id="maxFilesPerRequest" name="maxFilesPerRequest" hidden="true" value="50" />
<input id="redirectCGI" name="redirectCGI" hidden="true"
value="photomap-loader.js?dir=%s&response_type=json" />
<input id="fileTypePathMap" name="fileTypePathMap" hidden="true" value="*=.geojson" />
<input id="basePathMap" name="basePathMap" hidden="true" value="uploads" />
</form>
</header>
<div id="map2d" class="map-drop-zone map-base"></div>
<div id="map3d" class="map-drop-zone map-base"></div>
<!-- Cloudflare Web Analytics -->
<script defer src='https://static.cloudflareinsights.com/beacon.min.js'
data-cf-beacon='{"token": "e2b26c1669c44cc08b9db6bcd2ae3c83"}'>
</script><!-- End Cloudflare Web Analytics -->
</body>
</html>