I've the following code(below) and so far what I can see is white page, without any error on the console. I want to render map with markers. I'm the beginner with Vue and maybe you can help me with that. I've followed some pages about leaflet, and similar code worked.

App.vue

<template>
  <div id="app"></div>
</template>

<script>
import Map from './ponents/Map.vue'

export default {
  name: 'app',
  ponents: {
    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',
    ponents: {
        '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/{z}/{x}/{y}.png',
            attribution: '&copy; <a href="">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')

Thanks for help!

I've the following code(below) and so far what I can see is white page, without any error on the console. I want to render map with markers. I'm the beginner with Vue and maybe you can help me with that. I've followed some pages about leaflet, and similar code worked.

App.vue

<template>
  <div id="app"></div>
</template>

<script>
import Map from './ponents/Map.vue'

export default {
  name: 'app',
  ponents: {
    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',
    ponents: {
        '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/{z}/{x}/{y}.png',
            attribution: '&copy; <a href="http://osm/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')

Thanks for help!

• javascript
• vue.js
• leaflet

Share Improve this question Follow edited Dec 18, 2018 at 5:51 Rosdi Kasim 26.1k2525 gold badges136136 silver badges161161 bronze badges asked Aug 4, 2018 at 19:07 donidoni 2111 silver badge22 bronze badges 4

• Have you inspected to see if there is anything in the dom? The map may be rendered, but height / width is not set – Sølve Commented Aug 4, 2018 at 19:33
• @SølveTornøe how can I check it? In console on web browser I don't see anything. – doni Commented Aug 4, 2018 at 19:41
• Not in the console. If you open your inspector(f12), then click the elements tab then you can click your way trough the html. See if maybe the map container is 0x0 when you hoover it in the inspector. – Sølve Commented Aug 5, 2018 at 10:54
• Have you found the reason/fix for this? – Rosdi Kasim Commented Dec 18, 2018 at 3:48

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

May be in code

<v-map :zoom="zoom" :center="center">

add attribute

style="height: 850px; width: 500px"

to succeed

<v-map :zoom="zoom" :center="center" style="height: 850px; width: 500px">

You need to add this in main.js file:

import { Icon } from 'leaflet'
import 'leaflet/dist/leaflet.css'

delete Icon.Default.prototype._getIconUrl;

Icon.Default.imagePath = '.';
Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
});

The problem is that you didn't give the height to the map ponent.

Here is the fixed code:

 <v-map :zoom="zoom" :center="center" style="height: 700px; width:600px">
        <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>