CODEWITHSUNDEEP
vue.jsdictionaryleafletopenlayersvuelayers
coffee-and-code
coffee-and-code

Reputation: 215

Show a route on a map with Vue

I am working on a project with Vue and Leaflet that for now just shows a map and I want that when you give the start and end coordinates it colours the route from between those points (or many points and a route than goes through all of them). Unfortunately, I found that the plugin for Leaflet that uses OSRM for automating routing "will not work unless you configure a routing backend yourself". Is there an alternative to that? Any other open-source plugin for Vue Leaflet (or alternatively for OpenLayers(VueLayers) that can auto-track existing routes? Thank you in advance.

Upvotes: 1

Views: 1245

Answers (1)

Mike
Mike

Reputation: 17962

You could interface Openlayers directly with a service such as OpenRouteService https://openrouteservice.org/dev/#/api-docs/v2/directions/{profile}/json/post This code assumes a map routesMap with a vector layer orsRoute, and array routeComplete of coordinate pairs in view projection for start, optional waypoint, and end, and API key orsKey

    var viewProj = routesMap.getView().getProjection();

    var startA = ol.proj.transform(routeComplete[0], viewProj, 'EPSG:4326');
    var viaA = routeComplete[1] ? ol.proj.transform(routeComplete[1], viewProj, 'EPSG:4326') : null;
    var endA = ol.proj.transform(routeComplete[2], viewProj, 'EPSG:4326');

    var startN = startA.toString();
    var viaN = viaA ? viaA.toString() : null;
    var endN = endA.toString();


        var url = 'https://api.openrouteservice.org/v2/directions/driving-car/json';
        var params = '{"coordinates":[[' + startN + '],[' + (viaN ? viaN + '],[' : '') + endN + ']]}';

        var orsXhr = new XMLHttpRequest();

        orsXhr.onreadystatechange = function() {
            if (orsXhr.readyState == 4) {
                if (orsXhr.status == 200) {
                    var route = JSON.parse(orsXhr.responseText).routes[0];
                    var linestring = route.geometry;
                    var distance = route.summary.distance;
                    var duration = route.summary.duration;
                    orsRoute.getSource().addFeature(
                        new ol.Feature({
                            geometry: new ol.format.Polyline().readGeometry(linestring).transform('EPSG:4326', viewProj),
                            name: 'Openrouteservice',
                            distance: distance,
                            duration: duration
                        })
                    );
                    orsRoute.getSource().setAttributions('© Powered by openrouteservice');
                }
            }
        }

        orsXhr.onerror = function(e) { console.log('error'); }
        orsXhr.ontimeout = function(e) { console.log('timeout'); }

        orsXhr.open('POST', url, true);
        orsXhr.timeout = 3000;
        orsXhr.setRequestHeader('Content-type', 'application/json');
        orsXhr.setRequestHeader('Authorization', orsKey);
        orsXhr.send(params);

Upvotes: 0

Related Questions