leaflet updated

1 files changed, 11 insertions, 44 deletions

diff --git a/templates/index.js b/templates/index.js
index bc05ed7..b47ab72 100644
--- a/templates/index.js
+++ b/templates/index.js
@@ -1,22 +1,12 @@
-var map;
+const map = L.map('map').setView([58.40384776751319, 15.578484535217285], 15);
 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)
-}
+L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+}).addTo(map);
 
 async function postShortestPath(event){
     event.preventDefault()
@@ -38,42 +28,19 @@ async function postShortestPath(event){
     })
 
     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)
-}
+    var poly = L.polyline(res.path).addTo(map)
 
-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 
+function handleMapClick ({latlng}){
+    var {lat, lng} = latlng 
+    var marker = L.marker([lat, lng]).addTo(map)
     var posNumber = markerIsStart.checked ? '1' : '2'
-    document.querySelector('#lat' + posNumber).value = lat()
-    document.querySelector('#lng' + posNumber).value = lng()
+    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
+map.on('click', handleMapClick)