Component Leaflet

<template>
  <div id="map" style="height: 500px;"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';
import locations from '@/services/location.js';


const map = ref(null);
const locs = ref([]);

const getAllLocations = async () => {
  try {
    const response = await locations.getAllLocations();
    locs.value = response.data;
    console.log('resp',response.data);
  } catch (error) {
    console.error('Error fetching locations:', error);
  }
};

onMounted(async () => {

  await getAllLocations();
  
  map.value = L.map('map').setView([41.1555564, 1.1076133], 10);

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19
  }).addTo(map.value);
  
  locs.value.forEach(location => {
    L.marker([location.latitude, location.longitude])
      .addTo(map.value)
      .bindPopup(`<b>${location.location}</b>`);
  });
});
</script>

<style>
#map {
  height: 500px;
}
</style>