39 lines
862 B
Vue
39 lines
862 B
Vue
<!-- 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>
|
|
|