48 lines
1.5 KiB
HTML
48 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Runturf</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
|
crossorigin=""/>
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
|
crossorigin=""></script>
|
|
<style>
|
|
#map { height: 600px } /* Adjust height as needed */
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="map"></div>
|
|
|
|
<script>
|
|
// Initialize the map
|
|
var map = L.map('map').setView([{{ x }}, {{ y }}], 5); // Bozeman, MT as default center and zoom
|
|
|
|
// Add a tile layer (you can choose a different provider)
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(map);
|
|
|
|
// Define the coordinates of the polygon vertices
|
|
var polygonCoordinates = [
|
|
[{{ x }}, {{ y }}],
|
|
[{{ x2 }}, {{ y2 }}],
|
|
[{{ x3 }}, {{ y3 }}]
|
|
];
|
|
|
|
// Create the polygon with orange color
|
|
var orangePolygon = L.polygon(polygonCoordinates, {
|
|
color: 'orange',
|
|
fillColor: 'orange',
|
|
fillOpacity: 0.7 // Adjust opacity as needed
|
|
}).addTo(map);
|
|
|
|
// You can also add a popup to the polygon
|
|
orangePolygon.bindPopup("ionburger");
|
|
</script>
|
|
<footer>
|
|
<p>© 2025 Ian Burgess. Licensed under the <a href="https://www.gnu.org/licenses/agpl-3.0.html" target="_blank" rel="license noopener noreferrer">GNU Affero General Public License</a>, <a href="https://source.ionburger.me/turfrun" target="_blank" rel="noopener noreferrer">View Source</a>.</p>
|
|
</footer>
|
|
|
|
</body>
|
|
</html> |