first draft

1 files changed, 79 insertions, 0 deletions

diff --git a/templates/index.js b/templates/index.js
new file mode 100644
index 0000000..bc05ed7
--- /dev/null
+++ b/templates/index.js
@@ -0,0 +1,79 @@
+var map;
+const form = document.querySelector('#path-form')
+const markerIsStart = document.querySelector("#marker-point-start")
+const markerIsEnd = document.querySelector("#marker-point-end")
+
+google.maps.event.addDomListener(window, 'load', initialize);
+form.addEventListener('submit', postShortestPath, false)
+
+
+function initialize() {
+    var mapOptions = {
+        center: new google.maps.LatLng(58.40384776751319, 15.578484535217285),
+        zoom: 15,
+        mapTypeId: google.maps.MapTypeId.ROADMAP
+    };
+    var mapCanvas = document.getElementById("map_canvas")
+    map = new google.maps.Map(mapCanvas, mapOptions);
+    google.maps.event.addListener(map, 'click', handleMapClick)
+}
+
+async function postShortestPath(event){
+    event.preventDefault()
+    var lat1 = parseFloat(document.querySelector('#lat1').value)
+    var lng1 = parseFloat(document.querySelector('#lng1').value)
+    var lat2 = parseFloat(document.querySelector('#lat2').value)
+    var lng2 = parseFloat(document.querySelector('#lng2').value)
+
+    // Check that they're not Nan (stops function if one is Nan)
+    if(!lat1 || !lng1  || !lat2 || !lng2)
+        return alert('Formatting Error: Coordinates are not float values.')
+    
+    req = {lat1, lng1, lat2, lng2} // Dictionary auto-keys
+
+    res = await fetch('/shortest-path', {
+        method:'POST',
+        credentials: 'same-origin',
+        body: JSON.stringify(req)
+    })
+
+    res = await res.json() 
+    var points = new google.maps.MVCArray()
+    console.log(res.path)
+    res.path.map(coord=>{
+        var [lat, lng] = coord
+        var point = new google.maps.LatLng(lat, lng)
+        points.push(point)
+    })
+
+    createPolyline(points)
+}
+
+function createPolyline(points){
+    var polyline = new google.maps.Polyline({
+        path: points,
+        map: map
+    });
+}
+
+function handleMapClick ({latLng}){
+    createMarker(latLng, `Click: ${latLng}`)
+    console.log(latLng)
+    var {lat, lng} = latLng 
+    var posNumber = markerIsStart.checked ? '1' : '2'
+    document.querySelector('#lat' + posNumber).value = lat()
+    document.querySelector('#lng' + posNumber).value = lng()
+    if(markerIsStart.checked)
+        markerIsEnd.checked = true 
+    
+
+}
+
+
+function createMarker (position, title){
+    return new google.maps.Marker({
+        map,
+        position,
+        title
+    })
+}
\ No newline at end of file