| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Field Maps - Agrosynth OS</title> |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <style> |
| #map { height: 520px; width: 100%; } |
| .leaflet-container { border-radius: 0.75rem; } |
| </style> |
| </head> |
| <body class="bg-gray-50 font-sans antialiased"> |
| <div class="flex h-screen overflow-hidden"> |
| |
| <div class="bg-white shadow-md w-64 flex flex-col"> |
| <div class="flex items-center justify-center h-16 px-4 border-b"> |
| <div class="flex items-center"> |
| <i data-feather="layers" class="text-green-600 h-6 w-6"></i> |
| <span class="ml-2 text-lg font-bold text-gray-900">Agrosynth OS</span> |
| </div> |
| </div> |
| <nav class="flex-1 overflow-y-auto py-4"> |
| <div class="px-4 space-y-1"> |
| <a href="/dashboard" class="flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900"> |
| <i data-feather="home" class="text-gray-500 h-5 w-5"></i> |
| <span class="ml-3">Dashboard</span> |
| </a> |
| <a href="/field-maps" class="flex items-center px-2 py-2 text-sm font-medium rounded-md bg-green-50 text-green-700"> |
| <i data-feather="map" class="text-green-600 h-5 w-5"></i> |
| <span class="ml-3">Field Maps</span> |
| </a> |
| <a href="/analytics" class="flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900"> |
| <i data-feather="activity" class="text-gray-500 h-5 w-5"></i> |
| <span class="ml-3">Analytics</span> |
| </a> |
| </div> |
| </nav> |
| </div> |
|
|
| |
| <div class="flex-1 overflow-auto"> |
| <header class="bg-white shadow-sm"> |
| <div class="flex justify-between items-center px-4 py-4 sm:px-6"> |
| <h1 class="text-xl font-semibold text-gray-900">Field Maps</h1> |
| </div> |
| </header> |
|
|
| <main class="p-4 sm:p-6"> |
| <div class="rounded-xl border overflow-hidden"> |
| <div id="map"></div> |
| </div> |
| </main> |
| </div> |
| </div> |
|
|
| <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> |
| <script> |
| feather.replace(); |
| |
| |
| const map = L.map('map').setView([40.73, -73.93], 12); |
| L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map); |
| |
| |
| const fields = [ |
| { |
| id: "f1", |
| name: "North 40", |
| polygon: [ |
| [40.735, -73.95], |
| [40.735, -73.91], |
| [40.720, -73.91], |
| [40.720, -73.95], |
| ], |
| ndvi: 0.64, |
| moisture: 61, |
| color: "#22c55e" |
| }, |
| { |
| id: "f2", |
| name: "South Block", |
| polygon: [ |
| [40.720, -73.98], |
| [40.720, -73.96], |
| [40.710, -73.96], |
| [40.710, -73.98], |
| ], |
| ndvi: 0.51, |
| moisture: 58, |
| color: "#84cc16" |
| } |
| ]; |
| |
| |
| fields.forEach(field => { |
| const polygon = L.polygon(field.polygon, { color: field.color, weight: 2 }).addTo(map); |
| polygon.bindPopup(` |
| <div class="text-xs"> |
| <div class="font-semibold">${field.name}</div> |
| <div>NDVI ${field.ndvi}</div> |
| <div>Moisture ${field.moisture}%</div> |
| </div> |
| `); |
| }); |
| </script> |
| </body> |
| </html> |
