var map = L.map('map').setView([0, 0], 2);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

// How I made my neon markers for my map :3
var neonIcon = L.icon({

  iconUrl: 'assets/icons.png',
  iconSize: [32, 32],
  iconAnchor: [16, 16],
  popupAnchor: [0, -16]
});


// How I fetched my JSON file :3
fetch('Midterm.json')
  .then(response => response.json())
  .then(data => {


    // Hey, look! More markers! :3
    data.forEach(place => {
      L.marker([place.lat, place.lng], { icon: neonIcon }).addTo(map)
        .bindPopup('<h3><b>' + place.title + '</b></h3><br>' + '<img src="assets/Earth.webp" /><br>' + place.description);
    });

    

    
    navigator.geolocation.getCurrentPosition(function(position) {
      var userLat = position.coords.latitude;
      var userLng = position.coords.longitude;


      // Neon geolocation marker :3
      var customIcon = L.icon({
        iconUrl: "assets/icons.png",
        iconSize: [32, 32],
        iconAnchor: [16, 16],
        popupAnchor: [0, -16]
      });
      L.marker([userLat, userLng], { icon: customIcon }).addTo(map)
        .bindPopup('Your Location');
    });
  });