charlotte/CamHack25
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

website: map

Browse source
This commit is contained in:
Elysia 2025-11-01 19:14:47 +00:00
parent 033bce10cb
commit 9cb792240b
2 changed files with 99 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

40
websiteapp/templates/websiteapp/base.html
View file

@ -2,13 +2,49 @@
<html> <html>
<head> <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> </head>
<body> <body>
<h1>Greggordinates</h1> <h1>GREGGORDINATES</h1>
{% block content %} {% block content %}
{% endblock %} {% endblock %}
<!-- Global JS -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
</body> </body>
</html> </html>

62
websiteapp/templates/websiteapp/encode.html
View file

@ -3,6 +3,66 @@
{% block content %} {% block content %}
<p> Landing Page </p> <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 %} {% endblock %}