index.html

<html>

<head>
	<meta charset="UTF-8">
	<title>MGO OSM</title>
	<!-- 2022.9.30 update -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
	<script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js"></script>
	<!-- 2022.9.30 update -->
	<link rel="stylesheet" type="text/css" href="https://tile.mgoconnect.org/leaflet.css">
	<script type="text/javascript" src="https://tile.mgoconnect.org/leaflet.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css">
	<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css">
	<script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>
	<style>
		#map {
			width: 100%;
			height: 100%
		}

		.container {
			z-index: 3000;
			position: absolute;
			bottom: 0px;
			width: 350px;
			background-color: #D9EEE1;
			padding: 10px;
			margin-right: auto;
			margin-left: auto;
		}
	</style>
</head>

<body>
	<div id="map">
		<div class="container">
			<div class="form-group">
				<label for="iorPerCrew">IOR's per Crew:</label>
				<input type="number" class="form-control" id="iorPerCrew">
			</div>
			<div class="form-group">
				<label for="workType">Work Type:</label>
				<select class="form-select form-control" id="workType">
					<option>WO</option>
					<option>Billing WO</option>
					<option>PM WO</option>
				</select>
			</div>
			<div class="form-group" style="display: flex; flex-direction: row; justify-content: space-between;">
				<input type="file" class="form-control" id="fileToUpload" style="margin-right: 10px;">
				<button type="button" class="btn btn-success" id="btnUploadFile" onclick="uploadCSV()">Upload</button>
			</div>
			<div class="form-group" style="display: flex; flex-direction: row; justify-content: space-between;">
				<button type="button" class="btn btn-success" id="btnExportRouteResult" disabled onclick="exportRoute()">Export Routes</button>
				<button type="button" class="btn btn-success" id="btnExportCoordinates" disabled onclick="exportCoordinate()">Export Coordinates</button>
			</div>
		</div>
	</div>
	<script src="map.js"></script>
</body>

</html>