CODEWITHSUNDEEP
javascriptroutesleafletosrm
Aaron Herholdt
Aaron Herholdt

Reputation: 1

confirm route button not working but cancel button is

I am struggling to solve, what might be a simple problem.

Working in JS and using leaflet framework. In the routeConfirmationDialog box I have two buttons "Confirm route" and "cancel". Cancel button works. Confirm route does not work.

When I inspect in Firefox , I get an error like "undefined".

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Emergency Services Simulation</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <link rel="stylesheet" href="ambulance.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.css" />
</head>

<body>

<div id="mapid"></div>

<div id="routeConfirmationDialog">
    <p id="routeDetails">Route details will appear here.</p>
    <button onclick="confirmRoute()">Confirm Route</button>
    <button onclick="cancelRoute()">Cancel</button>
</div>

<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.js"></script>
<script src="ambulance.js"></script>

</body>
</html>

.JS section:

// Adjusted addRoute function to manage routes more dynamically
function addRoute(fromLatlng, toLatlng) {
    // Remove the previous route from the map if it exists
    if (currentRouteControl) {
        mymap.removeControl(currentRouteControl);
    }

    currentRouteControl = L.Routing.control({
        waypoints: [
            L.latLng(fromLatlng),
            L.latLng(toLatlng)
        ],
        routeWhileDragging: false,
        createMarker: function() { return null; }, // No markers at waypoints
        router: L.Routing.osrmv1({
            serviceUrl: `https://router.project-osrm.org/route/v1`
        }),
        lineOptions: {
            styles: [{color: '#ff615f', opacity: 1, weight: 5}] // Customize the route appearance
        },
        show: false, // Initially don't show route instructions
    }).addTo(mymap);

    currentRouteControl.on('routesfound', function(e) {
        var routes = e.routes;
        var summary = routes[0].summary;
        // Update the route details in the custom UI
        document.getElementById('routeDetails').innerHTML = `Distance: ${Math.round(summary.totalDistance / 1000 * 100) / 100} km, Time: ${Math.round(summary.totalTime / 60)} minutes. Confirm this route?`;
        // Show the custom UI
        document.getElementById('routeConfirmationDialog').style.display = 'block';
    });
}

function confirmRoute() {
    // Proceed with route animation
    animateMarkerAlongRoute(currentRouteControl.getWaypoints()[0].latLng, 10000); // Adjust as needed
    document.getElementById('routeConfirmationDialog').style.display = 'none';
}

function cancelRoute() {
    // Remove the current route from the map
    if (currentRouteControl) {
        mymap.removeControl(currentRouteControl);
        currentRouteControl = null;
    }
    document.getElementById('routeConfirmationDialog').style.display = 'none';
}

// Mockup function to animate marker along route - adjust based on actual data structure
function animateMarkerAlongRoute(coordinates, duration) {
    // This example assumes 'coordinates' is an array of [lat, lng] pairs
    var index = 0;
    var ambulanceMarker = L.marker(coordinates[0], {icon: emergencyIcon}).addTo(mymap); // Use an appropriate icon
    var interval = setInterval(function() {
        if (index < coordinates.length) {
            ambulanceMarker.setLatLng(coordinates[index]);
            index++;
        } else {
            clearInterval(interval);
        }
    }, duration / coordinates.length);
}

I first choose an Emergency then the hospital. Then confirm or cancel route.

I have tried to find this specific error online but nothing pops up. Is the error the actual button or is it th fact that my OSRM is just a demo.

Upvotes: 0

Views: 21

Answers (0)

Related Questions