diff --git a/src/Controller/HubController.php b/src/Controller/HubController.php
index 531e290a..ffce16f6 100644
--- a/src/Controller/HubController.php
+++ b/src/Controller/HubController.php
@@ -18,6 +18,7 @@ use DateTime;
 use Catalyst\MenuBundle\Annotation\Menu;
 
 use App\Service\MapTools;
+use App\Service\RiderTracker;
 
 class HubController extends Controller
 {
@@ -321,7 +322,7 @@ class HubController extends Controller
         ]);
     }
 
-    public function getHubRiders(Request $req)
+    public function getHubRiders(Request $req, RiderTracker $rider_tracker)
     {
         // get hub id
         $hub_id = $req->query->get('id');
@@ -348,12 +349,20 @@ class HubController extends Controller
             if ($num_riders > $riders_limit)
                 break;
 
+            // get location for each rider
+            $rider_id = $rider->getID();
+            $coordinates = $rider_tracker->getRiderLocation($rider_id);
+
+            $lat = $coordinates->getLatitude();
+            $long = $coordinates->getLongitude();
+
             $riders[] = [
                 'id' => $rider->getID(),
                 'first_name' => $rider->getFirstName(),
                 'last_name' => $rider->getLastName(),
                 'contact_num' => $rider->getContactNumber(),
                 'plate_num' => $rider->getPlateNumber(),
+                'location' => [$lat, $long],
             ];
 
             $num_riders++;
diff --git a/templates/job-order/form.onestep.html.twig b/templates/job-order/form.onestep.html.twig
index 39b147fd..c9e14254 100644
--- a/templates/job-order/form.onestep.html.twig
+++ b/templates/job-order/form.onestep.html.twig
@@ -584,6 +584,7 @@ $(function() {
 
     var markerLayerGroup = L.layerGroup().addTo(osm_map);
     var hubLayerGroup = L.layerGroup().addTo(osm_map);
+    var riderLayerGroup = L.layerGroup().addTo(osm_map);
 
     var icon_customer = L.divIcon({
         className: 'map-div-icon',
@@ -597,7 +598,12 @@ $(function() {
         iconSize: [39, 42],
         iconAnchor: [15, 42]
     });
-
+    var icon_rider_available = L.divIcon({
+        className: 'map-div-icon',
+        html: "<div style='background-color:#00FF00;' class='marker-pin'></div><i class='fa fa-bolt awesome'>",
+        iconSize: [39, 42],
+        iconAnchor: [15, 42]
+    });
 
     function selectPoint(lat, lng)
     {
@@ -694,6 +700,8 @@ $(function() {
         $('#hubs-table').on('click', 'tr', function() {
             var id = $(this).data('id');
 
+            riderLayerGroup.clearLayers();
+
             if (id != selected_hub) {
 
                 // highlight this row
@@ -713,6 +721,10 @@ $(function() {
                     var riders = data['riders'];
                     for (i in riders) {
                         var rider = riders[i];
+                        var rider_lat = rider['location'][0];
+                        var rider_lng = rider['location'][1];
+                        var rider_marker = L.marker([rider_lat, rider_lng], { icon: icon_rider_available });
+                        riderLayerGroup.addLayer(rider_marker);
 
                         rider_table += '<tr data-id=' + rider['id'] + '>';
                         rider_table += '<td>' + rider['first_name'] + '</td>';