135 lines
8.5 KiB
HTML
135 lines
8.5 KiB
HTML
<!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: '© <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> |