CODEWITHSUNDEEP
jsonroutesleafletgeojson
Cesare
Cesare

Reputation: 1749

Leaflet Routing Machine: how to export route details and coordinates in JSON / GeoJSON?

I need to export / save the route details found using Leaflet Routing Machine in JSON or GeoJSON format.

I've tried to use 

var routeArray = new Array();
routeArray = control.getWaypoints();
alert (JSON.stringify(routeArray));

that works but in this manner I obtain only the waypoints and, instead, I'm interested at ALL the route details (coordinates and descriptions).

I guess that "somewhere" they are (in the picture when I put my mouse pointer on a description I can see a little blue circle on the map as you can see .... )

enter image description here

Any suggestion, example, jsfiddle to help me? Thank you very much in advance!!!

Cesare

Upvotes: 1

Views: 1814

Answers (3)

shin2
shin2

Reputation: 11

    .on('routesfound', function(e) {
        GeoJsonCode = L.Routing.routeToGeoJson(e.routes[0]);
        //console.log(GeoJsonCode);
    })

How about something like this? But I don't know where this is written.

let result;
let sp4 = '    ';
let sp8 = sp4 + sp4;
let sp12 = sp8 + sp4; 

/* ルートをGeoJsonに変換
// https://github.com/perliedman/leaflet-routing-machine/blob/344ff09c8bb94d4e42fa583286d95396d8227c65/src/L.Routing.js
// https://leafletjs.com/examples/geojson/
-----------------------------------------*/
(function() {
    'use strict';

    L.Routing.routeToGeoJson = function(route) {
        var wpNames = [],
            wpCoordinates = [],
            i,
            wp,
            latLng;


        for (i = 0; i < route.waypoints.length; i++) {
            wp = route.waypoints[i];
            latLng = L.latLng(wp.latLng);
            wpNames.push(wp.name);
            wpCoordinates.push([latLng.lng, latLng.lat]);
        }

        // for file output >>>>>>
        let arr =  wpCoordinates;
        let str = "";
        // 一次→二次元配列への変換
        // https://note.shiftinc.jp/n/naba675050c86
        for(let i = 0; i < arr.length; i += 1) {
            str = str + '[' + arr.slice(i, i + 1) + '],';
        }
        
        str = str.slice(0, str.length - 1);
        str = '[' + str + ']';
        //console.log(str);

        result = '{' + '\n' + '"type": "FeatureCollection",' + '\n' + '"features": [' + '\n' + sp4 + '{' + '\n';
        result = result  + sp8 + '"type": "Feature",' + '\n' ;
        result = result  + sp8 + '"properties": {' + '\n' + sp12 + '"id": "waypoints",' + '\n' + sp12  + '"names":"' +  wpNames + '"' + '\n' + sp8 + '},' + '\n';         
        result = result  + sp8 + '"geometry": {'+ '\n' + sp12 + '"type": "MultiPoint",'+ '\n' + sp12 + '"coordinates":' +  str  + '\n' + sp8 +  '}' + '\n';
        result = result  + sp4 + '},' + '\n' + sp4 + '{' + '\n';
        result = result  + sp8 + '"type": "Feature",' + '\n' ;
        result = result  + sp8 + '"properties": {' + '\n' + sp12 + '"id": "line"' + '\n'  + sp8 + '},' + '\n'; 
        result = result  + sp8 + '"geometry": {' + '\n' + sp12 + '"type": "LineString",' + '\n' + sp12 +'"coordinates":' + L.Routing.routeToLineString(route) + '\n' + sp8 + '}'+ '\n' + sp4 + '}]' + '\n' + '}';
        //result = result  + sp8 + '"geometry": {' + '\n' + sp12 +'"coordinates":' + L.Routing.routeToLineString(route) + '\n' + sp8 + '}'+ '\n' + sp4 + '}]' + '\n' + '}';
        // <<<<<<<

        return result 
            /*{
            type: 'FeatureCollection',
            features: [
                {
                    type: 'Feature',
                    properties: {
                        id: 'waypoints',
                        names: wpNames
                    },
                    geometry: {
                        type: 'MultiPoint',
                        coordinates: wpCoordinates
                    }
                },
                {
                    type: 'Feature',
                    properties: {
                        id: 'line',
                    },
                    geometry: {
                        "type": "LineString",
                        "coordinates": L.Routing.routeToLineString(route)
                    }
                }]
            };*/   
    };

    L.Routing.routeToLineString = function(route) {
        var lineCoordinates = [],
            i,
            latLng;

        for (i = 0; i < route.coordinates.length; i++) {
            latLng = L.latLng(route.coordinates[i]);
            lineCoordinates.push([latLng.lng, latLng.lat]);
        }

        // for file output >>>>>>
        let arr =  lineCoordinates;
        let str = "";
        for(let i = 0; i < arr.length; i += 1) {
            str = str + '[' + arr.slice(i, i + 1) + '],' ;
        }

        str = str.slice(0, str.length - 1);
        //console.log(str); 
        let buf =  '[' + '\n' +  str  + '\n' + sp12 + ']';
        // <<<<<<<

        return buf
        /*{
            type: 'LineString',
            coordinates: lineCoordinates
        };*/
    };
})();

Upvotes: 0

shin2
shin2

Reputation: 11

    .on('routesfound', function(e) {
        GeoJsonCode = L.Routing.routeToGeoJson(e.routes[0]);
        //console.log(GeoJsonCode);
    })

How about something like this? But I don't know where this is written.

Upvotes: 1

Andrey Borisko
Andrey Borisko

Reputation: 4609

You need to handle routeselected event from your L.Routing.control object:

routingCtrl.on('routeselected', function(routes) {
    console.log(routes);
    console.log(routes.route.instructions);
}, this);

The routes variable contains all the information lealfet machine uses to build what you see on the screen. Check specifically routes.route.instructions and routes.route.coordinates objects

Upvotes: 2

Related Questions