generated from NicMcPhee/evo-tsp-final-project
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
95 lines (81 loc) · 3.26 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>The TSP: An Evolutionary Computation Approach</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="Evolving solutions to a TSP instance" />
<meta name="author" content="Jack Perala" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300&display=swap" rel="stylesheet">
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""
/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script
src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""
></script>
</head>
<body style="font-family: 'Cormorant Garamond', serif;">
<h1>The TSP: An Evolutionary Computation Approach</h1>
<div>
<h2>Run Parameters</h2>
<label for="runId-text-field">Run ID:</label>
<input type="text" id="runId-text-field" />
<label for="population-size-text-field">Population size:</label>
<input type="text" id="population-size-text-field" />
<label for="num-parents">Number of parents to keep:</label>
<input type="text" id="num-parents" />
</div>
<div id="map" style="height: 500px; width: 500px"></div>
<div id="best-run-routes">
<h2>Best Results So Far:</h2>
<ul>
<li>Best <code>routeId</code>: <span id="best-routeId"></span></li>
<li>Best length: <span id="best-length"></span></li>
<li>
Best path: <span id="best-path"></span>
<ol id="best-route-cities"></ol>
</li>
<li>
Current threshold: <span id="current-threshold"></span>
</li>
</ul>
</div>
<div class="run-evolution">
<h2>Evolve Solutions</h2>
<label for="num-generations">How many generations to run?</label>
<input type="text" id="num-generations" />
<button id="run-evolution">Run evolution</button>
</div>
<div class="current-generation">
<h2>Current generation: <span id="current-generation"></span></h2>
<div id="new-routes">
<ol id="new-route-list"></ol>
</div>
</div>
<div class="get-best-routes">
<h2>Best Routes From Previous Generation:</h2>
<div id="best-routes">
<ol id="best-route-list"></ol>
</div>
</div>
<script src="jquery-3.6.0.min.js"></script>
<script src="async.min.js"></script>
<script src="evotsp.js"></script>
<script>
var mymap = L.map("map").setView([46.7296, -94.6859], 6); //automate or import view for future
// I got the code from this SO post while searching for bugs online
// https://stackoverflow.com/questions/37023893/leaflet-js-map-is-not-showing-up
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);
</script>
</body>
</html>