resq/public/assets/js/dashboard_map.js

class DashboardMap {
    constructor(options, rider_markers, cust_markers) {
        this.options = options;
        this.rider_markers = rider_markers;
        this.cust_markers = cust_markers;
        this.rider_availability = {};

        // layer groups
        this.layer_groups = {
            'rider_available': L.layerGroup(),
            'rider_active_jo': L.layerGroup(),
            'customer': L.layerGroup(),
            'mobile_customer': L.layerGroup(),
        };
    }

    initialize() {
        // main map
        this.map = L.map(this.options.div_id).setView(
            [this.options.center_lat, this.options.center_lng],
            this.options.zoom
        );

        // add tile layer
        var streets = L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key={accessToken}',{
			tileSize: 512,
			zoomOffset: -1,
			minZoom: 1,
			attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>',
			crossOrigin: true,
            accessToken: this.options.access_token
		  }).addTo(this.map);

		/*
        // NOTE: this is for mapbox
        var streets = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            id: 'mapbox/streets-v11',
            accessToken: this.options.access_token
        }).addTo(this.map);
		*/

        // layer groups
        this.layer_groups.rider_available.addTo(this.map);
        this.layer_groups.rider_active_jo.addTo(this.map);
        this.layer_groups.customer.addTo(this.map);
        this.layer_groups.mobile_customer.addTo(this.map);

        // base layer
        var baseMaps = {
            'Streets': streets
        };

        if (this.options.display_overlay) {
            // overlay layer
            var overlayMaps = {
                'Available Riders' : this.layer_groups.rider_available,
                'JO Riders' : this.layer_groups.rider_active_jo,
                'Customers' : this.layer_groups.customer,
                'Mobile Customers': this.layer_groups.mobile_customer
            }

            L.control.layers(baseMaps, overlayMaps).addTo(this.map);
        }

        return this.map;
    }

    switchRiderStatus(rider_id, rider_status) {
        console.log('switching rider ' + rider_id + ' to ' + rider_status);

        // find the marker
        console.log(this.rider_markers);
        if (this.rider_markers.hasOwnProperty(rider_id)) {
            var marker = this.rider_markers[rider_id];
        } else {
            // TODO: call ajax to get location and create marker
            console.log('marker not found for rider');
            return true;
        }

        // add it to proper layer group
        console.log(rider_status);
        if (rider_status == 'available') {
            this.layer_groups.rider_active_jo.removeLayer(marker);
            this.layer_groups.rider_available.addLayer(marker);
            marker.setIcon(this.options.icons.rider_available);
        } else if (rider_status == 'jo') {
            this.layer_groups.rider_available.removeLayer(marker);
            this.layer_groups.rider_active_jo.addLayer(marker);
            marker.setIcon(this.options.icons.rider_active_jo);
        }
    }

    switchJobOrderOrigin(jo_id, jo_origin) {
        console.log('switching jo ' + jo_id +  ' to ' + jo_origin);

        // find the marker
        if (this.cust_markers.hasOwnProperty(jo_id)) {
            var marker = this.cust_markers[jo_id];
        } else {
            console.log('marker not found for customer');
            return true;
        }

        // add marker to proper layer group
        console.log(jo_origin);
        if (jo_origin == 'mobile') {
            this.layer_groups.customer.removeLayer(marker);
            this.layer_groups.mobile_customer.addLayer(marker);
            marker.setIcon(this.options.icons.mobile_customer);
        } else {
            this.layer_groups.mobile_customer.removeLayer(marker);
            this.layer_groups.customer.addLayer(marker);
            marker.setIcon(this.options.icons.customer);
        }
    }

    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 }
        ).addTo(layer_group);

        if (my.options.enable_popup) {
            markers[id].bindPopup('Loading...');

            // 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();
               });
            });
        }
    }

    putMarkerWithLabel(id, lat, lng, markers, icon, layer_group, popup_url, name) {
        var my = this;
        // existing marker
        if (markers.hasOwnProperty(id)) {
            markers[id].setLatLng(L.latLng(lat, lng));
            return;
        }

        // new marker
        // add label
        markers[id] = L.marker(
            [lat, lng],
            { icon: icon }
        );

        var marker_label = id + ' - ' + name;

        markers[id].bindTooltip(marker_label,
            {
                permanent: true,
                direction: 'right'
            }
        );

        markers[id].addTo(layer_group);

        if (my.options.enable_popup) {
            markers[id].bindPopup('Loading...');

            // 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
        );
    }

    removeCustomerMarker(id) {
        console.log('removing customer marker for ' + id);
        var markers = this.cust_markers;

        // no customer marker with that id
        if (!markers.hasOwnProperty(id)) {
            console.log('no such marker to remove');
            return;
        }

        this.layer_groups.customer.removeLayer(markers[id]);
        this.layer_groups.mobile_customer.removeLayer(markers[id]);

        delete markers[id];
    }

    putMobileCustomerMarker(id, lat, lng) {
        this.putMarker(
            id,
            lat,
            lng,
            this.cust_markers,
            this.options.icons.mobile_customer,
            this.layer_groups.mobile_customer,
            this.options.cust_popup_url
        );
    }

    putRiderAvailableMarker(id, lat, lng, name) {
        this.putMarkerWithLabel(
            id,
            lat,
            lng,
            this.rider_markers,
            this.options.icons.rider_available,
            this.layer_groups.rider_available,
            this.options.rider_popup_url,
            name
        );
    }

    putRiderActiveJOMarker(id, lat, lng, name) {
        this.putMarkerWithLabel(
            id,
            lat,
            lng,
            this.rider_markers,
            this.options.icons.rider_active_jo,
            this.layer_groups.rider_active_jo,
            this.options.rider_popup_url,
            name
        );
    }

    removeRiderMarker(id) {
        console.log('removing rider marker for ' + id);
        var markers = this.rider_markers;

        if (!markers.hasOwnProperty(id)) {
            console.log('no such marker to remove');
            return;
        }

        this.layer_groups.rider_active_jo.removeLayer(markers[id]);
        this.layer_groups.rider_available.removeLayer(markers[id]);

        delete markers[id];
    }

    loadLocations(location_url) {
        console.log(this.rider_markers);
        var my = this;
        $.ajax({
            url: location_url,
        }).done(function(response) {
            // clear all markers
            my.layer_groups.rider_available.clearLayers();
            my.layer_groups.rider_active_jo.clearLayers();
            my.layer_groups.customer.clearLayers();
            my.layer_groups.mobile_customer.clearLayers();

            // get riders and job orders
            var riders = response.riders;
            var jos = response.jos;

            // job orders
            $.each(jos, function(id, data) {
                var lat = data.latitude;
                var lng = data.longitude;

                if (data.is_mobile)
                    my.putMobileCustomerMarker(id, lat, lng);
                else
                    my.putCustomerMarker(id, lat, lng);
            });

            // riders
            $.each(riders, function(id, data) {
                var lat = data.latitude;
                var lng = data.longitude;
                var name = data.name;

                if (data.has_jo)
                    my.putRiderActiveJOMarker(id, lat, lng, name);
                else
                    my.putRiderAvailableMarker(id, lat, lng, name);
            });

            // console.log(rider_markers);
        });
    }
}