This commit is contained in:
Ian Burgess 2025-05-06 21:10:16 -06:00
parent 661d9f500e
commit 02845f8a59
13 changed files with 38107 additions and 12 deletions

92
alphashaape.py Normal file
View File

@ -0,0 +1,92 @@
import alphashape
from shapely.geometry import MultiPoint, mapping # Use mapping for GeoJSON conversion
import matplotlib.pyplot as plt
import json # To print GeoJSON nicely
# 1. Define a set of 2D points (e.g., forming a 'C' shape)
# Using simple integer coordinates for clarity
points = [
(0, 0), (0, 1), (0, 2), (0, 3), (0, 4), (0, 5), # Left vertical bar
(1, 5), (2, 5), (3, 5), # Top horizontal bar
(3, 4), # Small indent
(1, 0), (2, 0), (3, 0), # Bottom horizontal bar
# Add some interior points to make it more interesting
(1, 1), (1, 4), (2, 2.5)
]
print(f"Original points count: {len(points)}")
# 2. Calculate the alpha shape
# If alpha is not specified (or None), alphashape tries to find a 'good' value.
# You can experiment by setting alpha explicitly, e.g., alpha=2.0
try:
alpha_shape_geom = alphashape.alphashape(points) # Let alphashape determine alpha
# alpha_shape_geom = alphashape.alphashape(points, alpha=1) # Example with explicit alpha
print(f"\nAlpha shape calculated. Type: {alpha_shape_geom.geom_type}")
# Print as Well-Known Text (WKT)
print("Alpha Shape (WKT):")
print(alpha_shape_geom.wkt)
# Print as GeoJSON Geometry dictionary
print("\nAlpha Shape (GeoJSON Geometry):")
print(json.dumps(mapping(alpha_shape_geom), indent=2))
except Exception as e:
print(f"\nError calculating alpha shape: {e}")
alpha_shape_geom = None
# 3. Calculate the convex hull for comparison
# Use Shapely's MultiPoint for this
multi_point = MultiPoint(points)
convex_hull_geom = multi_point.convex_hull
print(f"\nConvex hull calculated. Type: {convex_hull_geom.geom_type}")
print("Convex Hull (WKT):")
print(convex_hull_geom.wkt)
# 4. Visualization using Matplotlib (Optional but helpful)
if alpha_shape_geom and convex_hull_geom:
fig, ax = plt.subplots(figsize=(8, 8))
# Plot the original points
x_coords, y_coords = zip(*points)
ax.scatter(x_coords, y_coords, color='blue', label='Original Points', s=50, zorder=3)
# Plot the convex hull
if convex_hull_geom.geom_type == 'Polygon':
hull_x, hull_y = convex_hull_geom.exterior.xy
ax.plot(hull_x, hull_y, color='red', linestyle='--', linewidth=2, label='Convex Hull', zorder=1)
elif convex_hull_geom.geom_type == 'LineString': # For collinear points
hull_x, hull_y = convex_hull_geom.xy
ax.plot(hull_x, hull_y, color='red', linestyle='--', linewidth=2, label='Convex Hull', zorder=1)
# Plot the alpha shape
# Handle both Polygon and MultiPolygon results from alphashape
def plot_polygon(ax, poly, color, label):
x, y = poly.exterior.xy
ax.plot(x, y, color=color, linewidth=2, solid_capstyle='round', label=label, zorder=2)
for interior in poly.interiors:
x_int, y_int = interior.xy
ax.plot(x_int, y_int, color=color, linewidth=1, linestyle=':', solid_capstyle='round')
if alpha_shape_geom.geom_type == 'Polygon':
plot_polygon(ax, alpha_shape_geom, color='green', label='Alpha Shape')
elif alpha_shape_geom.geom_type == 'MultiPolygon':
print("\nAlpha shape is a MultiPolygon, plotting all parts.")
for i, poly in enumerate(alpha_shape_geom.geoms):
plot_polygon(ax, poly, color='green', label=f'Alpha Shape Part {i+1}' if i==0 else None)
ax.set_title('Alpha Shape vs Convex Hull')
ax.set_xlabel('X coordinate')
ax.set_ylabel('Y coordinate')
ax.legend()
ax.set_aspect('equal', adjustable='box') # Ensure correct aspect ratio
plt.grid(True)
plt.show()
else:
print("\nSkipping visualization due to missing geometry.")

43
app.py
View File

@ -1,11 +1,44 @@
import flask
from flask import Flask, render_template, session
from flask_pymongo import Pymongo
import stravalib
import gpxpy
import gpxpy.gpx
from dotenv import load_dotenv
from os import getenv
load_dotenv()
app = flask.Flask(__name__)
client = stravalib.client.Client()
@app.route('/')
def index():
return flask.render_template('test.html')
app = Flask(__name__)
app.config["MONGO_URI"] = f"{getenv("MONGO_URI")}turfrun?authSource=admin"
app.secret_key = getenv("SECRET_KEY")
app.run(host='0.0.0.0')
mongo = Motor(app)
Session(app)
@app.route("/")
def home():
return render_template("index.html")\
@app.route("/api/turf", methods=["GET"])
def get_turf():
turf = mongo.db.turf.find_one()
print(turf)
return render_template("test.html", x=45.6770, y=-111.0429, x2=45.6646, y2=-110.5572, x3=45.2703, y3=-111.3028)
@app.route("/login", methods=["GET", "POST"])
def login():
return render_template("index.html")
@app.route("/logout", methods=["GET", "POST"])
def logout():
return render_template("index.html")
app.run(host="0.0.0.0")

30
gpx.py Normal file
View File

@ -0,0 +1,30 @@
import gpxpy
import gpxpy.gpx
import turtle
# Parsing an existing file:
# -------------------------
a=0
gpx_file = open('test.gpx', 'r')
gpx = gpxpy.parse(gpx_file)
for track in gpx.tracks:
for segment in track.segments:
for point in segment.points:
print(f'Point at ({point.latitude},{point.longitude}')
a+=1
print(a)
for waypoint in gpx.waypoints:
print(f'waypoint {waypoint.name} -> ({waypoint.latitude},{waypoint.longitude})')
for route in gpx.routes:
print('Route:')
for point in route.points:
print(f'Point at ({point.latitude},{point.longitude}) -> {point.elevtion}')
# There are many more utility methods and functions:
# You can manipulate/add/remove tracks, segments, points, waypoints and routes and
# get the GPX XML file from the resulting object:
#print('GPX:', gpx.to_xml())

46
mongotest.py Normal file
View File

@ -0,0 +1,46 @@
from pymongo import MongoClient
from shapely.geometry import Polygon, mapping
from alphashape import alphashape
import stravalib
from datetime import datetime
from dotenv import load_dotenv
from os import getenv
import matplotlib.pyplot as plt
load_dotenv()
client = stravalib.client.Client()
client.refresh_access_token(getenv("STRAVA_CLIENT_ID"), getenv("STRAVA_CLIENT_SECRET"), getenv("REFRESH_TOKEN"))
mongo = MongoClient("mongodb://databaseuser:databasepass@localhost:27017/")
db = mongo["turfrun"]
def save_claimed_land(player_id, coordinates):
"""Saves a newly claimed territory to the database."""
land_collection = db.turf
polygon = {
"type": "Polygon",
"coordinates": [coordinates] # Ensure it's a list of rings
}
land_document = {
"owner_id": player_id,
"geometry": polygon,
"claimed_at": datetime.utcnow()
# Add other relevant properties like score contribution, etc.
}
land_collection.insert_one(land_document)
streams = client.get_activity_streams(14171406402)
coords = streams["latlng"].data
print("made it 1")
coords = alphashape(coords, 1000)
print("made it 2")
# coords = mapping(coords)["coordinates"][0]
for i in coords.geoms:
print(type(i))
coords = [(lon, lat) for lat, lon in coords]
save_claimed_land(1, coords)
mongo.close()

2
quart-strava.py Normal file
View File

@ -0,0 +1,2 @@
def login():

View File

@ -1,2 +1,8 @@
flask
stravalib
flask_pymongo
granian
stravalib
geojson
shapely
pymongo
alphashape

15
static/img/connect.svg Normal file
View File

@ -0,0 +1,15 @@
<svg width="237" height="48" viewBox="0 0 237 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="236.867" height="48" rx="6" fill="#FC5200"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M180.749 31.8195L180.748 31.8188H185.357L188.188 26.1268L191.019 31.8188H196.618L188.187 15.5403L180.184 30.9945L177.111 26.5078C179.008 25.5928 180.191 24.0081 180.191 21.7318V21.687C180.191 20.0803 179.7 18.9197 178.763 17.9822C177.669 16.8887 175.906 16.1968 173.139 16.1968H165.506V31.8195H170.728V27.3558H171.844L174.79 31.8195H180.749ZM212.954 15.5403L204.524 31.8188H210.124L212.955 26.1268L215.786 31.8188H221.385L212.954 15.5403ZM200.576 32.4593L209.006 16.1808H203.406L200.575 21.8729L197.744 16.1808H192.144L200.576 32.4593ZM172.982 23.6287C174.232 23.6287 174.991 23.0708 174.991 22.1112V22.0663C174.991 21.0621 174.21 20.5711 173.005 20.5711H170.728V23.6287H172.982ZM154.337 20.6158H149.74V16.1968H164.157V20.6158H159.56V31.8195H154.337V20.6158ZM137.015 26.1507L134.225 29.4761C136.211 31.2172 139.068 32.1097 142.237 32.1097C146.433 32.1097 149.133 30.101 149.133 26.82V26.7756C149.133 23.6287 146.455 22.468 142.46 21.7318C140.808 21.419 140.384 21.1515 140.384 20.7273V20.6827C140.384 20.3033 140.742 20.0355 141.523 20.0355C142.973 20.0355 144.737 20.5042 146.209 21.5754L148.754 18.0493C146.946 16.6209 144.714 15.9065 141.701 15.9065C137.394 15.9065 135.073 18.2055 135.073 21.1737V21.2185C135.073 24.5214 138.153 25.526 141.656 26.2398C143.33 26.5747 143.821 26.82 143.821 27.2665V27.3113C143.821 27.7352 143.42 27.9805 142.482 27.9805C140.652 27.9805 138.711 27.4452 137.015 26.1507Z" fill="white"/>
<path d="M117.92 31.6812V21.9622H119.919V25.7533H124.137V21.9622H126.136V31.6812H124.137V27.5179H119.919V31.6812H117.92Z" fill="white"/>
<path d="M110.959 31.6812V23.713H107.844V21.9622H116.088V23.713H112.958V31.6812H110.959Z" fill="white"/>
<path d="M104.02 31.6812V21.9622H106.018V31.6812H104.02Z" fill="white"/>
<path d="M92.1013 31.6812L89.5371 21.9622H91.6464L92.7492 27.2008C92.8871 27.9039 93.0112 28.4691 93.1352 29.3376H93.1904C93.3282 28.607 93.4109 28.152 93.6315 27.187L94.8723 21.9622H96.9677L98.2084 27.187C98.429 28.152 98.5117 28.607 98.6496 29.3376H98.7047C98.8288 28.4691 98.9529 27.9039 99.0907 27.2008L100.207 21.9622H102.303L99.7387 31.6812H97.657L96.4301 26.4977C96.2646 25.7671 96.1543 25.2846 95.9476 24.2782H95.8924C95.6856 25.2846 95.5753 25.7671 95.4099 26.4977L94.183 31.6812H92.1013Z" fill="white"/>
<path d="M79.9965 31.6812V23.713H76.8809V21.9622H85.1248V23.713H81.9954V31.6812H79.9965Z" fill="white"/>
<path d="M71.524 31.888C68.7806 31.888 66.9746 29.8753 66.9746 26.8148C66.9746 23.7681 68.7806 21.7554 71.524 21.7554C73.6883 21.7554 75.3151 23.0237 75.577 24.8434L73.5781 25.3121C73.3575 24.1955 72.5855 23.5338 71.4964 23.5338C69.9799 23.5338 69.0287 24.7883 69.0287 26.8148C69.0287 28.8413 69.9799 30.1096 71.4964 30.1096C72.5855 30.1096 73.3575 29.4479 73.5781 28.345L75.577 28.8138C75.3151 30.6335 73.6883 31.888 71.524 31.888Z" fill="white"/>
<path d="M58.459 31.6812V21.9622H65.2003V23.6578H60.4579V25.8636H64.8556V27.5041H60.4579V29.9856H65.2003V31.6812H58.459Z" fill="white"/>
<path d="M47.7656 31.6812V21.9622H49.9576L52.9216 26.9113C53.3765 27.6557 53.6798 28.2899 54.0106 28.993H54.0796L54.0382 26.5115V21.9622H55.9407V31.6812H53.7487L50.771 26.7321C50.3298 25.9876 50.0265 25.3673 49.6819 24.6504H49.6267L49.6681 27.1319V31.6812H47.7656Z" fill="white"/>
<path d="M37.0742 31.6812V21.9622H39.2662L42.2301 26.9113C42.6851 27.6557 42.9884 28.2899 43.3192 28.993H43.3882L43.3468 26.5115V21.9622H45.2493V31.6812H43.0573L40.0795 26.7321C39.6384 25.9876 39.3351 25.3673 38.9905 24.6504H38.9353L38.9767 27.1319V31.6812H37.0742Z" fill="white"/>
<path d="M30.2903 31.888C27.4642 31.888 25.6582 29.8201 25.6582 26.8148C25.6582 23.8233 27.4642 21.7554 30.2903 21.7554C33.1164 21.7554 34.9223 23.8233 34.9223 26.8148C34.9223 29.8201 33.1164 31.888 30.2903 31.888ZM30.2903 30.1096C31.8481 30.1096 32.8682 28.9378 32.8682 26.8148C32.8682 24.6918 31.8481 23.5338 30.2903 23.5338C28.7325 23.5338 27.7123 24.6918 27.7123 26.8148C27.7123 28.9378 28.7325 30.1096 30.2903 30.1096Z" fill="white"/>
<path d="M19.9868 31.888C17.2435 31.888 15.4375 29.8753 15.4375 26.8148C15.4375 23.7681 17.2435 21.7554 19.9868 21.7554C22.1512 21.7554 23.778 23.0237 24.0399 24.8434L22.0409 25.3121C21.8204 24.1955 21.0484 23.5338 19.9593 23.5338C18.4428 23.5338 17.4916 24.7883 17.4916 26.8148C17.4916 28.8413 18.4428 30.1096 19.9593 30.1096C21.0484 30.1096 21.8204 29.4479 22.0409 28.345L24.0399 28.8138C23.778 30.6335 22.1512 31.888 19.9868 31.888Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 4.5 KiB

4
static/img/powered.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="365" height="37" viewBox="0 0 365 37" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.905029 35.1577H3.31523V29.0503H7.34003C10.8266 29.0503 12.8858 27.1315 12.8858 23.9257C12.8858 20.7433 10.8266 18.7777 7.36343 18.7777H0.905029V35.1577ZM3.31523 26.8039V21.0241H7.26983C9.42263 21.0241 10.4756 21.9601 10.4756 23.9257C10.4756 25.8445 9.39923 26.8039 7.24643 26.8039H3.31523ZM23.6787 35.5087C27.8907 35.5087 30.6753 32.1157 30.6753 26.9677C30.6753 21.8197 27.8907 18.4267 23.6787 18.4267C19.4667 18.4267 16.7055 21.8197 16.7055 26.9677C16.7055 32.1157 19.4667 35.5087 23.6787 35.5087ZM23.6787 33.2623C20.8473 33.2623 19.1157 30.8755 19.1157 26.9677C19.1157 23.0599 20.8473 20.6731 23.6787 20.6731C26.5335 20.6731 28.2651 23.0599 28.2651 26.9677C28.2651 30.8755 26.5335 33.2623 23.6787 33.2623ZM37.4562 35.1577H40.2174L43.9848 22.5919H44.0316L47.7756 35.1577H50.5602L53.6958 18.7777H51.2388L48.8988 31.3201H48.852L45.1314 18.7777H42.8616L39.1644 31.3201H39.1176L36.7776 18.7777H34.2972L37.4562 35.1577ZM58.3356 35.1577H68.3742V32.9113H60.7458V27.8101H67.719V25.6573H60.7458V21.0241H68.3742V18.7777H58.3356V35.1577ZM81.6314 28.5823C84.0416 28.0441 85.469 26.2891 85.469 23.7619C85.469 20.6497 83.3864 18.7777 79.97 18.7777H73.7924V35.1577H76.2026V28.7695H79.0808L82.4504 35.1577H85.1648L81.6314 28.6057V28.5823ZM76.2026 26.5465V21.0241H79.736C81.9356 21.0241 83.0588 21.9367 83.0588 23.7619C83.0588 25.5871 81.9122 26.5465 79.736 26.5465H76.2026ZM90.4832 35.1577H100.522V32.9113H92.8934V27.8101H99.8666V25.6573H92.8934V21.0241H100.522V18.7777H90.4832V35.1577ZM105.94 35.1577H111.111C115.417 35.1577 118.295 32.5369 118.295 26.9443C118.295 21.7963 115.417 18.7777 111.205 18.7777H105.94V35.1577ZM108.35 32.9113V21.0241H111.135C114.036 21.0241 115.885 23.0131 115.885 26.9443C115.885 31.2031 114.036 32.9113 111.018 32.9113H108.35ZM132.055 35.1577H138.115C142 35.1577 144.012 33.4729 144.012 30.2437C144.012 28.3951 143.053 26.9677 141.579 26.3827V26.3359C142.702 25.7743 143.404 24.5809 143.404 23.0599C143.404 20.5093 141.462 18.7777 138.607 18.7777H132.055V35.1577ZM134.465 25.5871V21.0007H138.209C140.034 21.0007 140.994 21.7729 140.994 23.2705C140.994 24.8149 140.081 25.5871 138.209 25.5871H134.465ZM134.465 32.9347V27.6229H138.162C140.572 27.6229 141.602 28.4185 141.602 30.2203C141.602 32.1157 140.549 32.9347 138.115 32.9347H134.465ZM151.963 35.1577H154.373V28.3717L160.012 18.7777H157.321L153.18 26.1253H153.133L148.991 18.7777H146.3L151.963 28.3717V35.1577Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M275.925 35.6008L275.924 35.5993H286.002L292.193 23.1514L298.384 35.5993H310.63L292.192 0L274.689 33.7968L267.969 23.9845C272.118 21.9836 274.705 18.5181 274.705 13.54V13.442C274.705 9.92849 273.631 7.39027 271.581 5.34009C269.189 2.94868 265.334 1.43574 259.282 1.43574H242.59V35.6008H254.011V25.8391H256.451L262.894 35.6008H275.925ZM346.353 0L327.918 35.5993H340.164L346.355 23.1514L352.546 35.5993H364.792L346.353 0ZM319.284 37L337.719 1.40071H325.473L319.282 13.8486L313.091 1.40071H300.845L319.284 37ZM258.941 17.6885C261.673 17.6885 263.333 16.4684 263.333 14.3698V14.2718C263.333 12.0756 261.624 11.0019 258.989 11.0019H254.011V17.6885H258.941ZM218.165 11.0994H208.112V1.43574H239.641V11.0994H229.587V35.6008H218.165V11.0994ZM180.283 23.2037L174.181 30.476C178.525 34.2835 184.773 36.2353 191.703 36.2353C200.879 36.2353 206.785 31.8425 206.785 24.6675V24.5703C206.785 17.6885 200.928 15.1502 192.191 13.5401C188.579 12.856 187.652 12.2712 187.652 11.3435V11.2459C187.652 10.4162 188.433 9.83056 190.141 9.83056C193.313 9.83056 197.17 10.8554 200.391 13.1981L205.955 5.48697C202.001 2.36309 197.121 0.800959 190.532 0.800959C181.112 0.800959 176.036 5.8286 176.036 12.3196V12.4176C176.036 19.6406 182.772 21.8376 190.434 23.3986C194.095 24.131 195.168 24.6675 195.168 25.644V25.742C195.168 26.6689 194.29 27.2053 192.24 27.2053C188.238 27.2053 183.992 26.0348 180.283 23.2037Z" fill="#FC5200"/>
</svg>

After

Width:  |  Height:  |  Size: 3.9 KiB

View File

@ -7,7 +7,7 @@
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
crossorigin=""></script>
<style>
#map { height: 300px; } /* Adjust height as needed */
#map { height: 600px } /* Adjust height as needed */
</style>
</head>
<body>
@ -16,7 +16,7 @@
<script>
// Initialize the map
var map = L.map('map').setView([45.6782, -111.0387], 13); // Bozeman, MT as default center and zoom
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', {
@ -25,10 +25,9 @@
// Define the coordinates of the polygon vertices
var polygonCoordinates = [
[45.6850, -111.0450],
[45.6900, -111.0300],
[45.6800, -111.0250],
[45.6750, -111.0400]
[{{ x }}, {{ y }}],
[{{ x2 }}, {{ y2 }}],
[{{ x3 }}, {{ y3 }}]
];
// Create the polygon with orange color

25005
test.gpx Normal file

File diff suppressed because it is too large Load Diff

12648
test2.gpx Normal file

File diff suppressed because it is too large Load Diff

80
thing.html Normal file
View File

@ -0,0 +1,80 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Map with Coordinates</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<style>
/* Style for the map container */
#map {
height: 600px; /* You can adjust the height */
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// --- Your Coordinates ---
// Leaflet expects coordinates in [latitude, longitude] format
var latlngs = [
[45.652832, -111.05197], [45.652804, -111.051993], [45.652776, -111.052015],
[45.652746, -111.052033], [45.65255, -111.052139], [45.651225, -111.052623],
[45.650619, -111.05283], [45.650308, -111.052937], [45.649998, -111.053045],
[45.649347, -111.053033], [45.64721, -111.053002], [45.646229, -111.053052],
[45.646201, -111.053052], [45.645672, -111.053045], [45.645644, -111.053044],
[45.645426, -111.05302], [45.645402, -111.053015], [45.64526, -111.052985],
[45.645228, -111.052974], [45.642497, -111.052232], [45.642468, -111.052221],
[45.642388, -111.05218], [45.642363, -111.052163], [45.64234, -111.052142],
[45.642296, -111.052099], [45.642279, -111.052069], [45.642265, -111.052034],
[45.642258, -111.051999], [45.642252, -111.051966], [45.642247, -111.051921],
[45.642258, -111.050971], [45.642211, -111.049135], [45.642197, -111.048222],
[45.642195, -111.048177], [45.642213, -111.046393], [45.64223, -111.046355],
[45.648904, -111.041981], [45.648925, -111.041965], [45.648954, -111.041959],
[45.648983, -111.041959], [45.649142, -111.041978], [45.64935, -111.042022],
[45.649373, -111.042045], [45.652542, -111.046346], [45.652572, -111.046645],
[45.652576, -111.04696], [45.652946, -111.050445], [45.65295, -111.050493],
[45.652954, -111.050636], [45.652953, -111.050728], [45.652952, -111.050775],
[45.652953, -111.051575], [45.652943, -111.051724], [45.652938, -111.051764],
[45.652929, -111.051804], [45.652918, -111.051843], [45.652903, -111.05188],
[45.652884, -111.051914], [45.652859, -111.051946], [45.652832, -111.05197]
];
// --- Initialize the Map ---
// Setting initial view coordinates (e.g., first point) and zoom level
var map = L.map('map').setView([45.652832, -111.05197], 15); // Adjust zoom level (e.g., 15) as needed
// --- Add Tile Layer ---
// Using OpenStreetMap tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// --- Create and Add Polygon ---
// Since the first and last points are the same, we draw a polygon
var polygon = L.polygon(latlngs, {
color: 'blue', // Outline color
fillColor: '#3388ff', // Fill color
fillOpacity: 0.5 // Fill opacity (0 to 1)
}).addTo(map);
// --- Fit Map Bounds ---
// Adjust the map view to fit the bounds of the polygon
map.fitBounds(polygon.getBounds());
</script>
</body>
</html>

135
thing2.html Normal file
View File

@ -0,0 +1,135 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Polygon Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<style>
/* Set the size of the map container */
#map { height: 600px; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// --- Your Coordinates Array ---
const coordinates = [
[45.651082, -111.052659], [45.650904, -111.052714], [45.650876, -111.052723],
[45.650735, -111.052778], [45.650648, -111.052818], [45.650619, -111.05283],
[45.65059, -111.052839], [45.650561, -111.052848], [45.650308, -111.052937],
[45.650091, -111.05301], [45.650064, -111.053021], [45.649998, -111.053045],
[45.649961, -111.05304], [45.649347, -111.053033], [45.649309, -111.053028],
[45.64879, -111.052888], [45.648324, -111.052874], [45.648204, -111.052887],
[45.647614, -111.052978], [45.647584, -111.052988], [45.647555, -111.05299],
[45.647497, -111.052992], [45.647469, -111.052993], [45.647442, -111.052994],
[45.64727, -111.053], [45.64724, -111.053001], [45.64721, -111.053002],
[45.646635, -111.053022], [45.646606, -111.053022], [45.646523, -111.053025],
[45.646468, -111.053028], [45.646385, -111.053033], [45.646229, -111.053052],
[45.646201, -111.053052], [45.645756, -111.05304], [45.645728, -111.053043],
[45.6457, -111.053045], [45.645672, -111.053045], [45.645644, -111.053044],
[45.645426, -111.05302], [45.645402, -111.053015], [45.64526, -111.052985],
[45.645228, -111.052974], [45.645195, -111.052961], [45.645164, -111.052944],
[45.645138, -111.052923], [45.645113, -111.052899], [45.643608, -111.052256],
[45.643506, -111.052257], [45.643297, -111.052249], [45.64319, -111.052245],
[45.642895, -111.05222], [45.642551, -111.052241], [45.642497, -111.052232],
[45.642468, -111.052221], [45.642388, -111.05218], [45.642363, -111.052163],
[45.64234, -111.052142], [45.642296, -111.052099], [45.642279, -111.052069],
[45.642265, -111.052034], [45.642258, -111.051999], [45.642252, -111.051966],
[45.642247, -111.051921], [45.642251, -111.051883], [45.642261, -111.051806],
[45.642268, -111.051745], [45.642272, -111.051708], [45.642288, -111.051479],
[45.642278, -111.051228], [45.642274, -111.051185], [45.642263, -111.051054],
[45.642258, -111.050971], [45.642274, -111.050695], [45.642273, -111.050659],
[45.642273, -111.050622], [45.642277, -111.050514], [45.642273, -111.050586],
[45.642274, -111.05055], [45.642278, -111.050477], [45.64228, -111.05044],
[45.642283, -111.050404], [45.642287, -111.050147], [45.642283, -111.050071],
[45.642284, -111.050033], [45.64229, -111.049673], [45.64223, -111.049285],
[45.642222, -111.049249], [45.642217, -111.049211], [45.642211, -111.049135],
[45.642214, -111.049099], [45.642222, -111.048828], [45.642221, -111.048789],
[45.64222, -111.048675], [45.642214, -111.048515], [45.642204, -111.04831],
[45.642197, -111.048222], [45.642195, -111.048177], [45.642196, -111.048135],
[45.642199, -111.048053], [45.642202, -111.047978], [45.642209, -111.04782],
[45.642221, -111.047494], [45.642222, -111.047456], [45.642226, -111.047419],
[45.642241, -111.047137], [45.642243, -111.047097], [45.642246, -111.046969],
[45.642245, -111.046886], [45.642243, -111.046803], [45.642213, -111.046429],
[45.642213, -111.046393], [45.64223, -111.046355], [45.642255, -111.046351],
[45.642753, -111.046357], [45.64301, -111.046374], [45.643658, -111.046369],
[45.643686, -111.046368], [45.643923, -111.046372], [45.643951, -111.046374],
[45.643977, -111.046379], [45.644343, -111.046402], [45.644369, -111.046402],
[45.64467, -111.04639], [45.644747, -111.046382], [45.644773, -111.046381],
[45.645289, -111.046329], [45.645723, -111.046405], [45.646053, -111.046405],
[45.64608, -111.046404], [45.646584, -111.046385], [45.646613, -111.046383],
[45.646767, -111.046383], [45.646793, -111.046382], [45.64877, -111.044027],
[45.648765, -111.043993], [45.648761, -111.043958], [45.648756, -111.043919],
[45.648752, -111.043881], [45.64875, -111.043837], [45.648743, -111.043717],
[45.648746, -111.043679], [45.648762, -111.043569], [45.648767, -111.043533],
[45.648772, -111.043498], [45.648784, -111.043423], [45.648866, -111.042736],
[45.648863, -111.042592], [45.648869, -111.042453], [45.64887, -111.042415],
[45.648869, -111.042376], [45.648872, -111.042333], [45.648874, -111.042293],
[45.648886, -111.042044], [45.648889, -111.042007], [45.648904, -111.041981],
[45.648925, -111.041965], [45.648954, -111.041959], [45.648983, -111.041959],
[45.649117, -111.041976], [45.649142, -111.041978], [45.64935, -111.042022],
[45.649373, -111.042045], [45.649394, -111.042074], [45.649409, -111.042106],
[45.649421, -111.042137], [45.649432, -111.042169], [45.649442, -111.042204],
[45.649447, -111.042243], [45.649475, -111.042479], [45.649506, -111.042667],
[45.649512, -111.042706], [45.649522, -111.042829], [45.649509, -111.043077],
[45.64951, -111.04312], [45.649507, -111.043245], [45.649506, -111.043286],
[45.649513, -111.043551], [45.649514, -111.04359], [45.649516, -111.043627],
[45.649516, -111.043672], [45.649523, -111.04386], [45.649519, -111.044088],
[45.651179, -111.046161], [45.652057, -111.04632], [45.65243, -111.04631],
[45.652461, -111.046306], [45.652492, -111.046303], [45.652519, -111.046318],
[45.652542, -111.046346], [45.652548, -111.04641], [45.652567, -111.046611],
[45.652572, -111.046645], [45.652572, -111.046746], [45.652573, -111.046851],
[45.652576, -111.04696], [45.652572, -111.04725], [45.652575, -111.047353],
[45.652582, -111.047507], [45.652584, -111.047552], [45.652584, -111.04764],
[45.652572, -111.047801], [45.65255, -111.04823], [45.652551, -111.048271],
[45.652553, -111.048361], [45.652555, -111.048408], [45.652583, -111.048675],
[45.65259, -111.048721], [45.652596, -111.048766], [45.652595, -111.048813],
[45.652595, -111.048942], [45.652732, -111.049787], [45.652746, -111.049826],
[45.65276, -111.049871], [45.652853, -111.050131], [45.652871, -111.050172],
[45.652889, -111.050217], [45.652906, -111.050259], [45.652916, -111.050305],
[45.652936, -111.050399], [45.652946, -111.050445], [45.65295, -111.050493],
[45.652954, -111.050636], [45.652953, -111.050728], [45.652952, -111.050775],
[45.652947, -111.050821], [45.652936, -111.050952], [45.652934, -111.051165],
[45.652936, -111.051226], [45.652945, -111.051409], [45.652949, -111.051474],
[45.652951, -111.051541], [45.652953, -111.051575], [45.65295, -111.05161],
[45.652943, -111.051724], [45.652938, -111.051764], [45.652929, -111.051804],
[45.652918, -111.051843], [45.652903, -111.05188], [45.652884, -111.051914],
[45.652859, -111.051946], [45.652832, -111.05197], [45.652804, -111.051993],
[45.652776, -111.052015], [45.652746, -111.052033], [45.65255, -111.052139],
[45.651225, -111.052623], [45.651197, -111.052631], [45.651082, -111.052659]
];
// --- Initialize the Map ---
// Set the initial view to roughly the center of your coordinates (Bozeman area)
// You might need to adjust the center coordinates and zoom level (15 is quite zoomed in)
const map = L.map('map').setView([45.647, -111.048], 15);
// --- Add a Tile Layer ---
// This provides the background map imagery (OpenStreetMap is a common free option)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// --- Create and Add the Polygon ---
const polygon = L.polygon(coordinates, {
color: 'blue', // Outline color
fillColor: '#3388ff', // Fill color
fillOpacity: 0.5 // Fill opacity (0 to 1)
}).addTo(map);
// --- Optional: Fit Map Bounds to Polygon ---
// This will adjust the map view to show the entire polygon
map.fitBounds(polygon.getBounds());
</script>
</body>
</html>