const svgIcon = L.divIcon({ html: ` `, className: "", iconSize: [24, 40], iconAnchor: [12, 40], });
const svgAccidiant = L.divIcon({ html: ` `, className: "", iconSize: [14, 18], iconAnchor: [7, -1], });
const svgBreakdown = L.divIcon({ html: ` `, className: "", iconSize: [14, 18], iconAnchor: [7, -1], });
const svgAmbulance = L.divIcon({ html: ` `, className: "", iconSize: [14, 18], iconAnchor: [7, -1], });
let icon_map; //55.755864, 37.617698 var map = L.map("map", { preferCanvas: true }).setView([55.755864, 37.617698], 3);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: '© OpenStreetMap contributors' }).addTo(map);
Promise.all([ fetch("https://moto112-45b33-default-rtdb.asia-southeast1.firebasedatabase.app/.json") ]).then(async ([response1]) => {
const responseData = await response1.json(); const points = responseData.GeoPoints;
const layerGroup = L.featureGroup().addTo(map); const pointsArray = [];
for (var key in points) { pointsArray.push(points[key]); }
pointsArray.forEach(({ lat, lon, accidentType, accidentNotes, accidentDescription,timestamp }) => {
if (accidentType === "Breakdown") {icon_map = svgBreakdown}
if (accidentType === "Ambulance") {icon_map = svgAmbulance}
if (accidentType === "Accident") {icon_map = svgAccidiant}
let unix_timestamp = timestamp
// Создаем новый объект даты JavaScript на основе метки времени
// умножается на 1000, так что аргумент выражается в миллисекундах, а не в секундах.
var date = new Date(unix_timestamp * 1000);
// Часы отделяются от метки времени
var hours = date.getHours();
// Минуты отделяются от метки времени
var minutes = "0" + date.getMinutes();
// Секунды отделяются от метки времени
var seconds = "0" + date.getSeconds();
// Будет отображаться время в формате 10:30:23
var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
//проверяем в консоли:
// console.log(formattedTime);
layerGroup.addLayer(
L.marker([lat, lon]).bindPopup(
`Date/Time::${date}, ${formattedTime}
AccidentNotes: ${accidentNotes}
AccidentDescription: ${accidentDescription}
`
).setIcon(icon_map)
);
});
map.fitBounds(layerGroup.getBounds());
});