Laravel and Leaflet Mapping

personally, I build arrays of coordinates in the blade view direct from the database (rather than fetching the data with ajax)

Thanks @Snapey this is how I'm getting them now:

$AirVents = AirVents::all();
return view('home')->with('AirVents', $AirVents);

This is how I am looping through the json file. How do you loop through the array like you would here?

var AirVentsLayer = L.geoJSON(AirVents, {
                pointToLayer: function (feature, latlng) {
                    return L.circleMarker(latlng, airVentMarker).bindPopup("Air Vent #");
                }
            });

In the controller;

    $coordinates = $qualityEvents->map(function ($event, $key) {
            
            return [ $event->Latitude, $event->Longitude ];
            
        })->values();

Then pass this to the view

       var coords = {!! json_encode($coordinates) !!}

In this case I am creating a line on the map from coordinate to coordinate (a trace of vehicle movements)

    var tracking = L.polyline(coords, {color: 'red'}).addTo(mymap);

This gives a simple array of lat-long pairs

        var coords = [[53.02068,-1.177565],[53.02068,-1.177529],[53.01392,-1.184813],[52.9996,-1.179552],[52.98669,-1.18368],[52.97328,-1.174253],[52.96742,-1.190667],[52.95318,-1.191675],[52.94076,-1.182942],[52.92892,-1.168955],[52.91526,-1.160708],[52.90665,-1.141897],[52.90181,-1.120173],[52.89815,-1.097902],[52.88871,-1.079905],[52.88071,-1.059252],[52.86815,-1.046174],[52.85532,-1.034603],[52.84477,-1.018005],[52.83515,-0.9996923],[52.82819,-0.9809427],[52.82284,-0.9621247],[52.81105,-0.9472224],[52.8036,-0.927404],[52.79135,-0.9146115],[52.78048,-0.8994353],[52.76687,-0.8894613],[52.76664,-0.8708082],[52.76659,-0.8708736],[52.76835,-0.891149],[52.78214,-0.901139],[52.79285,-0.9176971],[52.80486,-0.9299843],[52.81324,-0.9498426],[52.82246,-0.9662115],[52.82805,-0.9852306],[52.83673,-1.002167],[52.84597,-1.020533],[52.85667,-1.036038],[52.86976,-1.047891],[52.88192,-1.062801],[52.89071,-1.082117],[52.89929,-1.101],[52.90192,-1.123934],[52.90753,-1.145736],[52.91771,-1.161882],[52.93171,-1.170847],[52.94221,-1.187391],[52.9559,-1.191321],[52.97015,-1.188462],[52.98193,-1.173294],[52.98943,-1.164274],[52.99965,-1.179563],[53.01413,-1.184821],[53.02061,-1.177719],[53.02074,-1.177584]]

I also have a more complex scenario where tooltips are created (along the same line actually)

Controller

$markers = $qualityEvents->map(function ($event, $key) {

            return [
                    'latlng' => [$event->Latitude, $event->Longitude],
                    'time' => Carbon::parse($event->EventDateTime)->format('H:i'),
                    'date' => Carbon::parse($event->EventDateTime)->format('d-m-Y'),
                    'driver' => trim($event->DriverID ?? '--'),
                    'location' => $event->Location ?? '--',
                    'site' => $event->SiteID,
                    'speed' => intval(($event->CANSpeedInKilometresPerHour ?? $event->GPSSpeedInKilometresPerHour) * 0.621371192) . 'mph',
                    'course' => $event->GPSCourseInDegrees,
                ];
        })->values();

pass this into the javascript part of the view as before

    var markers = {!! json_encode($markers) !!}

and project to the map

        //markers along the tracking line
        markers.map( function(item) {
            tip =     '<h4>Time: ' + item.time + '<small> on '+ item.date +'</small><br />'
                    + '<small>Location: ' + item.location + '</small><br />'
                    + '<small>Driver: ' + item.driver + '</small><br />'
                    + '<small>Speed: ' + item.speed; + '</small></h4>'

            if(item.site == ''){
                marker = L.marker(item.latlng,{rotationAngle: item.course, opacity:0})
                    .bindPopup(tip);
                    allmarkers.addLayer(marker);

            } else {
                L.circleMarker(item.latlng,{radius:7, color:'#0ff',stroke:false, fill:true, fillOpacity:1})
                    .addTo(mymap)
                    .bindPopup(tip);
            }
        })

@Snapey Awesome! I will try what you have and let you know! Thanks!

this is very helpful @Snapey

@snapey Could you share the project on github? Thanks a lot!