map

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

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

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    maxZoom: 20,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
}).addTo(map);

var statBin = {
    "full": iconRed,
    "empty": iconGreen,
    "mid": iconYellow,
};
var statVehicle = {
    "Free": iconVehicleRed,
    "On work": iconVehicleGreen,
};
var objBin = [];
var objVehicle = [];
var layerGrBin, layerGrVehicle;
var oB = new Object();
var oV = new Object();
setInterval(function() {
    objBin = [];
    $.getJSON('/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]);
            objBin.push(oB.markerBin);
        }
        console.log(objBin);
    });
    objVehicle = [];
    $.getJSON('/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);
    }, 1500);
}, 2000);