Rendering Map and Waypoints in JavaScript

openrouteservice
1

I have an issue where when I render my map via JavaScript, I can’t add waypoints. My map only shows start and end points.

image
image988×492 65.7 KB

    const ORS_API_KEY = "MY_KEY"; // Substitua pela sua chave de API

    const startPoint = '-46.633308,-23.550520'; //São Paulo (SP)
    const endPoint = '-43.172896,-22.906847'; //Rio de Janeiro (RJ)
    const waypoints =['-51.229994,-30.034647']; //Grande do Sul (RS)

    const apiUrl = `https://api.openrouteservice.org/v2/directions/driving-car?api_key=${ORS_API_KEY}&start=${startPoint}&end=${endPoint}&waypoints=${waypoints.join('|')}`;


    function exibirRotaNoMapa(data) {
        const routeData = data.features[0].geometry.coordinates;
    
        const map = L.map('map').setView([0, 0], 13);
    
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
        }).addTo(map);
    
        const routeLatLng = routeData.map(coord => L.latLng(coord[1], coord[0]));
        const routePolyline = L.polyline(routeLatLng, { color: 'blue' }).addTo(map);
        map.fitBounds(routePolyline.getBounds());
    }
2

Please read the documentation:
https://openrouteservice.org/dev/#/api-docs/v2/directions/{profile}/get
You are using GET instead of POST which only supports start & end parameter.

1 Like