84 lines
2.8 KiB
JavaScript
84 lines
2.8 KiB
JavaScript
import './style.css'
|
|
|
|
async function main(){
|
|
const {Map} = await google.maps.importLibrary("maps");
|
|
const map = new Map(document.getElementById("map"),{
|
|
center: {lat: 42.10125081757972, lng:-75.94181323552698},
|
|
zoom: 14
|
|
});
|
|
const UI = document.createElement("div");
|
|
UI.id = "UI";
|
|
|
|
const from_lattitude_input = document.createElement("input");
|
|
from_lattitude_input.placeholder = "42.10125081757972";
|
|
from_lattitude_input.type = "number";
|
|
from_lattitude_input.id = "from_lattitude_input";
|
|
UI.appendChild(from_lattitude_input);
|
|
|
|
const from_longitude_input = document.createElement("input");
|
|
from_longitude_input.type = "number";
|
|
from_longitude_input.placeholder = "-75.94181323552698";
|
|
from_longitude_input.id = "from_longitude_input";
|
|
UI.appendChild(from_longitude_input);
|
|
|
|
const from_pos_button = document.createElement("button");
|
|
from_pos_button.id = "from_pos_button";
|
|
from_pos_button.innerText = "Set Start Position";
|
|
let from_pos_toggle = false;
|
|
UI.appendChild(from_pos_button);
|
|
from_pos_button.addEventListener("click",e=>{
|
|
from_pos_toggle = !from_pos_toggle;
|
|
to_pos_toggle = false;
|
|
});
|
|
|
|
const to_lattitude_input = document.createElement("input");
|
|
to_lattitude_input.placeholder = "42.10125081757972";
|
|
to_lattitude_input.type = "number";
|
|
UI.appendChild(to_lattitude_input);
|
|
|
|
const to_longitude_input = document.createElement("input");
|
|
to_longitude_input.type = "number";
|
|
to_longitude_input.placeholder = "-75.94181323552698";
|
|
UI.appendChild(to_longitude_input);
|
|
|
|
const to_pos_button = document.createElement("button");
|
|
to_pos_button.id = "to_pos_button"
|
|
to_pos_button.innerText = "Set End Position"
|
|
let to_pos_toggle = false;
|
|
to_pos_button.addEventListener("click",e=>{
|
|
to_pos_toggle = !to_pos_toggle;
|
|
from_pos_toggle = false;
|
|
});
|
|
UI.appendChild(to_pos_button);
|
|
|
|
const sub_button = document.createElement("button");
|
|
sub_button.addEventListener("click",submit_func(map));
|
|
sub_button.id = "sub_button";
|
|
sub_button.innerText = "Submit";
|
|
UI.appendChild(sub_button);
|
|
|
|
map.addListener("click", e=>{
|
|
const {lat, lng} = e.latLng;
|
|
if(from_pos_toggle){
|
|
from_lattitude_input.value = lat();
|
|
from_longitude_input.value = lng();
|
|
}
|
|
if(to_pos_toggle){
|
|
to_lattitude_input.value = lat();
|
|
to_longitude_input.value = lng();
|
|
}
|
|
});
|
|
document.body.appendChild(UI)
|
|
const time = new Date().toISOString();
|
|
|
|
}
|
|
function submit_func(map){
|
|
//TODO: grab the path and show the poly lines and the bus route name
|
|
async function submit(clickEvent){
|
|
let from_lat = document.getElementById("from_lattitude_input");
|
|
let from_lon = document.getElementById("from_longitude_input");
|
|
}
|
|
return submit;
|
|
}
|
|
|
|
main();
|