131 lines
4.9 KiB
JavaScript
131 lines
4.9 KiB
JavaScript
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
|
|
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
|
|
crossorigin="">
|
|
</script>
|
|
|
|
<script>
|
|
|
|
var rider_markers = {};
|
|
|
|
function mapCreate(div_id, center_lat, center_lng, map_type, zoom) {
|
|
var map = L.map(div_id).setView(
|
|
[center_lat, center_lng],
|
|
zoom
|
|
);
|
|
|
|
// add tile layer
|
|
// TODO: put access token in .env
|
|
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: 'pk.eyJ1Ijoia2NvcmRlcm8iLCJhIjoiY2szbzA3ZHdsMDZxdTNsbGl4ZGNnN2VxaSJ9.LRzAe3RlV8sIP1N1x0chdw'
|
|
}).addTo(map);
|
|
|
|
// layer groups
|
|
// .addTo(map) --> this will display your riders by default
|
|
var lg_avail_rider = L.layerGroup().addTo(map);
|
|
var lg_jo_rider = L.layerGroup().addTo(map);
|
|
var lg_cust = L.layerGroup().addTo(map);
|
|
|
|
// this little snippet will not display your riders by default.
|
|
// Instead, a toggle button will display in the map, with a checkbox with text Riders.
|
|
// Check that to display the riders
|
|
//var ridersLayerGroup = L.layerGroup();
|
|
|
|
// create icons
|
|
var icon_rider_active_jo = L.divIcon({
|
|
className: 'map-div-icon',
|
|
html: "<div style='background-color:#FF0000;' class='marker-pin'></div><i class='fa fa-bolt awesome'>",
|
|
iconSize: [39, 42],
|
|
iconAnchor: [15, 42]
|
|
});
|
|
var icon_rider_available = L.divIcon({
|
|
className: 'map-div-icon',
|
|
html: "<div style='background-color:#00FF00;' class='marker-pin'></div><i class='fa fa-bolt awesome'>",
|
|
iconSize: [39, 42],
|
|
iconAnchor: [15, 42]
|
|
});
|
|
var icon_customer = L.divIcon({
|
|
className: 'map-div-icon',
|
|
html: "<div style='background-color:#0055FF;' class='marker-pin'></div><i class='fa fa-user awesome'>",
|
|
iconSize: [39, 42],
|
|
iconAnchor: [15, 42]
|
|
});
|
|
|
|
$.ajax({
|
|
url: '{{ path('rider_locations') }}',
|
|
}).done(function(response) {
|
|
// clear all markers
|
|
lg_avail_rider.clearLayers();
|
|
lg_jo_rider.clearLayers();
|
|
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];
|
|
|
|
// rider popup content
|
|
rider_popup = '<strong>' + rider_data['label'] + '</strong>';
|
|
|
|
// create rider markers
|
|
if (rider_data['has_jo']) {
|
|
var jo_data = rider_data['jo'];
|
|
rider_popup += '<br>';
|
|
rider_popup += '<a href="' + jo_data['url'] + '">Job Order #' + jo_data['id'] + '</a><br>';
|
|
rider_popup += jo_data['stype'] + '<br>';
|
|
rider_popup += jo_data['status'] + '<br><br>';
|
|
rider_popup += jo_data['cname'] + '<br>';
|
|
rider_popup += jo_data['plate'];
|
|
|
|
var cust_popup = '<strong>' + jo_data['cname'] + '</strong><br>';
|
|
cust_popup += jo_data['plate'] + '<br>';
|
|
cust_popup += '<a href="' + jo_data['url'] + '">Job Order #' + jo_data['id'] + '</a><br>';
|
|
cust_popup += jo_data['stype'] + '<br>';
|
|
cust_popup += jo_data['status'];
|
|
|
|
rider_markers[rider_id] = L.marker([lat, long], { icon: icon_rider_active_jo }).bindPopup(rider_popup);
|
|
// var rider_marker = L.marker([lat, long], { icon: icon_rider_active_jo }).bindPopup(rider_popup);
|
|
var cust_marker = L.marker([clat, clong], { icon: icon_customer }).bindPopup(cust_popup);
|
|
lg_cust.addLayer(cust_marker);
|
|
lg_jo_rider.addLayer(rider_markers[rider_id]);
|
|
} else {
|
|
rider_markers[rider_id]= L.marker([lat, long], { icon: icon_rider_available }).bindPopup(rider_popup);
|
|
// var rider_marker = L.marker([lat, long], { icon: icon_rider_available }).bindPopup(rider_popup);
|
|
lg_avail_rider.addLayer(rider_markers[rider_id]);
|
|
}
|
|
});
|
|
|
|
// console.log(rider_markers);
|
|
});
|
|
|
|
// base layer
|
|
var baseMaps = {
|
|
'Streets': streets
|
|
};
|
|
|
|
// overlay layer
|
|
var overlayMaps = {
|
|
'Available Riders' : lg_avail_rider,
|
|
'JO Riders' : lg_jo_rider,
|
|
'Customers' : lg_cust
|
|
}
|
|
|
|
L.control.layers(baseMaps, overlayMaps).addTo(map);
|
|
|
|
return map;
|
|
}
|
|
|
|
initMap();
|
|
|
|
</script>
|