<!-- LeafletMap.vue -->

<template>
    <v-card-text>
        <div class="leaflet-map" ref="map"></div>
    </v-card-text>
</template>
  
<script>
import L from 'leaflet';

export default {
    mounted() {
        // Ensure that Leaflet assets are loaded before creating the map
        import('leaflet/dist/leaflet.css').then(() => {
            this.initializeMap();
        });
    },
    methods: {
        initializeMap() {
            // Initialize the map
            this.map = L.map(this.$refs.map).setView([51.505, -0.09], 13);

            // Add a tile layer (OpenStreetMap)
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(this.map);

            // Add a marker
            L.marker([51.505, -0.09]).addTo(this.map);
        },
    },
};
</script>
  
<style scoped>
.leaflet-map {
    height: 250px;
}
</style>
  