src/components/Map.svelte

<script>
  import { onMount } from 'svelte';
  import L from 'leaflet';
  import 'leaflet/dist/leaflet.css';

  export let businesses = [];

  let map;

  onMount(() => {
    map = L.map('map').setView([-26.2041, 28.0473], 10); // Johannesburg coordinates as example

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

    updateMarkers();
  });

  $: if (map) {
    updateMarkers();
  }

  function updateMarkers() {
    map.eachLayer((layer) => {
      if (layer.options && layer.options.pane === 'markerPane') {
        map.removeLayer(layer);
      }
    });

    businesses.forEach(business => {
      if (business.latitude && business.longitude) {
        L.marker([business.latitude, business.longitude])
          .addTo(map)
          .bindPopup(`<b>${business.name}</b><br>${business.address}`);
      }
    });
  }
</script>

<div id="map"></div>