80 lines
3.5 KiB
HTML
80 lines
3.5 KiB
HTML
<!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: '© <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> |