script.js

const map = L.map('map').setView([20, 0], 2);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors'
}).addTo(map);

// Custom robot marker icon
const robotIcon = L.icon({
  iconUrl: 'https://cdn.shopify.com/s/files/1/0767/2040/6877/files/LeRobot.png?v=1745423992',
  iconSize: [35, 35],
  iconAnchor: [20, 40],
  popupAnchor: [0, -35]
});

// Custom HQ marker icon
const hqIcon = L.icon({
  iconUrl: 'https://cdn.shopify.com/s/files/1/0767/2040/6877/files/HF_Logo.png?v=1745427981', 
  iconSize: [35, 35],
  iconAnchor: [20, 40],
  popupAnchor: [0, -35]
});

// Function to add markers from a dataset
function addMarkers(data, icon) {
  data.forEach(entry => {
    const lat = parseFloat(entry.latitude || entry.latitude);
    const lng = parseFloat(entry.longitude || entry.longitude);
    const name = entry.name || entry.name || 'Unknown';
    const address = entry.address || entry.Address || 'N/A';
    const nbPeople = entry.nb_of_people || entry.Nb_of_people || 'N/A';
    const discordUsername = entry.discord_username || entry.Discord_username || 'N/A';

    if (!isNaN(lat) && !isNaN(lng)) {
      L.marker([lat, lng], { icon: icon })
        .addTo(map)
        .bindPopup(`
          <strong>${name}</strong><br>
          ${desc}<br>
          <strong>Address:</strong> ${address}<br>
          <strong>Nb of People:</strong> ${nbPeople}<br>
          <strong>Discord Username:</strong> ${discordUsername}
        `);

    }
  });
}

// Fetch and process the first dataset
fetch('data.json')
  .then(response => response.json())
  .then(data => {
    addMarkers(data, robotIcon);
  })
  .catch(error => {
    console.error('Error fetching data.json:', error);
  });

// Fetch and process the second dataset
fetch('data_HQ_HF.json')
  .then(response => response.json())
  .then(data => {
    addMarkers(data, hqIcon);
  })
  .catch(error => {
    console.error('Error fetching data_HQ_HF.json:', error);
  });