admin/map.viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test

Browse Source
This commit is contained in:
admin
2025-06-22 10:43:42 -06:00
commit ac7dd74f30
12 changed files with 6064 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
nocodb-map-viewer/app/public/index.html Normal file
View File

@@ -0,0 +1,133 @@
<!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()">&times;</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>