|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Palm Monitor - Geospatial Intelligence Platform</title> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" /> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" /> |
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css" /> |
|
|
|
|
|
<style> |
|
|
body { |
|
|
font-family: Arial, sans-serif; |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.header { |
|
|
background: #006838; |
|
|
backdrop-filter: blur(10px); |
|
|
color: white; |
|
|
padding: 10px 25px; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.3); |
|
|
position: relative; |
|
|
z-index: 1000; |
|
|
} |
|
|
|
|
|
.logo { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.user-info { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 15px; |
|
|
} |
|
|
|
|
|
.status-indicator { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 5px; |
|
|
font-size: 14px; |
|
|
} |
|
|
|
|
|
.status-dot { |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
background: #27ae60; |
|
|
border-radius: 50%; |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { opacity: 1; } |
|
|
50% { opacity: 0.5; } |
|
|
100% { opacity: 1; } |
|
|
} |
|
|
|
|
|
.main-container { |
|
|
display: flex; |
|
|
height: calc(100vh - 90px); |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.sidebar { |
|
|
width: 250px; |
|
|
background: #f8f9fa; |
|
|
border-right: 1px solid #ddd; |
|
|
padding: 20px; |
|
|
overflow-y: auto; |
|
|
box-shadow: 2px 0 5px rgba(0,0,0,0.1); |
|
|
z-index: 999; |
|
|
} |
|
|
|
|
|
.tool-group { |
|
|
margin-bottom: 25px; |
|
|
} |
|
|
|
|
|
.tool-group h3 { |
|
|
color: #2c3e50; |
|
|
margin-bottom: 15px; |
|
|
font-size: 16px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
} |
|
|
|
|
|
.tool-btn { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
width: 100%; |
|
|
padding: 12px 15px; |
|
|
margin-bottom: 8px; |
|
|
border: 1px solid #ddd; |
|
|
background: white; |
|
|
border-radius: 6px; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
font-size: 14px; |
|
|
text-align: left; |
|
|
} |
|
|
|
|
|
.tool-btn:hover { |
|
|
background: #e3f2fd; |
|
|
border-color: #2196f3; |
|
|
transform: translateY(-1px); |
|
|
} |
|
|
|
|
|
.tool-btn.active { |
|
|
background: #2196f3; |
|
|
color: white; |
|
|
border-color: #2196f3; |
|
|
} |
|
|
|
|
|
.tool-btn i { |
|
|
width: 16px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.file-input-wrapper { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 10px; |
|
|
margin-top: 10px; |
|
|
} |
|
|
|
|
|
.file-input-wrapper input[type="file"] { |
|
|
padding: 8px; |
|
|
border: 1px solid #ddd; |
|
|
border-radius: 4px; |
|
|
font-size: 12px; |
|
|
} |
|
|
|
|
|
.export-buttons { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 5px; |
|
|
margin-top: 10px; |
|
|
} |
|
|
|
|
|
.export-btn { |
|
|
padding: 8px 12px; |
|
|
background: #3498db; |
|
|
color: white; |
|
|
border: none; |
|
|
border-radius: 4px; |
|
|
cursor: pointer; |
|
|
font-size: 12px; |
|
|
transition: background 0.3s ease; |
|
|
} |
|
|
|
|
|
.export-btn:hover { |
|
|
background: #2980b9; |
|
|
} |
|
|
|
|
|
#map-container { |
|
|
flex: 1; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
#map { |
|
|
height: 100%; |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
#infoForm { |
|
|
display: none; |
|
|
padding: 20px; |
|
|
background: white; |
|
|
border-top: 2px solid #3498db; |
|
|
box-shadow: 0 -2px 10px rgba(0,0,0,0.1); |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
z-index: 1000; |
|
|
max-height: 300px; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.form-header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
|
|
|
.close-btn { |
|
|
background: none; |
|
|
border: none; |
|
|
font-size: 18px; |
|
|
cursor: pointer; |
|
|
color: #666; |
|
|
} |
|
|
|
|
|
.close-btn:hover { |
|
|
color: #000; |
|
|
} |
|
|
|
|
|
.form-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
|
|
gap: 12px; |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
|
|
|
.form-grid input { |
|
|
padding: 8px 12px; |
|
|
font-size: 14px; |
|
|
border: 1px solid #ddd; |
|
|
border-radius: 4px; |
|
|
width: 100%; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
.form-grid input:focus { |
|
|
outline: none; |
|
|
border-color: #3498db; |
|
|
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); |
|
|
} |
|
|
|
|
|
.form-actions { |
|
|
display: flex; |
|
|
gap: 10px; |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
|
|
|
.form-actions button { |
|
|
padding: 10px 20px; |
|
|
font-size: 14px; |
|
|
border: none; |
|
|
border-radius: 4px; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.form-actions button:first-child { |
|
|
background: #27ae60; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.form-actions button:first-child:hover { |
|
|
background: #219a52; |
|
|
} |
|
|
|
|
|
.form-actions button:last-child { |
|
|
background: #3498db; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.form-actions button:last-child:hover { |
|
|
background: #2980b9; |
|
|
} |
|
|
|
|
|
h3 { |
|
|
margin-bottom: 15px; |
|
|
color: #2c3e50; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
padding: 5px 10px; |
|
|
margin: 2px; |
|
|
border: none; |
|
|
border-radius: 3px; |
|
|
cursor: pointer; |
|
|
font-size: 12px; |
|
|
} |
|
|
|
|
|
.btn:hover { |
|
|
opacity: 0.8; |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.sidebar { |
|
|
width: 250px; |
|
|
} |
|
|
|
|
|
.form-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 600px) { |
|
|
.main-container { |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.sidebar { |
|
|
width: 100%; |
|
|
height: 200px; |
|
|
border-right: none; |
|
|
border-bottom: 1px solid #ddd; |
|
|
} |
|
|
|
|
|
#map-container { |
|
|
height: calc(100vh - 290px); |
|
|
} |
|
|
} |
|
|
.nav-button { |
|
|
width: 90%; |
|
|
padding: 12px 15px; |
|
|
margin: 5px 0; |
|
|
border: none; |
|
|
background: linear-gradient(135deg, #006838 0%, #A1B593 100%); |
|
|
color: white; |
|
|
border-radius: 8px; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
font-size: 14px; |
|
|
} |
|
|
|
|
|
.nav-button:hover { |
|
|
background-color: #fcfffc; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="header"> |
|
|
<div class="logo"> |
|
|
<img src="https://images.squarespace-cdn.com/content/v1/604db3a6dad32a12b2415387/1636475927545-PK57PVLIB7AEKX1AJQJ8/Logo_MSPO_2020.png" alt="MSPO Logo" style="height: 60px;"> |
|
|
<div> |
|
|
<span style="font-weight: bold;">MSPO-Palm Monitor</span><br> |
|
|
<span style="font-size: 12px; opacity: 0.7;">Powered by Uzma Digital Earth</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="user-info"> |
|
|
<div class="status-indicator"> |
|
|
<div class="status-dot"></div> |
|
|
<span>Live Monitoring</span> |
|
|
</div> |
|
|
<i class="fas fa-user-circle" style="font-size: 24px;"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="main-container"> |
|
|
<div class="sidebar"> |
|
|
<div class="tool-group"> |
|
|
<h3><i class="fas fa-satellite"></i> Imagery</h3> |
|
|
<button class="tool-btn active" onclick="toggleLayer('satellite')"> |
|
|
<i class="fas fa-globe"></i> High-Res Satellite |
|
|
</button> |
|
|
<button class="tool-btn" onclick="toggleLayer('terrain')"> |
|
|
<i class="fas fa-mountain"></i> Topographic Data |
|
|
</button> |
|
|
<button class="tool-btn" onclick="toggleLayer('ndvi')"> |
|
|
<i class="fas fa-seedling"></i> NDVI Analysis |
|
|
</button> |
|
|
<button class="tool-btn" onclick="requestNewImagery()"> |
|
|
<i class="fas fa-refresh"></i> Request Update |
|
|
</button> |
|
|
|
|
|
<button class="tool-btn" onclick="window.location.href='split_panel_map.html'">Deforestation Map</button> |
|
|
|
|
|
|
|
|
|
|
|
<i class="fas fa-refresh"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="tool-group"> |
|
|
<h3><i class="fas fa-chart-line"></i> Analysis</h3> |
|
|
<button class="tool-btn" onclick="runSpatialAnalysis()"> |
|
|
<i class="fas fa-calculator"></i> Spatial Analysis |
|
|
</button> |
|
|
<button class="tool-btn" onclick="generateReport()"> |
|
|
<i class="fas fa-file-alt"></i> Generate Report |
|
|
</button> |
|
|
<button class="tool-btn" onclick="trendAnalysis()"> |
|
|
<i class="fas fa-trending-up"></i> Trend Analysis |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="tool-group"> |
|
|
<h3><i class="fas fa-upload"></i> Import/Export Data</h3> |
|
|
<div class="file-input-wrapper"> |
|
|
<input type="file" id="fileInput" accept=".geojson,.json" onchange="handleFileImport(event)" /> |
|
|
<div class="export-buttons"> |
|
|
<button class="export-btn" onclick="exportData('geojson')"> |
|
|
<i class="fas fa-download"></i> Export GeoJSON |
|
|
</button> |
|
|
<button class="export-btn" onclick="exportData('shapefile')"> |
|
|
<i class="fas fa-download"></i> Export Shapefile |
|
|
</button> |
|
|
<button class="export-btn" onclick="exportData('csv')"> |
|
|
<i class="fas fa-download"></i> Export CSV |
|
|
</button> |
|
|
<button class="export-btn" onclick="exportData('report')"> |
|
|
<i class="fas fa-file-pdf"></i> Generate Report |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="map-container"> |
|
|
<div id="map"></div> |
|
|
|
|
|
<div id="infoForm"> |
|
|
<div class="form-header"> |
|
|
<h3>Polygon Info</h3> |
|
|
<button class="close-btn" onclick="closeInfoForm()"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="form-grid"> |
|
|
<input id="license" placeholder="LICENSE NO." /> |
|
|
<input id="name" placeholder="SMALLHOLDER NAME" /> |
|
|
<input id="state" placeholder="STATE" /> |
|
|
<input id="district" placeholder="DISTRICT" /> |
|
|
<input id="subdistrict" placeholder="SUBDISTRICT" /> |
|
|
<input id="spocName" placeholder="SPOC NAME" /> |
|
|
<input id="spocCode" placeholder="SPOC CODE" /> |
|
|
<input id="lotNo" placeholder="LOT NO." /> |
|
|
<input id="certified" placeholder="CERTIFIED AREA (HA)" /> |
|
|
<input id="planted" placeholder="PLANTED AREA (HA)" /> |
|
|
<input id="latitude" placeholder="LATITUDE" readonly /> |
|
|
<input id="longitude" placeholder="LONGITUDE" readonly /> |
|
|
<input id="mspo" placeholder="MSPO CERTIFICATION" /> |
|
|
<input id="land" placeholder="LAND TITLE" /> |
|
|
<input id="shapeLength" placeholder="Shape_Length" /> |
|
|
<input id="shapeArea" placeholder="Shape_Area" /> |
|
|
</div> |
|
|
<div class="form-actions"> |
|
|
<button onclick="saveInfo()">Save Info</button> |
|
|
<button onclick="exportGeoJSON()">Download GeoJSON</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> |
|
|
<script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js"></script> |
|
|
|
|
|
<script> |
|
|
const map = L.map('map').setView([4.4286, 102.0581], 12); |
|
|
|
|
|
let baseLayers = { |
|
|
satellite: L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { |
|
|
attribution: 'Esri, DigitalGlobe, GeoEye, Earthstar Geographics' |
|
|
}), |
|
|
terrain: L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', { |
|
|
attribution: 'Esri, DeLorme, NAVTEQ' |
|
|
}), |
|
|
osm: L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { |
|
|
attribution: 'OpenStreetMap contributors' |
|
|
}) |
|
|
}; |
|
|
|
|
|
baseLayers.satellite.addTo(map); |
|
|
|
|
|
const drawnItems = new L.FeatureGroup(); |
|
|
map.addLayer(drawnItems); |
|
|
|
|
|
const drawControl = new L.Control.Draw({ |
|
|
edit: { featureGroup: drawnItems }, |
|
|
draw: { |
|
|
polygon: true, |
|
|
polyline: true, |
|
|
rectangle: true, |
|
|
circle: true, |
|
|
marker: true, |
|
|
circlemarker: true |
|
|
} |
|
|
}); |
|
|
map.addControl(drawControl); |
|
|
|
|
|
let currentLayer = null; |
|
|
let currentCircle = null; |
|
|
const geojsonFeatures = []; |
|
|
|
|
|
map.on(L.Draw.Event.CREATED, function (e) { |
|
|
const layer = e.layer; |
|
|
const type = e.layerType; |
|
|
|
|
|
drawnItems.addLayer(layer); |
|
|
|
|
|
if (type === 'circle') { |
|
|
currentCircle = layer; |
|
|
const center = layer.getLatLng(); |
|
|
const radius = layer.getRadius(); |
|
|
|
|
|
layer.bindPopup(` |
|
|
<strong>New Circle</strong><br> |
|
|
Center: ${center.lat.toFixed(6)}, ${center.lng.toFixed(6)}<br> |
|
|
Radius: ${(radius/1000).toFixed(2)} km<br> |
|
|
<button onclick="analyzePolygon()" class="btn" style="background: #3498db; color: white;">Analyze</button> |
|
|
<button onclick="deleteShape()" class="btn" style="background: #e74c3c; color: white;">Delete</button> |
|
|
`); |
|
|
} else if (type === 'marker') { |
|
|
const latlng = layer.getLatLng(); |
|
|
layer.bindPopup(` |
|
|
<strong>Marker</strong><br> |
|
|
Location: ${latlng.lat.toFixed(6)}, ${latlng.lng.toFixed(6)}<br> |
|
|
<button onclick="deleteShape()" class="btn" style="background: #e74c3c; color: white;">Delete</button> |
|
|
`); |
|
|
} else { |
|
|
currentLayer = layer; |
|
|
const center = layer.getBounds().getCenter(); |
|
|
document.getElementById('latitude').value = center.lat.toFixed(10); |
|
|
document.getElementById('longitude').value = center.lng.toFixed(10); |
|
|
|
|
|
const geojson = layer.toGeoJSON(); |
|
|
if (geojson.geometry.coordinates && geojson.geometry.coordinates[0]) { |
|
|
const coords = geojson.geometry.coordinates[0]; |
|
|
document.getElementById('shapeLength').value = (coords.length * 0.0001).toFixed(6); |
|
|
document.getElementById('shapeArea').value = (Math.random() * 1e-6).toFixed(12); |
|
|
} |
|
|
|
|
|
document.getElementById('infoForm').style.display = 'block'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function deleteShape() { |
|
|
const popup = map._popup; |
|
|
if (popup && popup._source) { |
|
|
const layer = popup._source; |
|
|
drawnItems.removeLayer(layer); |
|
|
map.closePopup(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function analyzePolygon() { |
|
|
showNotification('Analysis started for selected area...'); |
|
|
} |
|
|
|
|
|
function toggleLayer(layerName) { |
|
|
|
|
|
document.querySelectorAll('.tool-group:first-child .tool-btn').forEach(btn => { |
|
|
btn.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
event.target.classList.add('active'); |
|
|
|
|
|
switch(layerName) { |
|
|
case 'satellite': |
|
|
|
|
|
if (map.hasLayer(baseLayers.terrain)) { |
|
|
map.removeLayer(baseLayers.terrain); |
|
|
} |
|
|
if (map.hasLayer(baseLayers.osm)) { |
|
|
map.removeLayer(baseLayers.osm); |
|
|
} |
|
|
|
|
|
if (!map.hasLayer(baseLayers.satellite)) { |
|
|
baseLayers.satellite.addTo(map); |
|
|
} |
|
|
break; |
|
|
case 'terrain': |
|
|
|
|
|
if (map.hasLayer(baseLayers.satellite)) { |
|
|
map.removeLayer(baseLayers.satellite); |
|
|
} |
|
|
if (map.hasLayer(baseLayers.osm)) { |
|
|
map.removeLayer(baseLayers.osm); |
|
|
} |
|
|
|
|
|
if (!map.hasLayer(baseLayers.terrain)) { |
|
|
baseLayers.terrain.addTo(map); |
|
|
} |
|
|
break; |
|
|
case 'ndvi': |
|
|
showNotification('NDVI overlay activated'); |
|
|
break; |
|
|
} |
|
|
} |
|
|
|
|
|
function requestNewImagery() { |
|
|
showNotification('Requesting new imagery update...'); |
|
|
} |
|
|
|
|
|
function runSpatialAnalysis() { |
|
|
showNotification('Running spatial analysis...'); |
|
|
} |
|
|
|
|
|
function generateReport() { |
|
|
showNotification('Generating report...'); |
|
|
} |
|
|
|
|
|
function trendAnalysis() { |
|
|
showNotification('Performing trend analysis...'); |
|
|
} |
|
|
|
|
|
function exportData(format) { |
|
|
switch(format) { |
|
|
case 'geojson': |
|
|
exportGeoJSON(); |
|
|
break; |
|
|
case 'shapefile': |
|
|
showNotification('Shapefile export functionality would be implemented here'); |
|
|
break; |
|
|
case 'csv': |
|
|
exportCSV(); |
|
|
break; |
|
|
case 'report': |
|
|
showNotification('Report generation functionality would be implemented here'); |
|
|
break; |
|
|
} |
|
|
} |
|
|
|
|
|
function exportCSV() { |
|
|
if (geojsonFeatures.length === 0) { |
|
|
showNotification('No data to export'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const headers = Object.keys(geojsonFeatures[0].properties); |
|
|
const csvContent = [ |
|
|
headers.join(','), |
|
|
...geojsonFeatures.map(feature => |
|
|
headers.map(header => feature.properties[header] || '').join(',') |
|
|
) |
|
|
].join('\n'); |
|
|
|
|
|
const blob = new Blob([csvContent], { type: 'text/csv' }); |
|
|
const url = window.URL.createObjectURL(blob); |
|
|
const a = document.createElement('a'); |
|
|
a.href = url; |
|
|
a.download = 'polygons.csv'; |
|
|
document.body.appendChild(a); |
|
|
a.click(); |
|
|
document.body.removeChild(a); |
|
|
window.URL.revokeObjectURL(url); |
|
|
} |
|
|
|
|
|
function showNotification(message) { |
|
|
alert(message); |
|
|
} |
|
|
|
|
|
function closeInfoForm() { |
|
|
document.getElementById('infoForm').style.display = 'none'; |
|
|
|
|
|
document.querySelectorAll('#infoForm input').forEach(input => { |
|
|
if (!input.readOnly) { |
|
|
input.value = ''; |
|
|
} |
|
|
}); |
|
|
currentLayer = null; |
|
|
} |
|
|
|
|
|
function saveInfo() { |
|
|
if (!currentLayer) { |
|
|
showNotification("Draw a polygon first."); |
|
|
return; |
|
|
} |
|
|
|
|
|
const get = id => document.getElementById(id).value; |
|
|
|
|
|
const properties = { |
|
|
license: get('license'), |
|
|
smallholder: get('name'), |
|
|
state: get('state'), |
|
|
district: get('district'), |
|
|
subdistrict: get('subdistrict'), |
|
|
spoc_name: get('spocName'), |
|
|
spoc_code: get('spocCode'), |
|
|
lot_no: get('lotNo'), |
|
|
certified_area: get('certified'), |
|
|
planted_area: get('planted'), |
|
|
latitude: get('latitude'), |
|
|
longitude: get('longitude'), |
|
|
mspo: get('mspo'), |
|
|
land_title: get('land'), |
|
|
shape_length: get('shapeLength'), |
|
|
shape_area: get('shapeArea') |
|
|
}; |
|
|
|
|
|
const feature = currentLayer.toGeoJSON(); |
|
|
feature.properties = properties; |
|
|
geojsonFeatures.push(feature); |
|
|
|
|
|
const popupContent = Object.entries(properties) |
|
|
.filter(([key, val]) => val) |
|
|
.map(([key, val]) => `<b>${key.replace(/_/g, ' ').toUpperCase()}:</b> ${val}`) |
|
|
.join("<br>"); |
|
|
|
|
|
currentLayer.bindPopup(popupContent).openPopup(); |
|
|
|
|
|
closeInfoForm(); |
|
|
showNotification('Polygon information saved successfully!'); |
|
|
} |
|
|
|
|
|
function exportGeoJSON() { |
|
|
if (geojsonFeatures.length === 0) { |
|
|
showNotification('No data to export'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const geojson = { |
|
|
type: "FeatureCollection", |
|
|
features: geojsonFeatures |
|
|
}; |
|
|
const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(geojson, null, 2)); |
|
|
const dlAnchor = document.createElement('a'); |
|
|
dlAnchor.setAttribute("href", dataStr); |
|
|
dlAnchor.setAttribute("download", "polygons.geojson"); |
|
|
document.body.appendChild(dlAnchor); |
|
|
dlAnchor.click(); |
|
|
dlAnchor.remove(); |
|
|
showNotification('GeoJSON file exported successfully!'); |
|
|
} |
|
|
|
|
|
function handleFileImport(event) { |
|
|
const file = event.target.files[0]; |
|
|
if (file) { |
|
|
const reader = new FileReader(); |
|
|
reader.onload = function(e) { |
|
|
try { |
|
|
const geojson = JSON.parse(e.target.result); |
|
|
L.geoJSON(geojson, { |
|
|
onEachFeature: function(feature, layer) { |
|
|
drawnItems.addLayer(layer); |
|
|
if (feature.properties) { |
|
|
const popupContent = Object.entries(feature.properties) |
|
|
.filter(([key, val]) => val) |
|
|
.map(([key, val]) => `<b>${key.replace(/_/g, ' ').toUpperCase()}:</b> ${val}`) |
|
|
.join("<br>"); |
|
|
layer.bindPopup(popupContent); |
|
|
} |
|
|
|
|
|
geojsonFeatures.push(feature); |
|
|
} |
|
|
}); |
|
|
showNotification('GeoJSON file imported successfully!'); |
|
|
} catch (error) { |
|
|
showNotification('Error parsing GeoJSON file: ' + error.message); |
|
|
} |
|
|
}; |
|
|
reader.readAsText(file); |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
