GeoJSON viewer overhaul
This commit is contained in:
Nik Verweel
parent
9e0534cb70
commit
7c55b38954
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -75,3 +75,5 @@ renv/staging/
|
||||||
.idea/
|
.idea/
|
||||||
.vscode/
|
.vscode/
|
||||||
|
|
||||||
|
# Env files
|
||||||
|
.env
|
||||||
|
|
@ -5,6 +5,7 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>SmartCane Data Validation Tool</title>
|
<title>SmartCane Data Validation Tool</title>
|
||||||
<link rel="stylesheet" href="../theme.css">
|
<link rel="stylesheet" href="../theme.css">
|
||||||
|
<link rel="icon" type="image/x-icon" href="../res/check.png">
|
||||||
<style>
|
<style>
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -30,22 +31,6 @@
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-btn {
|
|
||||||
background: rgba(255,255,255,0.2);
|
|
||||||
color: white;
|
|
||||||
border: 1px solid rgba(255,255,255,0.3);
|
|
||||||
padding: 8px 12px;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
transition: background 0.3s ease;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-btn:hover {
|
|
||||||
background: rgba(255,255,255,0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
header h1 {
|
header h1 {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
|
||||||
518
webapps/geojson_viewer/index.html
Normal file
518
webapps/geojson_viewer/index.html
Normal file
|
|
@ -0,0 +1,518 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>GeoJSON Viewer</title>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" />
|
||||||
|
<link rel="stylesheet" href="../theme.css">
|
||||||
|
<link rel="icon" type="image/x-icon" href="../res/pin.png">
|
||||||
|
<style>
|
||||||
|
/* Layout styling adapted from sugar_mill_locator to match theme */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
background: #faf8f3;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header matches the locator tool */
|
||||||
|
header {
|
||||||
|
background: linear-gradient(135deg, var(--sc-primary) 0%, var(--sc-primary-light) 100%);
|
||||||
|
color: white;
|
||||||
|
padding: 15px 20px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0;
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-controls {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main Container */
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
height: calc(100vh - 60px);
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Map takes remaining space */
|
||||||
|
#map {
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
background: #e0e0e0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sidebar Panel styling */
|
||||||
|
.panel {
|
||||||
|
width: 360px;
|
||||||
|
background: var(--sc-light);
|
||||||
|
border-left: 1px solid var(--sc-border);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: -2px 0 8px rgba(0,0,0,0.08);
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-header {
|
||||||
|
background: linear-gradient(135deg, var(--sc-primary) 0%, var(--sc-primary-light) 100%);
|
||||||
|
color: white;
|
||||||
|
padding: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 14px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-content {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 15px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-section {
|
||||||
|
background: white;
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid var(--sc-border);
|
||||||
|
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--sc-text);
|
||||||
|
margin-bottom: 12px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* File Input Styling */
|
||||||
|
.file-input-wrapper {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-input-label {
|
||||||
|
display: block;
|
||||||
|
padding: 12px;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border: 2px dashed var(--sc-primary-light);
|
||||||
|
border-radius: 6px;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--sc-primary);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 13px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-input-label:hover {
|
||||||
|
background: #eef7f6;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="file"] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-name {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--sc-text-muted);
|
||||||
|
margin-top: 5px;
|
||||||
|
text-align: center;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Stats & Summary */
|
||||||
|
.stat-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 13px;
|
||||||
|
padding: 6px 0;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item:last-child { border-bottom: none; }
|
||||||
|
|
||||||
|
.stat-label { color: var(--sc-text-muted); }
|
||||||
|
.stat-value { font-weight: 600; color: var(--sc-text); }
|
||||||
|
|
||||||
|
/* Feature List */
|
||||||
|
.features-list {
|
||||||
|
max-height: 200px;
|
||||||
|
overflow-y: auto;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-item {
|
||||||
|
padding: 8px 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-item:hover { background: #f5f5f5; }
|
||||||
|
.feature-item.active {
|
||||||
|
background: var(--sc-primary-light);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Buttons */
|
||||||
|
.btn-group {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 8px 12px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 13px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Use theme colors via variables where possible, or match hex */
|
||||||
|
.btn-primary { background: var(--sc-primary); color: white; }
|
||||||
|
.btn-primary:hover { background: var(--sc-primary-light); }
|
||||||
|
|
||||||
|
.btn-secondary { background: #f0f0f0; color: #333; border: 1px solid #ddd; }
|
||||||
|
.btn-secondary:hover { background: #e0e0e0; }
|
||||||
|
|
||||||
|
.btn-danger { background: var(--sc-danger); color: white; }
|
||||||
|
.btn-danger:hover { background: #c0392b; }
|
||||||
|
|
||||||
|
/* Map Controls (Satellite Toggle) */
|
||||||
|
.map-toggle-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
background: rgba(255,255,255,0.2);
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modal Styling (Matching Locator) */
|
||||||
|
.modal {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0,0,0,0.5);
|
||||||
|
z-index: 2000;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal.active { display: flex; }
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
width: 90%;
|
||||||
|
max-width: 500px;
|
||||||
|
max-height: 85vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
background: linear-gradient(135deg, var(--sc-primary) 0%, var(--sc-primary-light) 100%);
|
||||||
|
color: white;
|
||||||
|
padding: 15px 20px;
|
||||||
|
border-radius: 8px 8px 0 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header h2 { font-size: 16px; margin: 0; }
|
||||||
|
|
||||||
|
.modal-body {
|
||||||
|
padding: 20px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-property {
|
||||||
|
display: flex; /* Enables side-by-side layout */
|
||||||
|
align-items: baseline;
|
||||||
|
padding: 8px 0;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-property:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-property-key {
|
||||||
|
flex: 0 0 40%; /* First column: fixed 40% width */
|
||||||
|
font-weight: 700; /* Bold text */
|
||||||
|
color: var(--sc-primary);
|
||||||
|
padding-right: 15px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-property-value {
|
||||||
|
flex: 1; /* Second column: takes remaining space */
|
||||||
|
color: #333;
|
||||||
|
word-break: break-word;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
font-size: 24px;
|
||||||
|
padding: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 0.8;
|
||||||
|
flex: 0;
|
||||||
|
}
|
||||||
|
.close-btn:hover { opacity: 1; }
|
||||||
|
|
||||||
|
/* Property Table in Modal/Sidebar */
|
||||||
|
.property-row {
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
padding: 8px 0;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.property-key { font-weight: 600; color: var(--sc-primary); display: block; margin-bottom: 2px; }
|
||||||
|
.property-value { color: #333; word-break: break-word; }
|
||||||
|
|
||||||
|
/* Alert Messages */
|
||||||
|
.alert {
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-size: 12px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.alert.active { display: block; }
|
||||||
|
.alert-error { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }
|
||||||
|
.alert-success { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
|
||||||
|
|
||||||
|
/* Search Input */
|
||||||
|
.search-input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px;
|
||||||
|
border: 1px solid var(--sc-border);
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.search-input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--sc-primary);
|
||||||
|
box-shadow: 0 0 0 2px rgba(42, 171, 149, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Attribute Table */
|
||||||
|
.table-wrapper {
|
||||||
|
overflow-x: auto;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.attribute-table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.attribute-table th {
|
||||||
|
background: #f8f9fa;
|
||||||
|
text-align: left;
|
||||||
|
padding: 8px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--sc-text);
|
||||||
|
border-bottom: 2px solid #eee;
|
||||||
|
}
|
||||||
|
.attribute-table td {
|
||||||
|
padding: 8px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
color: var(--sc-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scrollbar Styling */
|
||||||
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||||
|
::-webkit-scrollbar-track { background: #f1f1f1; }
|
||||||
|
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
|
||||||
|
::-webkit-scrollbar-thumb:hover { background: #bbb; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
if (sessionStorage.getItem('authenticated') !== 'true') {
|
||||||
|
window.location.href = '../login.html';
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<button class="back-btn" onclick="window.location.href='../';" title="Back to main tools">← Back</button>
|
||||||
|
<h1>📍 GeoJSON Viewer</h1>
|
||||||
|
<div class="header-controls">
|
||||||
|
<label class="map-toggle-wrapper" style="cursor: pointer;">
|
||||||
|
<input type="checkbox" id="mapToggle">
|
||||||
|
<span>🛰️ Satellite</span>
|
||||||
|
</label>
|
||||||
|
<label class="map-toggle-wrapper" style="cursor: pointer;">
|
||||||
|
<input type="checkbox" id="labelsToggle">
|
||||||
|
<span>Labels</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div id="map"></div>
|
||||||
|
|
||||||
|
<div class="panel">
|
||||||
|
<div class="panel-header">Controls & Data</div>
|
||||||
|
|
||||||
|
<div class="panel-content">
|
||||||
|
<div class="alert alert-error" id="errorMessage"></div>
|
||||||
|
<div class="alert alert-success" id="successMessage"></div>
|
||||||
|
|
||||||
|
<div class="panel-section">
|
||||||
|
<div class="section-title">📁 Upload File</div>
|
||||||
|
<div class="file-input-wrapper">
|
||||||
|
<label for="geojsonFile" class="file-input-label">
|
||||||
|
Choose GeoJSON File
|
||||||
|
</label>
|
||||||
|
<input type="file" id="geojsonFile" accept=".geojson,.json" />
|
||||||
|
<div class="file-name" id="fileName">No file selected</div>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group">
|
||||||
|
<button id="clearBtn" class="btn-secondary">Clear</button>
|
||||||
|
<button id="downloadBtn" class="btn-primary" style="display: none;">Download</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-section" id="summarySection" style="display: none;">
|
||||||
|
<div class="section-title">📊 Project Summary</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-label">Client:</span>
|
||||||
|
<span class="stat-value" id="clientName">-</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-label">Fields:</span>
|
||||||
|
<span class="stat-value" id="totalFields">0</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-label">Area (ha):</span>
|
||||||
|
<span class="stat-value" id="totalHectares">0</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-label">Area (ac):</span>
|
||||||
|
<span class="stat-value" id="totalAcres">0</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-section" id="statsSection" style="display: none;">
|
||||||
|
<div class="section-title">ℹ️ Data Stats</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-label">Features:</span>
|
||||||
|
<span class="stat-value" id="featureCount">0</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-label">Type:</span>
|
||||||
|
<span class="stat-value" id="geomType">-</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-label">Bounds:</span>
|
||||||
|
<span class="stat-value" id="bounds">-</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-section" id="featuresSection" style="display: none;">
|
||||||
|
<div class="section-title">🗺️ Features</div>
|
||||||
|
<div style="margin-bottom: 10px;">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="featureSearch"
|
||||||
|
class="search-input"
|
||||||
|
placeholder="Search by code..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="features-list" id="featuresList"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-section" id="propertiesSection" style="display: none;">
|
||||||
|
<div class="section-title">📋 Selected Properties</div>
|
||||||
|
<div id="propertiesContent" style="font-size: 13px; color: #666;">
|
||||||
|
Select a feature to view details
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-section" id="tableSection" style="display: none;">
|
||||||
|
<div class="section-title">📋 Data Table</div>
|
||||||
|
<div class="table-wrapper">
|
||||||
|
<table class="attribute-table" id="attributeTable">
|
||||||
|
<thead><tr id="tableHeader"></tr></thead>
|
||||||
|
<tbody id="tableBody"></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal" id="featureModal">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h2 id="modalTitle">Feature Details</h2>
|
||||||
|
<button class="close-btn" onclick="closeFeatureModal()">×</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body" id="modalBody">
|
||||||
|
</div>
|
||||||
|
<div style="padding: 15px; border-top: 1px solid #eee; text-align: right;">
|
||||||
|
<button class="btn-secondary" onclick="closeFeatureModal()">Close</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,841 +1,20 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>GeoJSON Viewer</title>
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" />
|
|
||||||
<link rel="stylesheet" href="theme.css">
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
||||||
min-height: 100vh;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
max-width: 1400px;
|
|
||||||
margin: 0 auto;
|
|
||||||
background: white;
|
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
||||||
color: white;
|
|
||||||
padding: 30px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header h1 {
|
|
||||||
font-size: 2.5em;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header p {
|
|
||||||
font-size: 1.1em;
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.map-controls {
|
|
||||||
position: absolute;
|
|
||||||
top: 20px;
|
|
||||||
right: 20px;
|
|
||||||
z-index: 400;
|
|
||||||
background: white;
|
|
||||||
padding: 12px;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.map-controls label {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 0.9em;
|
|
||||||
color: #333;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.map-controls-group {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
border-top: 1px solid #e0e0e0;
|
|
||||||
padding-top: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.map-controls-group:first-child {
|
|
||||||
border-top: none;
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-switch {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
width: 50px;
|
|
||||||
height: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-switch input {
|
|
||||||
opacity: 0;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-slider {
|
|
||||||
position: absolute;
|
|
||||||
cursor: pointer;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background-color: #ccc;
|
|
||||||
transition: 0.3s;
|
|
||||||
border-radius: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-slider:before {
|
|
||||||
position: absolute;
|
|
||||||
content: "";
|
|
||||||
height: 18px;
|
|
||||||
width: 18px;
|
|
||||||
left: 3px;
|
|
||||||
bottom: 3px;
|
|
||||||
background-color: white;
|
|
||||||
transition: 0.3s;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
input:checked + .toggle-slider {
|
|
||||||
background-color: #667eea;
|
|
||||||
}
|
|
||||||
|
|
||||||
input:checked + .toggle-slider:before {
|
|
||||||
transform: translateX(26px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-label {
|
|
||||||
font-size: 0.85em;
|
|
||||||
color: #666;
|
|
||||||
min-width: 60px;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
display: flex;
|
|
||||||
height: calc(100vh - 200px);
|
|
||||||
gap: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
width: 350px;
|
|
||||||
background: #f8f9fa;
|
|
||||||
border-right: 1px solid #e0e0e0;
|
|
||||||
padding: 25px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.map-container {
|
|
||||||
flex: 1;
|
|
||||||
position: relative;
|
|
||||||
background: #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#map {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-section {
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-section h2 {
|
|
||||||
font-size: 1.2em;
|
|
||||||
color: #333;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-input-wrapper {
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-input-label {
|
|
||||||
display: block;
|
|
||||||
padding: 15px 20px;
|
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
||||||
color: white;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: 600;
|
|
||||||
transition: transform 0.2s, box-shadow 0.2s;
|
|
||||||
border: 2px dashed transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-input-label:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 8px 16px rgba(102, 126, 234, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="file"] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-name {
|
|
||||||
margin-top: 10px;
|
|
||||||
padding: 10px;
|
|
||||||
background: #e3f2fd;
|
|
||||||
border-left: 4px solid #2196f3;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 0.9em;
|
|
||||||
color: #1565c0;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-name.active {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stats-section {
|
|
||||||
margin-bottom: 30px;
|
|
||||||
padding: 15px;
|
|
||||||
background: white;
|
|
||||||
border-radius: 8px;
|
|
||||||
border-left: 4px solid #667eea;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-item {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 8px 0;
|
|
||||||
border-bottom: 1px solid #f0f0f0;
|
|
||||||
font-size: 0.95em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-item:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-label {
|
|
||||||
color: #666;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-value {
|
|
||||||
color: #333;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.features-section h2 {
|
|
||||||
font-size: 1.2em;
|
|
||||||
color: #333;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.features-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
max-height: 400px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-item {
|
|
||||||
padding: 10px;
|
|
||||||
background: white;
|
|
||||||
border: 1px solid #e0e0e0;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
font-size: 0.9em;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-item:hover {
|
|
||||||
background: #f0f0f0;
|
|
||||||
border-color: #667eea;
|
|
||||||
transform: translateX(4px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-item.active {
|
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
||||||
color: white;
|
|
||||||
border-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.properties-section {
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 15px;
|
|
||||||
background: white;
|
|
||||||
border-radius: 8px;
|
|
||||||
border-left: 4px solid #667eea;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.properties-section.active {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.properties-section h3 {
|
|
||||||
font-size: 1em;
|
|
||||||
color: #333;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.property-row {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 8px 0;
|
|
||||||
border-bottom: 1px solid #f0f0f0;
|
|
||||||
font-size: 0.85em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.property-row:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.property-key {
|
|
||||||
color: #666;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.property-value {
|
|
||||||
color: #333;
|
|
||||||
word-break: break-word;
|
|
||||||
background: #f5f5f5;
|
|
||||||
padding: 6px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-family: 'Courier New', monospace;
|
|
||||||
font-size: 0.8em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-data {
|
|
||||||
text-align: center;
|
|
||||||
color: #999;
|
|
||||||
padding: 20px;
|
|
||||||
font-size: 0.95em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.controls-section {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
flex: 1;
|
|
||||||
padding: 10px;
|
|
||||||
background: #f0f0f0;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 0.9em;
|
|
||||||
color: #333;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:hover {
|
|
||||||
background: #e0e0e0;
|
|
||||||
border-color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.danger {
|
|
||||||
background: #ffebee;
|
|
||||||
color: #c62828;
|
|
||||||
border-color: #ef5350;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.danger:hover {
|
|
||||||
background: #ffcdd2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinner {
|
|
||||||
display: inline-block;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
border: 3px solid #f3f3f3;
|
|
||||||
border-top: 3px solid #667eea;
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
0% { transform: rotate(0deg); }
|
|
||||||
100% { transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip {
|
|
||||||
background: rgba(0, 0, 0, 0.8);
|
|
||||||
color: white;
|
|
||||||
padding: 8px 12px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 0.85em;
|
|
||||||
white-space: nowrap;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.content {
|
|
||||||
flex-direction: column;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
width: 100%;
|
|
||||||
border-right: none;
|
|
||||||
border-bottom: 1px solid #e0e0e0;
|
|
||||||
max-height: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#map {
|
|
||||||
height: 500px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-message {
|
|
||||||
padding: 12px;
|
|
||||||
background: #ffebee;
|
|
||||||
color: #c62828;
|
|
||||||
border: 1px solid #ef5350;
|
|
||||||
border-radius: 6px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
display: none;
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-message.active {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.success-message {
|
|
||||||
padding: 12px;
|
|
||||||
background: #e8f5e9;
|
|
||||||
color: #2e7d32;
|
|
||||||
border: 1px solid #66bb6a;
|
|
||||||
border-radius: 6px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
display: none;
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.success-message.active {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Modal Popup Styles */
|
|
||||||
.modal {
|
|
||||||
display: none;
|
|
||||||
position: fixed;
|
|
||||||
z-index: 1000;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
animation: fadeIn 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal.active {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from { opacity: 0; }
|
|
||||||
to { opacity: 1; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content {
|
|
||||||
background: white;
|
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
||||||
max-width: 500px;
|
|
||||||
width: 90%;
|
|
||||||
max-height: 80vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
animation: slideUp 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slideUp {
|
|
||||||
from {
|
|
||||||
transform: translateY(50px);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: translateY(0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
||||||
color: white;
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 12px 12px 0 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header h2 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-close {
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
border: none;
|
|
||||||
color: white;
|
|
||||||
font-size: 24px;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0;
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transition: background 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-close:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-body {
|
|
||||||
padding: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-property {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
border-bottom: 1px solid #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-property:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
margin-bottom: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-property-key {
|
|
||||||
font-weight: 700;
|
|
||||||
color: #333;
|
|
||||||
font-size: 0.95em;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
color: #667eea;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-property-value {
|
|
||||||
color: #555;
|
|
||||||
font-size: 0.95em;
|
|
||||||
line-height: 1.5;
|
|
||||||
word-break: break-word;
|
|
||||||
background: #f8f9fa;
|
|
||||||
padding: 12px;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-family: 'Courier New', monospace;
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-empty {
|
|
||||||
text-align: center;
|
|
||||||
color: #999;
|
|
||||||
padding: 40px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-section {
|
|
||||||
margin-bottom: 25px;
|
|
||||||
padding: 20px;
|
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
||||||
border-radius: 8px;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-section h2 {
|
|
||||||
font-size: 1.1em;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-stat {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 8px 0;
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
|
||||||
font-size: 0.95em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-stat:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-label {
|
|
||||||
font-weight: 500;
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-value {
|
|
||||||
font-weight: 600;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-section {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-section h3 {
|
|
||||||
font-size: 1.1em;
|
|
||||||
color: #333;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.attribute-table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
background: white;
|
|
||||||
border: 1px solid #e0e0e0;
|
|
||||||
border-radius: 6px;
|
|
||||||
overflow: hidden;
|
|
||||||
font-size: 0.85em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.attribute-table thead {
|
|
||||||
background: #f5f5f5;
|
|
||||||
border-bottom: 2px solid #ddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.attribute-table th {
|
|
||||||
padding: 10px;
|
|
||||||
text-align: left;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
border-right: 1px solid #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.attribute-table th:last-child {
|
|
||||||
border-right: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.attribute-table td {
|
|
||||||
padding: 10px;
|
|
||||||
border-right: 1px solid #e0e0e0;
|
|
||||||
border-bottom: 1px solid #f0f0f0;
|
|
||||||
color: #555;
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.attribute-table td:last-child {
|
|
||||||
border-right: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.attribute-table tbody tr:hover {
|
|
||||||
background: #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.attribute-table tbody tr:last-child td {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-wrapper {
|
|
||||||
overflow-x: auto;
|
|
||||||
max-height: 400px;
|
|
||||||
overflow-y: auto;
|
|
||||||
border: 1px solid #e0e0e0;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.attribute-table {
|
|
||||||
font-size: 0.75em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.attribute-table th,
|
|
||||||
.attribute-table td {
|
|
||||||
padding: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<div class="header">
|
|
||||||
<h1>📍 GeoJSON Viewer</h1>
|
|
||||||
<p>Upload a GeoJSON file to visualize features on an interactive map</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content">
|
|
||||||
<div class="sidebar">
|
|
||||||
<div class="error-message" id="errorMessage"></div>
|
|
||||||
<div class="success-message" id="successMessage"></div>
|
|
||||||
|
|
||||||
<div class="summary-section" id="summarySection" style="display: none;">
|
|
||||||
<h2>📊 Project Summary</h2>
|
|
||||||
<div class="summary-stat">
|
|
||||||
<span class="summary-label">Client/Project:</span>
|
|
||||||
<span class="summary-value" id="clientName">-</span>
|
|
||||||
</div>
|
|
||||||
<div class="summary-stat">
|
|
||||||
<span class="summary-label">Total Fields:</span>
|
|
||||||
<span class="summary-value" id="totalFields">0</span>
|
|
||||||
</div>
|
|
||||||
<div class="summary-stat">
|
|
||||||
<span class="summary-label">Total Area (ha):</span>
|
|
||||||
<span class="summary-value" id="totalHectares">0</span>
|
|
||||||
</div>
|
|
||||||
<div class="summary-stat">
|
|
||||||
<span class="summary-label">Total Area (acres):</span>
|
|
||||||
<span class="summary-value" id="totalAcres">0</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="upload-section">
|
|
||||||
<h2>📁 Upload File</h2>
|
|
||||||
<div class="file-input-wrapper">
|
|
||||||
<label for="geojsonFile" class="file-input-label">
|
|
||||||
Choose GeoJSON File
|
|
||||||
</label>
|
|
||||||
<input type="file" id="geojsonFile" accept=".geojson,.json" />
|
|
||||||
<div class="file-name" id="fileName"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="controls-section">
|
|
||||||
<button id="clearBtn" title="Clear all data">Clear All</button>
|
|
||||||
<button id="downloadBtn" title="Download current GeoJSON" style="display: none;">Download</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stats-section" id="statsSection" style="display: none;">
|
|
||||||
<div class="stat-item">
|
|
||||||
<span class="stat-label">Features:</span>
|
|
||||||
<span class="stat-value" id="featureCount">0</span>
|
|
||||||
</div>
|
|
||||||
<div class="stat-item">
|
|
||||||
<span class="stat-label">Type:</span>
|
|
||||||
<span class="stat-value" id="geomType">-</span>
|
|
||||||
</div>
|
|
||||||
<div class="stat-item">
|
|
||||||
<span class="stat-label">Bounds:</span>
|
|
||||||
<span class="stat-value" id="bounds">-</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="table-section" id="tableSection" style="display: none;">
|
|
||||||
<h3>📋 Attribute Table</h3>
|
|
||||||
<div class="table-wrapper">
|
|
||||||
<table class="attribute-table" id="attributeTable">
|
|
||||||
<thead>
|
|
||||||
<tr id="tableHeader"></tr>
|
|
||||||
</thead>
|
|
||||||
<tbody id="tableBody"></tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="features-section" id="featuresSection" style="display: none;">
|
|
||||||
<h2>🗺️ Features</h2>
|
|
||||||
<div style="margin-bottom: 15px;">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="featureSearch"
|
|
||||||
placeholder="Search by field code..."
|
|
||||||
style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 0.9em; box-sizing: border-box;"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="features-list" id="featuresList"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="properties-section" id="propertiesSection">
|
|
||||||
<h3>📋 Properties</h3>
|
|
||||||
<div id="propertiesContent" class="no-data">Select a feature to view properties</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="map-container">
|
|
||||||
<div id="map"></div>
|
|
||||||
<div class="map-controls">
|
|
||||||
<div class="map-controls-group">
|
|
||||||
<label for="mapToggle">
|
|
||||||
<span class="toggle-label" id="mapTypeLabel">OSM</span>
|
|
||||||
<div class="toggle-switch">
|
|
||||||
<input type="checkbox" id="mapToggle">
|
|
||||||
<span class="toggle-slider"></span>
|
|
||||||
</div>
|
|
||||||
<span>🛰️</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="map-controls-group">
|
|
||||||
<label for="labelsToggle">
|
|
||||||
<div class="toggle-switch">
|
|
||||||
<input type="checkbox" id="labelsToggle">
|
|
||||||
<span class="toggle-slider"></span>
|
|
||||||
</div>
|
|
||||||
<span>Show Labels</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Feature Details Modal -->
|
|
||||||
<div class="modal" id="featureModal">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h2 id="modalTitle">Feature Details</h2>
|
|
||||||
<button class="modal-close" onclick="closeFeatureModal()">×</button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body" id="modalBody"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
|
|
||||||
<script>
|
|
||||||
// Initialize map layers
|
// Initialize map layers
|
||||||
const osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
const osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||||
attribution: '© OpenStreetMap contributors',
|
attribution: '© OpenStreetMap contributors',
|
||||||
maxZoom: 19
|
maxNativeZoom: 19,
|
||||||
|
maxZoom: 23
|
||||||
});
|
});
|
||||||
|
|
||||||
const satelliteLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
|
const satelliteLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
|
||||||
attribution: '© Esri, DigitalGlobe, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community',
|
attribution: '© Esri, DigitalGlobe, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community',
|
||||||
maxZoom: 18
|
maxNativeZoom: 18,
|
||||||
|
maxZoom: 23
|
||||||
});
|
});
|
||||||
|
|
||||||
// Initialize map
|
// Initialize map
|
||||||
const map = L.map('map').setView([0, 0], 2);
|
const map = L.map('map', {
|
||||||
|
maxZoom: 23
|
||||||
|
}).setView([0, 0], 2);
|
||||||
osmLayer.addTo(map);
|
osmLayer.addTo(map);
|
||||||
|
|
||||||
let currentLayer = 'osm';
|
let currentLayer = 'osm';
|
||||||
|
|
@ -1063,14 +242,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Show message
|
|
||||||
function showMessage(message, type = 'error') {
|
|
||||||
const el = type === 'error' ? errorMessage : successMessage;
|
|
||||||
el.textContent = message;
|
|
||||||
el.classList.add('active');
|
|
||||||
setTimeout(() => el.classList.remove('active'), 5000);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle file upload
|
// Handle file upload
|
||||||
geojsonInput.addEventListener('change', (e) => {
|
geojsonInput.addEventListener('change', (e) => {
|
||||||
const file = e.target.files[0];
|
const file = e.target.files[0];
|
||||||
|
|
@ -1565,6 +736,3 @@
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -5,6 +5,7 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>SmartCane Web Apps</title>
|
<title>SmartCane Web Apps</title>
|
||||||
<link rel="stylesheet" href="theme.css">
|
<link rel="stylesheet" href="theme.css">
|
||||||
|
<link rel="icon" type="image/x-icon" href="./res/main.png">
|
||||||
<style>
|
<style>
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -29,6 +30,8 @@
|
||||||
color: white;
|
color: white;
|
||||||
margin-bottom: 50px;
|
margin-bottom: 50px;
|
||||||
padding-bottom: 30px;
|
padding-bottom: 30px;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-section {
|
.logo-section {
|
||||||
|
|
@ -36,7 +39,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
margin-bottom: 30px;
|
padding-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
|
|
@ -165,7 +168,6 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<script>
|
<script>
|
||||||
// Check authentication on page load
|
|
||||||
if (sessionStorage.getItem('authenticated') !== 'true') {
|
if (sessionStorage.getItem('authenticated') !== 'true') {
|
||||||
window.location.href = 'login.html';
|
window.location.href = 'login.html';
|
||||||
}
|
}
|
||||||
|
|
@ -225,7 +227,7 @@
|
||||||
<li>View feature properties</li>
|
<li>View feature properties</li>
|
||||||
<li>Download exports</li>
|
<li>Download exports</li>
|
||||||
</ul>
|
</ul>
|
||||||
<a href="./geojson_viewer.html" class="app-btn">Open Viewer</a>
|
<a href="./geojson_viewer" class="app-btn">Open Viewer</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -247,7 +249,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<p>SmartCane • Resilience BV • 2025</p>
|
<p>SmartCane • Resilience BV • <span id="year"></span></p>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -256,6 +258,7 @@
|
||||||
sessionStorage.removeItem('authenticated');
|
sessionStorage.removeItem('authenticated');
|
||||||
window.location.href = 'login.html';
|
window.location.href = 'login.html';
|
||||||
}
|
}
|
||||||
|
document.getElementById("year").textContent = new Date().getFullYear();
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Polygon Analysis & Editor</title>
|
<title>Polygon Analysis & Editor</title>
|
||||||
<link rel="stylesheet" href="../theme.css">
|
<link rel="stylesheet" href="../theme.css">
|
||||||
|
<link rel="icon" type="image/x-icon" href="../res/poly.png">
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
|
@ -23,20 +24,6 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
}
|
}
|
||||||
.back-btn {
|
|
||||||
background: rgba(255,255,255,0.2);
|
|
||||||
color: white;
|
|
||||||
border: 1px solid rgba(255,255,255,0.3);
|
|
||||||
padding: 8px 12px;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
transition: background 0.3s ease;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.back-btn:hover {
|
|
||||||
background: rgba(255,255,255,0.3);
|
|
||||||
}
|
|
||||||
header h1 {
|
header h1 {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
|
||||||
BIN
webapps/res/check.png
Normal file
BIN
webapps/res/check.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
webapps/res/main.png
Normal file
BIN
webapps/res/main.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4 KiB |
BIN
webapps/res/map.png
Normal file
BIN
webapps/res/map.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
webapps/res/pin.png
Normal file
BIN
webapps/res/pin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2 KiB |
BIN
webapps/res/poly.png
Normal file
BIN
webapps/res/poly.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -8,6 +8,7 @@
|
||||||
<link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css" />
|
<link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css" />
|
||||||
<link rel="stylesheet" href="https://unpkg.com/leaflet-measure@3.1.0/dist/leaflet-measure.css" />
|
<link rel="stylesheet" href="https://unpkg.com/leaflet-measure@3.1.0/dist/leaflet-measure.css" />
|
||||||
<link rel="stylesheet" href="../theme.css">
|
<link rel="stylesheet" href="../theme.css">
|
||||||
|
<link rel="icon" type="image/x-icon" href="../res/map.png">
|
||||||
<style>
|
<style>
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -40,21 +41,6 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-btn {
|
|
||||||
background: rgba(255,255,255,0.2);
|
|
||||||
color: white;
|
|
||||||
border: 1px solid rgba(255,255,255,0.3);
|
|
||||||
padding: 8px 12px;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
transition: background 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-btn:hover {
|
|
||||||
background: rgba(255,255,255,0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-controls {
|
.header-controls {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,11 @@
|
||||||
/* Apply to body gradients */
|
/* Apply to body gradients */
|
||||||
body {
|
body {
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
background: linear-gradient(135deg, var(--sc-primary) 0%, var(--sc-primary-light) 100%);
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
color-mix(in srgb, var(--sc-primary), transparent 10%) 0%,
|
||||||
|
color-mix(in srgb, var(--sc-primary-light), transparent 10%) 100%
|
||||||
|
);
|
||||||
color: var(--sc-text);
|
color: var(--sc-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -56,6 +60,24 @@ header {
|
||||||
background: var(--sc-accent-light);
|
background: var(--sc-accent-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.back-btn {
|
||||||
|
background: rgba(255,255,255,0.2);
|
||||||
|
color: white;
|
||||||
|
border: 1px solid rgba(255,255,255,0.3);
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: background 0.3s ease;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
flex: None;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-btn:hover {
|
||||||
|
background: rgba(255,255,255,0.3);
|
||||||
|
}
|
||||||
|
|
||||||
/* Mode buttons */
|
/* Mode buttons */
|
||||||
.mode-btn {
|
.mode-btn {
|
||||||
background: rgba(255, 255, 255, 0.1);
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue