application.js

// Prepare a custom icon, since default one is not "Christmas" enough.
const treeIcon = L.icon({iconUrl: 'tree-marker.png', iconSize: [20, 20]})

const map = L.map('map', {doubleClickZoom: false}).setView([66.5039, 25.7294], 4);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
}).addTo(map);

// Create a layer group,
const linesGroup = L.layerGroup().addTo(map);

const visitsOnMap = [];

// Allow adding visits on click
map.on('click', function(e) {
    const { lat, lng } = e.latlng;
    addLocation(lat, lng);
});

// Add a location to the map and to the javascript array
function addLocation(lat, lng) {
    visitsOnMap.push({
        id: visitsOnMap.length,
        location: {
            lat: lat,
            lng: lng
        }
    })
    // Add a marker at the clicked location
    L.marker([lat, lng], {icon: treeIcon}).addTo(map);
}

// The function which will call the solver and visualize the result
function solve() {
    linesGroup.clearLayers();
    fetch('http://localhost:8080/santa/plan', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(visitsOnMap)
      })
      .then(response => response.json())
      .then(data => {
            const homeLocation = data.santa.home;
            const locations = data.santa.visits.map(visit => visit.location);

            L.polyline([homeLocation, ...locations, homeLocation]).addTo(linesGroup);

            return data;
       })
       .catch(error => {
            console.error('Fetch error:', error);
       });
}