153 lines
4.6 KiB
JavaScript
153 lines
4.6 KiB
JavaScript
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 © <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
|
|
);
|
|
}
|
|
|
|
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 mark
|
|
var riders = response.riders;
|
|
|
|
$.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);
|
|
});
|
|
}
|
|
}
|