134 lines
5.6 KiB
HTML
134 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="Interactive map viewer for NocoDB location data">
|
||
<title>NocoDB Map Viewer</title>
|
||
|
||
<!-- Leaflet CSS -->
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
||
crossorigin="" />
|
||
|
||
<!-- Custom CSS -->
|
||
<link rel="stylesheet" href="css/style.css">
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<!-- Header -->
|
||
<header class="header">
|
||
<h1>Location Map Viewer</h1>
|
||
<div class="header-actions">
|
||
<button id="refresh-btn" class="btn btn-secondary" title="Refresh locations">
|
||
🔄 Refresh
|
||
</button>
|
||
<span id="location-count" class="location-count">Loading...</span>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Map Container -->
|
||
<div id="map-container">
|
||
<div id="map"></div>
|
||
|
||
<!-- Map Controls -->
|
||
<div class="map-controls">
|
||
<button id="geolocate-btn" class="btn btn-primary" title="Find my location">
|
||
📍 My Location
|
||
</button>
|
||
<button id="add-location-btn" class="btn btn-success" title="Add location at map center">
|
||
➕ Add Location Here
|
||
</button>
|
||
<button id="fullscreen-btn" class="btn btn-secondary" title="Toggle fullscreen">
|
||
⛶ Fullscreen
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Crosshair for adding locations -->
|
||
<div id="crosshair" class="crosshair hidden">
|
||
<div class="crosshair-x"></div>
|
||
<div class="crosshair-y"></div>
|
||
<div class="crosshair-info">Click "Add Location Here" to save this point</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Status Messages -->
|
||
<div id="status-container" class="status-container"></div>
|
||
|
||
<!-- Add Location Modal -->
|
||
<div id="add-modal" class="modal hidden">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>Add New Location</h2>
|
||
<button class="modal-close" onclick="closeModal()">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="location-form">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="first-name">First Name</label>
|
||
<input type="text" id="first-name" name="First Name"
|
||
placeholder="Enter first name">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="last-name">Last Name</label>
|
||
<input type="text" id="last-name" name="Last Name"
|
||
placeholder="Enter last name">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="location-email">Email</label>
|
||
<input type="email" id="location-email" name="Email"
|
||
placeholder="Enter email address">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="location-unit">Unit Number</label>
|
||
<input type="text" id="location-unit" name="Unit Number"
|
||
placeholder="Enter unit number">
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="location-lat">Latitude</label>
|
||
<input type="number" id="location-lat" name="latitude"
|
||
step="0.00000001" readonly>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="location-lng">Longitude</label>
|
||
<input type="number" id="location-lng" name="longitude"
|
||
step="0.00000001" readonly>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-secondary" onclick="closeModal()">
|
||
Cancel
|
||
</button>
|
||
<button type="submit" class="btn btn-primary">
|
||
Save Location
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Loading Overlay -->
|
||
<div id="loading" class="loading-overlay">
|
||
<div class="spinner"></div>
|
||
<p>Loading map...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Leaflet JS -->
|
||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
||
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
|
||
crossorigin=""></script>
|
||
|
||
<!-- Application JavaScript -->
|
||
<script src="js/map.js"></script>
|
||
</body>
|
||
</html>
|