diff options
| author | jullinator <justus.karlsson@hotmail.se> | 2018-08-17 23:56:49 +0200 |
|---|---|---|
| committer | jullinator <justus.karlsson@hotmail.se> | 2018-08-17 23:56:49 +0200 |
| commit | 30879149f544a6cb1ebbeb3c27c467c479d0d448 (patch) | |
| tree | dcfb7d6fc153223a20739e6161246d8ea00ee293 /templates | |
| download | tdde25-30879149f544a6cb1ebbeb3c27c467c479d0d448.tar.gz | |
first draft
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/index.css | 11 | ||||
| -rw-r--r-- | templates/index.html | 52 | ||||
| -rw-r--r-- | templates/index.js | 79 |
3 files changed, 142 insertions, 0 deletions
diff --git a/templates/index.css b/templates/index.css new file mode 100644 index 0000000..f8bab2c --- /dev/null +++ b/templates/index.css @@ -0,0 +1,11 @@ +html { height: 100% } +body { height: 80%; margin: 0; padding: 0 } +#map_canvas { height: 100%; width: 100% } +.row { + display:flex; +} +.col { + display: flex; + flex-direction: column; + margin: 2%; +}
\ No newline at end of file diff --git a/templates/index.html b/templates/index.html new file mode 100644 index 0000000..71a0005 --- /dev/null +++ b/templates/index.html @@ -0,0 +1,52 @@ +<html> + <head> + <meta name="viewport"content="initial-scale=1.0, user-scalable=no"/> + + {{ templates/index.css }} + + </head> + + <body> + + <div id="map_canvas"></div> + + <form id="path-form"> + <div class="row" > + <div class="col"> + Place marker for: + <div> + <input type="radio" name="marker-point" id="marker-point-start" checked="true" /> + <label for="marker-point-start">Start</label> + </div> + <div> + <input type="radio" name="marker-point" id="marker-point-end" /> + <label for="marker-point-end">Destination</label> + </div> + </div> + <div class="col"> + <div> + <label for="lat1">Start lat:</label> + <input name="lat1" id="lat1" /> + </div> + <div> + <label for="lng1">Start lng:</label> + <input name="lng1" id="lng1" /> + </div> + </div> + <div class="col"> + <div> + <label for="lat2">End latitude:</label> + <input name="lat2" id="lat2" /> + </div> + <div> + <label for="lng2">End longitude:</label> + <input name="lng2" id="lng2" /> + </div> + </div> + <input type="submit" /> + </div> + </form> + <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBO7iAytSrxMTS21EovrsGI2TI73F3TyYg&sensor=false"></script> + {{ templates/index.js }} + </body> +</html> 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 |