Vue Leaflet not rendering map

Question

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 './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: '&copy; <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')

Thanks for help!

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
– 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
– 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
– Sølve, Commented Aug 5, 2018 at 10:54

ncux199rus · Accepted Answer · 2019-04-03 20:06:23Z

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">

answered Apr 3, 2019 at 20:06

ncux199rus

1252 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mark Howard Over a year ago

I needed to set the height

Jordy Cuan · Accepted Answer · 2019-04-04 22:19:52Z

0

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')
});

answered Apr 4, 2019 at 22:19

Jordy Cuan

4877 silver badges13 bronze badges

Comments

Adrian Mole · Accepted Answer · 2019-12-24 11:31:47Z

0

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

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>

edited Dec 24, 2019 at 11:31

Adrian Mole

52.1k193 gold badges61 silver badges101 bronze badges

answered Dec 24, 2019 at 11:14

Riyaz Khan

3,3643 gold badges18 silver badges31 bronze badges

Collectives™ on Stack Overflow

Vue Leaflet not rendering map

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related