map.js

var iconRed = L.icon({
    iconUrl: './images/red-garbage.png',
    iconSize: [25, 41],
});
var iconGreen = L.icon({
    iconUrl: './images/green-garbage.png',
    iconSize: [25, 41],
});
var iconYellow = L.icon({
    iconUrl: './images/yellow-garbage.png',
    iconSize: [25, 41],
});
var iconVehicleRed = L.icon({
    iconUrl: './images/red-vehicle.png',
    iconSize: [16, 35],
});
var iconVehicleGreen = L.icon({
    iconUrl: './images/green-vehicle.png',
    iconSize: [16, 35],
});

// console.log(iconRed);
// console.log(iconGreen);
// console.log(iconYellow);

function _getAngle(startx, starty, endx, endy) {
    var tan = 0
    if (endx == startx) {
        tan = 90;
    } else {
        tan = Math.atan(Math.abs((endy - starty) / (endx - startx))) * 180 / Math.PI;
        console.log(tan);
    }

    if (endx >= startx && endy >= starty) //First quadrant
    {
        return -tan;
    } else if (endx > startx && endy < starty) //Delta Quadrant
    {
        return tan;
    } else if (endx < startx && endy > starty) //Beta Quadrant
    {
        return tan - 180;
    } else {
        return 180 - tan; //third quadrant
    }
}


var map = L.map('map').setView([21.037181, 105.833485], 15);

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/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 20,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'pk.eyJ1IjoidHVuZ2J2NTEyMDFzZiIsImEiOiJjbDFtOXFveGgwaWVlM2psNmtrNWVtbzNqIn0.eV3E0R0knRqWfCCsfeo2Fw'
}).addTo(map);

var statBin = {
    "full": iconRed,
    "empty": iconGreen,
    "mid": iconYellow,
};
var statVehicle = {
    "off": iconVehicleRed,
    "on": iconVehicleGreen,
};
var objBin = [];
var objVehicle = [];
var layerGrBin, layerGrVehicle;
var oB = new Object();
var oV = new Object();
var x = null,
    y = null;
setInterval(function() {
    objBin = [];
    $.getJSON('https://demoleaflet.000webhostapp.com/majestic/Dashboard/php/api/post/R_bin.php', {}, (data) => {
        for (let i = 0; i < data.data.length; i++) {
            oB = {
                lat: data.data[i].lat,
                long: data.data[i].long,
                markerBin: L.marker([data.data[i].lat, data.data[i].long]),
            };
            oB.markerBin.setIcon(statBin[data.data[i].statuses]);
            // o.markerBin.addTo(map);
            objBin.push(oB.markerBin);
        }
        console.log(objBin);
    });
    objVehicle = [];
    $.getJSON('https://demoleaflet.000webhostapp.com/majestic/Dashboard/php/api/post/R_vehicle.php', {}, (data) => {
        let body = document.querySelector(".table tbody");
        for (let i = 0; i < data.data.length; i++) {
            oV = {
                lat: data.data[i].lat,
                long: data.data[i].long,
                markerVehicle: L.marker([data.data[i].lat, data.data[i].long]),
            };
            oV.markerVehicle.setIcon(statVehicle[data.data[i].statuses]);
            objVehicle.push(oV.markerVehicle);
        }
    });
    setTimeout(function() {
        console.log(objBin);
        console.log(objVehicle);
        if (layerGrBin) {
            map.removeLayer(layerGrBin);
        }
        if (layerGrVehicle) {
            map.removeLayer(layerGrVehicle);
        }
        layerGrBin = L.layerGroup(objBin).addTo(map);
        layerGrVehicle = L.layerGroup(objVehicle).addTo(map);
    }, 1000);
}, 2000);