diff --git a/public/assets/js/dashboard_map.js b/public/assets/js/dashboard_map.js
index f50c7520..a0857a47 100644
--- a/public/assets/js/dashboard_map.js
+++ b/public/assets/js/dashboard_map.js
@@ -5,9 +5,11 @@ class DashboardMap {
         this.cust_markers = cust_markers;
 
         // layer groups
-        this.lg_avail_rider = L.layerGroup();
-        this.lg_jo_rider = L.layerGroup();
-        this.lg_cust = L.layerGroup();
+        this.layer_groups = {
+            'rider_available': L.layerGroup(),
+            'rider_active_jo': L.layerGroup(),
+            'customer': L.layerGroup()
+        };
     }
 
     initialize() {
@@ -26,9 +28,9 @@ class DashboardMap {
         }).addTo(this.map);
 
         // layer groups
-        this.lg_avail_rider.addTo(this.map);
-        this.lg_jo_rider.addTo(this.map);
-        this.lg_cust.addTo(this.map);
+        this.layer_groups.rider_available.addTo(this.map);
+        this.layer_groups.rider_active_jo.addTo(this.map);
+        this.layer_groups.customer.addTo(this.map);
 
         // base layer
         var baseMaps = {
@@ -37,9 +39,9 @@ class DashboardMap {
 
         // overlay layer
         var overlayMaps = {
-            'Available Riders' : this.lg_avail_rider,
-            'JO Riders' : this.lg_jo_rider,
-            'Customers' : this.lg_cust
+            'Available Riders' : this.layer_groups.rider_available,
+            'JO Riders' : this.layer_groups.rider_active_jo,
+            'Customers' : this.layer_groups.customer
         }
 
         L.control.layers(baseMaps, overlayMaps).addTo(this.map);
@@ -47,6 +49,69 @@ class DashboardMap {
         return this.map;
     }
 
+    putMarker(id, lat, lng, markers, icon, layer_group, popup_url) {
+        var my = this;
+        // existing marker
+        if (markers.hasOwnProperty(id)) {
+            markers[id].setLatLng(L.latLng(lat, lng));
+            return;
+        }
+
+        // new marker
+        markers[id] = L.marker(
+            [lat, lng],
+            { icon: icon }
+        ).bindPopup('Loading...')
+        .addTo(layer_group);
+
+        // bind ajax for popup
+        markers[id].on('click', function(e) {
+            var popup = e.target.getPopup();
+            var url = popup_url.replace('[id]', id);
+            console.log(url);
+            $.get(url).done(function(data) {
+                popup.setContent(data);
+                popup.update();
+            });
+        });
+    }
+
+    putCustomerMarker(id, lat, lng) {
+        this.putMarker(
+            id,
+            lat,
+            lng,
+            this.cust_markers,
+            this.options.icons.customer,
+            this.layer_groups.customer,
+            this.options.cust_popup_url
+        );
+    }
+
+    putRiderAvailableMarker(id, lat, lng) {
+        this.putMarker(
+            id,
+            lat,
+            lng,
+            this.rider_markers,
+            this.options.icons.rider_available,
+            this.layer_groups.rider_available,
+            this.options.rider_popup_url
+        );
+    }
+
+    putRiderActiveJOMarker(id, lat, lng) {
+        this.putMarker(
+            id,
+            lat,
+            lng,
+            this.rider_markers,
+            this.options.icons.rider_active_jo,
+            this.layer_groups.rider_active_jo,
+            this.options.rider_popup_url
+        );
+    }
+
     loadLocations(location_url) {
         console.log(this.rider_markers);
         var my = this;
@@ -54,9 +119,9 @@ class DashboardMap {
             url: location_url,
         }).done(function(response) {
             // clear all markers
-            my.lg_avail_rider.clearLayers();
-            my.lg_jo_rider.clearLayers();
-            my.lg_cust.clearLayers();
+            my.layer_groups.rider_available.clearLayers();
+            my.layer_groups.rider_active_jo.clearLayers();
+            my.layer_groups.customer.clearLayers();
             // get riders and mark
             var riders = response.riders;
 
@@ -64,48 +129,22 @@ class DashboardMap {
                 // rider location
                 var point = rider_data['loc'];
                 var lat = point[0];
-                var long = point[1];
+                var lng = point[1];
 
                 // customer location
                 var cloc = rider_data['cust_loc'];
                 var clat = cloc[0];
-                var clong = cloc[1];
+                var clng = cloc[1];
 
                 // create rider markers
                 if (rider_data['has_jo']) {
                     var jo_data = rider_data['jo'];
 
-                    my.rider_markers[rider_id] = L.marker([lat, long], { icon: my.options.icons.rider_active_jo }).bindPopup('Loading...');
-                    my.cust_markers[jo_data['id']] = L.marker([clat, clong], { icon: my.options.icons.customer }).bindPopup('Loading...');
-
-                    my.lg_cust.addLayer(my.cust_markers[jo_data['id']]);
-                    my.lg_jo_rider.addLayer(my.rider_markers[rider_id]);
-
-                    // customer popup ajax
-                    my.cust_markers[jo_data['id']].on('click', function(e) {
-                        var popup = e.target.getPopup();
-                        var url = my.options.cust_popup_url.replace('[id]', jo_data['id']);
-                        console.log(url);
-                        $.get(url).done(function(data) {
-                            popup.setContent(data);
-                            popup.update();
-                        });
-                    });
+                    my.putCustomerMarker(jo_data['id'], clat, clng);
+                    my.putRiderActiveJOMarker(rider_id, lat, lng);
                 } else {
-                    my.rider_markers[rider_id]= L.marker([lat, long], { icon: my.options.icons.rider_available }).bindPopup('Loading...');
-                    my.lg_avail_rider.addLayer(my.rider_markers[rider_id]);
+                    my.putRiderAvailableMarker(rider_id, lat, lng);
                 }
-
-                // ajax loading of rider popup
-                my.rider_markers[rider_id].on('click', function(e) {
-                    var popup = e.target.getPopup();
-                    var url = my.options.rider_popup_url.replace('[id]', rider_id);
-                    console.log(url);
-                    $.get(url).done(function(data) {
-                        popup.setContent(data);
-                        popup.update();
-                    });
-                });
             });
 
             // console.log(rider_markers);
diff --git a/public/assets/js/map_mqtt.js b/public/assets/js/map_mqtt.js
index 39272c4f..8af023df 100644
--- a/public/assets/js/map_mqtt.js
+++ b/public/assets/js/map_mqtt.js
@@ -1,8 +1,7 @@
 class MapEventHandler {
-    constructor(options, rider_markers, cust_markers) {
+    constructor(options, dashmap) {
         this.options = options;
-        this.rider_markers = rider_markers;
-        this.cust_markers = cust_markers;
+        this.dashmap = dashmap;
     }
     
     connect(user_id, host, port) {
@@ -12,23 +11,29 @@ class MapEventHandler {
 
         this.mqtt = new Paho.MQTT.Client(host, port, client_id);
         var options = {
-            useSSL: true,
+            // useSSL: true,
             timeout: 3,
-            onSuccess: this.onConnect,
+            invocationContext: this,
+            onSuccess: this.onConnect.bind(this),
         };
 
-        this.mqtt.onMessageArrived = this.onMessage;
+        this.mqtt.onMessageArrived = this.onMessage.bind(this);
 
         console.log('connecting to mqtt server...');
         this.mqtt.connect(options);
-
-        return this.mqtt;
     }
 
-    onConnect() {
-        console.log('connected!');
+    onConnect(icontext) {
+        console.log('mqtt connected!');
+        var my = icontext.invocationContext;
 
-        this.mqtt.subscribe(this.options.channels.rider_location);
+        // subscribe to rider locations
+        console.log('subscribing to ' + my.options.channels.rider_location);
+        my.mqtt.subscribe(my.options.channels.rider_location);
+
+        // subscribe to jo locations
+        console.log('subscribing to ' + my.options.channels.jo_location);
+        my.mqtt.subscribe(my.options.channels.jo_location);
     }
 
     onMessage(msg) {
@@ -44,6 +49,9 @@ class MapEventHandler {
             case "rider":
                 this.handleRider(chan_split, payload);
                 break;
+            case "jo":
+                this.handleJobOrder(chan_split, payload);
+                break;
         }
     }
 
@@ -52,7 +60,7 @@ class MapEventHandler {
         switch (chan_split[2]) {
             case "location":
                 console.log("got location for rider " + chan_split[1] + " - " + payload);
-                pl_split = payload.split(':');
+                var pl_split = payload.split(':');
                 console.log(pl_split);
 
                 // check for correct format
@@ -62,19 +70,31 @@ class MapEventHandler {
                 var lat = parseFloat(pl_split[0]);
                 var lng = parseFloat(pl_split[1]);
 
-                // move marker
-                console.log(this.rider_markers[chan_split[1]]);
+                this.dashmap.putRiderAvaialbleMarker(chan_split[1], lat, lng);
+                break;
+        }
+    }
 
-                // check if marker exists
-                if (this.rider_markers.hasOwnProperty(chan_split[1])) {
-                    // marker's there, move it
-                    this.rider_markers[chan_split[1]].setLatLng(L.latLng(lat, lng));
-                } else {
-                    // no marker, make one
-                    console.log('creating marker');
-                    // TODO: make it add to the correct map layer
-                    this.rider_markers[chan_split[1]]= L.marker([lat, lng], { icon: this.options.icons.rider_available }).addTo(map);;
-                }
+    handleJobOrder(chan_split, payload) {
+        console.log("jo message");
+        switch (chan_split[2]) {
+            case "location":
+				var my = this;
+				var id = chan_split[1];
+                console.log("got location for jo " + id + " - " + payload);
+                var pl_split = payload.split(':');
+
+                // check for correct format
+                if (pl_split.length != 2)
+                    break;
+
+                var lat = parseFloat(pl_split[0]);
+                var lng = parseFloat(pl_split[1]);
+
+                // move marker
+                console.log(lat + ' - ' + lng);
+
+                this.dashmap.putCustomerMarker(id, lat, lng);
                 break;
         }
     }
diff --git a/src/EventListener/JobOrderActiveCache.php b/src/EventListener/JobOrderActiveCache.php
index fb82b22c..3ce0502a 100644
--- a/src/EventListener/JobOrderActiveCache.php
+++ b/src/EventListener/JobOrderActiveCache.php
@@ -49,6 +49,24 @@ class JobOrderActiveCache
     // when a job order is updated
     public function postUpdate(JobOrder $jo, LifecycleEventArgs $args)
     {
+        $status = $jo->getStatus();
+
+        switch ($status)
+        {
+            // active
+            case JOStatus::PENDING:
+            case JOStatus::RIDER_ASSIGN:
+            case JOStatus::ASSIGNED:
+            case JOStatus::IN_TRANSIT:
+            case JOStatus::IN_PROGRESS:
+                $this->processActiveJO($jo);
+                break;
+            // inactive
+            case JOStatus::CANCELLED:
+            case JOStatus::FULFILLED:
+                $this->processInactiveJO($jo);
+                break;
+        }
     }
 
     // when a job order is deleted
@@ -62,9 +80,18 @@ class JobOrderActiveCache
 
         // put in redis cache
         error_log('add ' . $this->key . ' - (' . $coords->getLongitude() . ', ' . $coords->getLatitude() . ') - ' . $jo->getID());
-        $this->redis->geoadd($this->key, $coords->getLongitude(), $coords->getLatitude(), $jo->getID());
+        $this->redis->geoadd(
+            $this->key,
+            $coords->getLongitude(),
+            $coords->getLatitude(),
+            $jo->getID()
+        );
 
-        // TODO: publish to mqtt
+        // publish to mqtt
+        $this->mqtt->publish(
+            'jo/' . $jo->getID() . '/location',
+            $coords->getLatitude() . ':' . $coords->getLongitude()
+        );
     }
 
     protected function processInactiveJO($jo)
diff --git a/src/Service/JobOrderHandler/CMBJobOrderHandler.php b/src/Service/JobOrderHandler/CMBJobOrderHandler.php
index 4803e1ec..50c504fc 100644
--- a/src/Service/JobOrderHandler/CMBJobOrderHandler.php
+++ b/src/Service/JobOrderHandler/CMBJobOrderHandler.php
@@ -164,7 +164,7 @@ class CMBJobOrderHandler implements JobOrderHandlerInterface
             $row['delivery_address'] = $orow->getDeliveryAddress();
             $row['date_schedule'] = $orow->getDateSchedule()->format("d M Y g:i A");
             $row['type'] = $orow->isAdvanceOrder() ? 'Advanced Order' : 'Immediate';
-            $row['service_type'] = $service_types[$orow->getServiceType()];
+            $row['service_type'] = $service_types[$orow->getServiceType()] ?? 'Unknown';
             $row['status'] = $statuses[$orow->getStatus()];
             $row['flag_advance'] = $orow->isAdvanceOrder();
             $row['plate_number'] = $orow->getCustomerVehicle()->getPlateNumber();
diff --git a/templates/home.html.twig b/templates/home.html.twig
index e0b77426..50f5a177 100644
--- a/templates/home.html.twig
+++ b/templates/home.html.twig
@@ -43,14 +43,13 @@ function initMap(r_markers, c_markers, icons) {
 
 function initEventHandler(dashmap) {
     var options = {
-        'map': dashmap.map,
         'channels': {
-            'rider_location': 'rider/+/location'
+            'rider_location': 'rider/+/location',
+            'jo_location': 'jo/+/location'
         },
-        'icons': icons
     };
 
-    var event_handler = new MapEventHandler(options, dashmap.rider_markers, dashmap.cust_markers);
+    var event_handler = new MapEventHandler(options, dashmap);
     event_handler.connect('{{ app.user.getID }}', '{{ mqtt_host }}', {{ mqtt_port }});
 }