Skip to content

Commit

Permalink
Create leaflet_great_circle.html
Browse files Browse the repository at this point in the history 
make this page
  • Loading branch information
@danames
danames authored Jan 23, 2025
1 parent 8231bf0 commit a6b0ae7
Showing 1 changed file with 213 additions and 0 deletions.
213 changes: 213 additions & 0 deletions leaflet/leaflet_great_circle.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,213 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adding Markers Dynamically</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
#map {
height: 400px;
width: 80%;
margin: 20px auto;
border: 1px solid #ccc;
}
.container {
width: 80%;
margin: 20px auto;
}
h1, h2 {
text-align: center;
}
h2 {
margin-top: 30px;
}
pre {
background-color: #f5f5f5;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
}
code {
font-family: 'Courier New', Courier, monospace;
}
.subtitle {
text-align: center;
margin-bottom: 20px;
}
.form-container {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
.form-group {
margin-right: 15px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="number"] {
width: 100px;
}
.leaflet-div-icon {
background: transparent;
border: none;
}

.triangle {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 16px solid purple;
}
</style>
</head>
<body>
<div class="container">
<h1>Drawing the Great Circle on a Leaflet Map</h1>
<p class="subtitle">By Dr. Dan Ames - Jan 23, 2025</p>

<div id="map"></div>

<h2>Enter Coordinates</h2>
<div class="form-container">
<div class="form-group">
<label for="start_latitude">Start Latitude:</label>
<input type="number" id="start_latitude" name="start_latitude" value="40.0">
</div>
<div class="form-group">
<label for="start_latitude">Start Longitude:</label>
<input type="number" id="start_longitude" name="start_longitude" value="-111.0">
</div>
<div class="form-group">
<label for="end_longitude">End Latitude:</label>
<input type="number" id="end_latitude" name="end_latitude" value="39.0">
</div>
<div class="form-group">
<label for="end_longitude">End Longitude:</label>
<input type="number" id="end_longitude" name="end_longitude" value="-112.0">
</div>

<button id="submit-button">Draw Points and Great Circle</button>
</div>
<div id="results">
Results:
</div>


<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script>
// Initialize the map
var map = L.map('map').setView([39.32, -111.69], 7); // Centered on Utah

// Add a tile layer (base map) from OpenStreetMap
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);

// 1. Red Circle around Provo, Utah
var circle = L.circle([40.2338, -111.6585], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 10000 // 10 km in meters
}).addTo(map);
circle.bindPopup("Provo, Utah");

// 2. Blue Polyline between Provo and St. George
var polyline = L.polyline([
[40.2338, -111.6585], // Provo
[37.0965, -113.5684] // St. George
], {
color: 'blue'
}).addTo(map);
polyline.bindPopup("A Road between Provo and St. George");

// 3. Polygon representing Utah's shape
var utahCoords = [
[42.00, -114.05],
[42.00, -111.05],
[41.00, -111.05],
[41.00, -109.05],
[38.50, -109.05],
[37.00, -109.05],
[37.00, -114.05]
];
var polygon = L.polygon(utahCoords, {
color: 'green',
fillColor: '#0f0',
fillOpacity: 0.3
}).addTo(map);
polygon.bindPopup("Utah");

// Function to create a triangle marker
function createTriangleIcon() {
return L.divIcon({
className: 'triangle',
iconSize: [16, 16]
});
}
//Function to compute the distance between two points using the Haversine formula
function compute_distance(lat1,lng1,lat2,lng2){
//convert inputs to radians
rad_lat1 = lat1 * Math.pi()/180;
rad_lng1 = lng1 * Math.pi()/180;
rad_lat2 = lat2 * Math.pi()/180;
rad_lng2 = lng2 * Math.pi()/180;

//Differences in coordinates
const dLat = rad_lat2 - rad_lat1;
const dLon = rad_lng2 - rad_lng1;

//Earth's radius in km (estimated)
const R = 6371;

//Haversine formula
const a = (Math.sin(dLat/2))**2 + Math.cos(rad_lat1) * Math.cos(rad_lat2) * (Math.sin((dLon)/2))**2;
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
const distance = R * c;
//a = sin²(Δφ/2) + cos(φ₁) * cos(φ₂) * sin²(Δλ/2)
//c = 2 * atan2(√a, √(1-a))
//d = R * c

//Write resulting distance
document.getElementById("results").innerHTML = "Distance = " + distance;
console.log("here");

}

// Add marker on form submission
document.getElementById('submit-button').addEventListener('click', function() {
var start_lat = parseFloat(document.getElementById('start_latitude').value);
var start_lng = parseFloat(document.getElementById('start_longitude').value);
var end_lat = parseFloat(document.getElementById('end_latitude').value);
var end_lng = parseFloat(document.getElementById('end_longitude').value);

if (!isNaN(start_lat) && !isNaN(start_lng)) {
var marker = L.marker([start_lat, start_lng], {
icon: createTriangleIcon()
}).addTo(map);
marker.bindPopup("Marker at [" + end_lat + ", " + start_lng + "]");
var marker = L.marker([end_lat, end_lng], {
icon: createTriangleIcon()
}).addTo(map);
marker.bindPopup("Marker at [" + end_lat + ", " + end_lng + "]");
//compute the distance between the two points
compute_distance();
} else {
alert('Please enter valid coordinates.');
}
});

</script>
</div>
</body>
</html>

0 comments on commit a6b0ae7

Please sign in to comment.