Below is the code that I have been working on, but all I see is a blank white page without any errors in the console. My goal is to render a map with markers. I am new to Vue and would appreciate your help in getting this to work. I have looked at some tutorials on leaflet, and similar code has worked for others.
App.vue
<template>
<div id="app"></div>
</template>
<script>
import Map from './components/Map.vue'
export default {
name: 'app',
components: {
Map
}
}
</script>
Map.vue
<template>
<div id="map">
<v-map :zoom="zoom" :center="center">
<v-tilelayer :url="url" :attribution="attribution"></v-tilelayer>
<v-marker :lat-lng="marker"></v-marker>
<v-marker v-for="item in markers" :key="item.id" :lat-lng="item.latlng" @l-add="$event.target.openPopup()">
<v-popup :content="item.content"></v-popup>
</v-marker>
</v-map>
</div>
</template>
<script>
import Vue2Leaflet from 'vue2-leaflet';
import L from 'leaflet';
export default {
name: 'map',
components: {
'v-map': Vue2Leaflet.Map,
'v-tilelayer' :Vue2Leaflet.TileLayer,
'v-marker': Vue2Leaflet.Marker,
L
},
data() {
return {
zoom: 13,
center: [47.413220, -1.219482],
url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
marker: L.latLng(47.413220, -1.219482),
markers: [
{
id: 1,
latlng: L.latLng(47.417220, -1.222482),
content: 'Hi! this is my popup data'
},
{
id: 2,
latlng: L.latLng(47.417220, -1.25),
content: 'Another'
}
]
}
}
}
</script>
<style scoped>
@import "~leaflet/dist/leaflet.css";
</style>
main.js
import Vue from 'vue'
import App from './App.vue'
import VeeValidate from 'vee-validate'
import router from './router'
import Vue2Leaflet from 'vue2-leaflet';
import L from 'leaflet';
Vue.use(VeeValidate)
Vue.use(Vue2Leaflet)
Vue.use(L);
Vue.config.productionTip = false
new Vue({
router,
Vue2Leaflet,
L,
render: h => h(App)
}).$mount('#app')
Any assistance you can provide would be greatly appreciated!