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;

        // layer groups
        this.layer_groups = {
            'rider_available': L.layerGroup(),
            'rider_active_jo': L.layerGroup(),
            '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.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);

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

        // overlay layer
        var overlayMaps = {
            '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);

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

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

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

        layer_group.removeLayer(markers[id]);
    }

    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;
        $.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();

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

                my.putCustomerMarker(id, lat, lng);
            });

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

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

            /*
            $.each(riders, function(rider_id, rider_data) {
                // rider location
                var point = rider_data['loc'];
                var lat = point[0];
                var lng = point[1];

                // customer location
                var cloc = rider_data['cust_loc'];
                var clat = cloc[0];
                var clng = cloc[1];

                // create rider markers
                if (rider_data['has_jo']) {
                    var jo_data = rider_data['jo'];

                    // my.putCustomerMarker(jo_data['id'], clat, clng);
                    my.putRiderActiveJOMarker(rider_id, lat, lng);
                } else {
                    my.putRiderAvailableMarker(rider_id, lat, lng);
                }
            });
            */

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