From 9cb792240be433a7855f031a8ea2f6de5e23e7ce Mon Sep 17 00:00:00 2001
From: Elysia <elysia.lcy@gmail.com>
Date: Sat, 1 Nov 2025 19:14:47 +0000
Subject: [PATCH] website: map

---
 websiteapp/templates/websiteapp/base.html   | 40 ++++++++++++-
 websiteapp/templates/websiteapp/encode.html | 62 ++++++++++++++++++++-
 2 files changed, 99 insertions(+), 3 deletions(-)
diff --git a/websiteapp/templates/websiteapp/base.html b/websiteapp/templates/websiteapp/base.html
index 30f048c..c59cda0 100644
--- a/websiteapp/templates/websiteapp/base.html
+++ b/websiteapp/templates/websiteapp/base.html
@@ -2,13 +2,49 @@
 
 <html>
     <head>
-        <title>Hello World</title>
+        <style>
+            /* This sets the font color for all text */
+            body {
+            background-color:rgb(255, 255, 255);
+            color: #006cab;
+	        font-family: 'Raleway', sans-serif;
+            margin: 0;
+            padding: 0;
+            text-align: center;
+            }
+
+            button {
+            background-color: rgba(0, 108, 171);
+            color: rgba(250, 184, 0);
+            font-size: 20px;
+            font-weight: bold;
+            padding: 10px 20px; /* makes button bigger */
+            border: none;       /* removes default border */
+            border-radius: 5px; /* rounded corners */
+            cursor: pointer;    /* pointer on hover */
+            }
+
+            #map {
+            height: 550px;
+            width: 100%;
+            }
+
+        </style>
+        <title>GREGGORDINATES</title>
+
+        <!-- Global CSS -->
+         <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
+
     </head>
 
     <body>
-        <h1>Greggordinates</h1>
+        <h1>GREGGORDINATES</h1>
 
         {% block content %}
         {% endblock %}
+
+        <!-- Global JS -->
+        <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+
     </body>
 </html>
diff --git a/websiteapp/templates/websiteapp/encode.html b/websiteapp/templates/websiteapp/encode.html
index c6a62b3..378081b 100644
--- a/websiteapp/templates/websiteapp/encode.html
+++ b/websiteapp/templates/websiteapp/encode.html
@@ -3,6 +3,66 @@
 {% block content %}
 
 <p> Landing Page </p>
-<input type="text" placeholder="Enter your name">
+
+<p id="result"></p>
+
+<h2>Click on the map to choose your lame location</h2>
+
+<div id="map" data-mode=""></div>
+<input
+    type="hidden"
+    data-map-markers=""
+    value=""
+    name="map-geojson-data"
+    id="mapData"
+/>
+
+
+<p id="coords">Coordinates: none</p>
+
+
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+        // Initialize map
+        const map = L.map('map').setView([54.5, -3], 6); 
+
+        // Add OpenStreetMap tiles
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            maxZoom: 19,
+            attribution:
+            '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
+        }).addTo(map);
+
+        let marker;
+
+        // When the user clicks the map
+        map.on('click', function (e) {
+            const lat = e.latlng.lat.toFixed(6);
+            const lng = e.latlng.lng.toFixed(6);
+
+            // Remove existing marker (if any)
+            if (marker) map.removeLayer(marker);
+
+            // Add marker at clicked location
+            marker = L.marker([lat, lng]).addTo(map);
+
+            // Show coordinates
+            document.getElementById('coords').textContent = `Coordinates: ${lat}, ${lng}`;
+
+            // Save coordinates in hidden input as JSON
+            const geoData = JSON.stringify({ lat: lat, lng: lng });
+            document.getElementById('mapData').value = geoData;
+
+            console.log("Saved to hidden input:", geoData);
+        });
+    });
+</script>
+
+
+<button onclick="saveAndGo()">
+    GREGG IT!
+</button>
+
+// pass coordinates to django and directs to result page
 
 {% endblock %}
