index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Best Project on this Subject Ever!</title>
</head>
<body>
<div>
    <span style="background-color: #ff0000">WALK</span>
    <span style="background-color: #0000ff">METRO</span>
    <span style="background-color: #00ff00">BUS</span>
</div>
<div id="map" style="height: 600px;width: 80%; margin-left: 0"></div>
<div style="display: flex;margin: auto">
    <div>
        <div>
        Fastest:
            <button id="d">Dijkstra</button>
            <button id="a">AStar</button>
            <button id="alt">ALT</button>
            <button id="gt">Genetic Time</button>
        </div>
        <div style="margin-top: 10px">
            Cheapest:
            <button id="gp">Genetic Price</button>
        </div>
    </div>
    <div style="display: flex;margin: auto;flex-direction: column">
        <div>
            Price: <span id="price"></span>€
        </div>
        <div>
            Time: <span id="time"></span>
        </div>
        <div>
            Alg Time: <span id="alg_time"></span>ms
        </div>
    </div>
</div>

<script crossorigin=""
        integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
        src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"></script>

<link crossorigin="" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
      integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
      rel="stylesheet"/>
<script>
    let map = L.map('map').setView([38.02503, -8.558739], 12);
    let tiles = L.tileLayer('http://localhost:8000/{z}/{x}/{y}.png', {
        maxZoom: 20,
        attribution: '© OpenStreetMap',
    }).addTo(map);

    let first = null
    let last = null

    let firstPoint = null
    let lastPoint = null
    let LeafIcon = L.Icon.extend({
        options: {
            iconSize:     [38, 95],
            shadowSize:   [50, 64],
            iconAnchor:   [22, 94],
            shadowAnchor: [4, 62],
            popupAnchor:  [-3, -76]
        }
    })
    let redIcon = new LeafIcon({
        iconUrl: 'img/red.png',
    })
    let greenIcon = new LeafIcon({
        iconUrl: 'img/green.png',
    })
    map.on('click', function(e) {
        var popLocation= e.latlng;
        console.log(e.latlng)
        if (first != null && last != null){
            first = null
            last = null
            map.removeLayer(firstPoint);
            map.removeLayer(lastPoint);
        }
        if (first == null){
            first = e.latlng
            firstPoint =  L.marker(first, {icon: greenIcon})
                .addTo(map)
                .bindPopup("Start");
        }
        else if (last == null){
            last = e.latlng
            lastPoint =  L.marker(last, {icon: redIcon})
                .addTo(map)
                .bindPopup("Destination");
        }
    });

    function sendRequest(coordsS,coordsD,method){
        var myHeaders = new Headers();

        var myInit = { method: 'GET',
            headers: myHeaders,
            cache: 'default' };

        console.log(coordsS,coordsD)
        fetch('http://localhost:8085/?method='+method+'&slat='+coordsS.lat+"&slon="+coordsS.lng+"&dlat="+coordsD.lat+"&dlon="+coordsD.lng,myInit)
        .then((response) => {
            return response.json()
        }).then((response)=>{
            sessionStorage.setItem("price",response["price"])
            sessionStorage.setItem("time",response["time"])
            sessionStorage.setItem("alg_time",response["alg_time"])
            location.reload()
        })
    }

    let d = document.getElementById("d")
    let a = document.getElementById("a")
    let alt = document.getElementById("alt")
    let gt = document.getElementById("gt")
    let gp = document.getElementById("gp")


    let price = document.getElementById("price")
    let time = document.getElementById("time")
    let alg_time = document.getElementById("alg_time")


    load_labels("price",price)
    load_labels("time",time)
    load_labels("alg_time",alg_time)

    register_button(d,"d")
    register_button(a,"a")
    register_button(alt,"alt")
    register_button(gt,"gt")
    register_button(gp,"gp")

    function register_button(elem,method){
        if (elem){
            elem.addEventListener("click",() =>{
                if (first == null || last == null){
                    alert("Please Select the Start and Ending Points")
                }
                sendRequest(first,last,method)
            })
        }
    }

    function load_labels(key,elem){
            elem.innerText = sessionStorage.getItem(key)
    }

    function setCookie(name,value,days) {
        var expires = "";
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days*24*60*60*1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "")  + expires + "; path=/";
    }
    function getCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1,c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
    }
    function eraseCookie(name) {
        document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
    }


</script>
</body>
</html>