sql to leaflet js animated markers

Question

I have a set of geo coordinates (GPS points) in the data base(SQL) which I want to access and load to the leaflet line method. I understand that i will need a middleware to produce a json file from the database which will then be used inside my script as a var but when i load this var specified with the json file in the line method it doesnt work. Can someone help with this ?

    var apiKey = '4fb2ff96122544b6834c508275d62b25',
                styleID = '997';



var myIcon = L.icon({
    iconUrl: 'img/car.png',
    iconAnchor: [24, 30]
});

var data = L.geoJson ("../json.geojson");


    $(document).ready(function() {

        var sidebar = L.control.sidebar('sidebar', {
            closeButton: true,
            position: 'left'
        });


        //setTimeout(function () {
        //  sidebar.show();
        //}, 500);




            var southWest = new L.LatLng(52.978778, 8.350296),
                northEast = new L.LatLng(53.220733, 9.099426),
                bounds = new L.LatLngBounds(southWest, northEast);

             var latlng = new L.LatLng(53.079296,8.801694);
             var map = new L.Map('map_holder', 
                                {
                                    center: latlng, 
                                    zoom: 10, 
                                    maxBounds: bounds, 
                                    zoomControl: true
                                }); 

            var line = [
                       L.polyline([[53.061047, 8.769021],[53.07162, 8.783612],[53.087707, 8.797774]],{color: 'red'}),
                       L.polyline([[53.057401, 8.963299],[53.059258, 8.898411],[53.071636, 8.863735],[53.079061, 8.82597],[53.077412,8.81979],[53.089372,8.796444],[53.112253,8.81052]]),
                       L.polyline([[53.047863, 8.818846],[53.032426, 8.810177],[53.023193, 8.802109],[53.008838, 8.798676],[53.001607,8.795242],[52.998921,8.784256],[52.995822,8.766232]]),
                       L.polyline([[53.147362, 8.732414],[53.116465, 8.811378],[53.10616, 8.87661],[53.079358, 8.919182],[53.07317, 8.961067],[53.050475, 8.973427],[53.026529,9.018059]])
                       L.polyline([data.getLatLngs])
                    ];

                $.each(line, function(i-1, line) {
                 var animatedMarker = L.animatedMarker(line.getLatLngs(),{
                 icon:myIcon});
                var Marker = L.marker([53.061047, 8.769021],{icon:myIcon}).addTo(map);  
                Marker.bindPopup("I am a Car");
                animatedMarker.bindPopup("I am also a car");



                    map.addLayer(animatedMarker);
                    map.addLayer(line);
                    map.addControl(sidebar);
                    map.on('click', function () {
                        sidebar.show();
                })

            });

Answer 1

I believe that this line:

var data = L.geoJson ("../json.geojson");

Should be:

var data = L.geoJson ("../geojson.json");

.geojson is not a valid json file extention.