114 lines
4.2 KiB
JavaScript
114 lines
4.2 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.lg_avail_rider = L.layerGroup();
|
|
this.lg_jo_rider = L.layerGroup();
|
|
this.lg_cust = 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.lg_avail_rider.addTo(this.map);
|
|
this.lg_jo_rider.addTo(this.map);
|
|
this.lg_cust.addTo(this.map);
|
|
|
|
// base layer
|
|
var baseMaps = {
|
|
'Streets': streets
|
|
};
|
|
|
|
// overlay layer
|
|
var overlayMaps = {
|
|
'Available Riders' : this.lg_avail_rider,
|
|
'JO Riders' : this.lg_jo_rider,
|
|
'Customers' : this.lg_cust
|
|
}
|
|
|
|
L.control.layers(baseMaps, overlayMaps).addTo(this.map);
|
|
|
|
return this.map;
|
|
}
|
|
|
|
loadLocations(location_url) {
|
|
console.log(this.rider_markers);
|
|
var my = this;
|
|
$.ajax({
|
|
url: location_url,
|
|
}).done(function(response) {
|
|
// clear all markers
|
|
my.lg_avail_rider.clearLayers();
|
|
my.lg_jo_rider.clearLayers();
|
|
my.lg_cust.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 long = point[1];
|
|
|
|
// customer location
|
|
var cloc = rider_data['cust_loc'];
|
|
var clat = cloc[0];
|
|
var clong = 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();
|
|
});
|
|
});
|
|
} 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]);
|
|
}
|
|
|
|
// 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);
|
|
});
|
|
}
|
|
}
|