CODEWITHSUNDEEP
javascriptvue.jsleaflet
doni
doni

Reputation: 21

Vue Leaflet not rendering map

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!

Upvotes: 2

Views: 8317

Answers (3)

Riyaz Khan
Riyaz Khan

Reputation: 3228

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>

Upvotes: 0

Jordy Cuan
Jordy Cuan

Reputation: 487

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

Upvotes: 0

ncux199rus
ncux199rus

Reputation: 125

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

Upvotes: 5

Related Questions