How to display leaflet map properly on NuxtJS

Question

I'm using NuxtJS and I use the library https://vue2-leaflet.netlify.app but the map doesn't show up properly. Here's my code, and a screen of the result :

map.vue :

<template>
  <div id="map-wrap" style="height: 100vh">
    <no-ssr>
      <l-map :zoom="13" :center="[55.9464418, 8.1277591]">
        <l-tile-layer
          url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
        ></l-tile-layer>
        <l-marker :lat-lng="[55.9464418, 8.1277591]"></l-marker>
      </l-map>
    </no-ssr>
  </div>
</template>

nuxt-leaflet.js :

import Vue from 'vue';
import { LMap, LTileLayer, LMarker } from 'vue2-leaflet';

Vue.component('l-map', LMap);
Vue.component('l-tile-layer', LTileLayer);
Vue.component('l-marker', LMarker);

nuxt.config.js :

  plugins: [
    {
      src: '~/plugins/nuxt-leaflet',
      mode: 'client',
    },

    {
      src: '~/plugins/vue-my-photos',
      mode: 'client',
    },
  ],

Here's a screen of the result :

score 4 · Answer 1 · answered Feb 21 '21 at 03:20

4

Finally, I've found out that I had to include the css from leaflet :

  head() {
    return {
      link: [
        {
          rel: 'stylesheet',
          href: 'https://unpkg.com/leaflet@1.6.0/dist/leaflet.css',
        },
      ],
    }
  },

answered Feb 21 '21 at 03:20

Bernard

155
1
10

score 1 · Answer 2 · answered Feb 21 '21 at 03:17

I am also using Vue Leaflet and it is working perfectly. Try changing the center props from array to object.

<l-map :zoom="13" :center="{
        lat: -7.280976,
        lng: 112.796844,
      }">

full code

    <div style="height: 350px; width: 100%">
      <client-only>
        <l-map
          ref="myMap"
          :zoom="zoom"
          :center="center"
          @update:center="centerUpdated"
          @click="handleClick"
        >
          <l-marker :lat-lng="regionCenter">
            <l-popup>Lokasi outlet</l-popup>
          </l-marker>
          <l-polyline
            :lat-lngs="polyline.latlngs"
            :color="polyline.color"
          ></l-polyline>
          <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
        </l-map>
      </client-only>
    </div>

data () {
  return {
      url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      attribution:
        '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      zoom: 15,
      center: {
        lat: -7.280976,
        lng: 112.796844,
      },
      bounds: null,
      regionCenter: [-7.280976, 112.794944],
      address: {
        long: '',
        display: '',
      },
      polyline: {
        color: 'red',
        latlngs: [],
      },

  }
}

Thank you dude but I just didn't include the CSS file. – Bernard Feb 21 '21 at 03:21 — Bernard, Feb 21 '21 at 03:21

score 0 · Answer 3 · answered May 20 '22 at 23:22

0

add leaflet css in nuxt.config.js as global css:

css: ['leaflet/dist/leaflet.css'],

answered May 20 '22 at 23:22

amirhosein armantaheri

51
3

Only If you need it in many views. – Bernard May 23 '22 at 08:23

score 0 · Answer 4 · answered Aug 26 '22 at 06:37

in the Nuxt.js project sometimes your CSS doesn't load entirely and the Leaflet map cannot set width and height for that, it is better to hide the map, and when CSS and DOM load entirely then show the map.

<div v-if="map">
    <client-only>
      <l-map :zoom="13" :center="[selectedAddress.lat, selectedAddress.lng]">
        <l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png" />
      </l-map>
    </client-only>
</div>

data

data () {
  return {
    map: false
  }
}

mounted

mounted () {
  this.$nextTick(() => {
    setTimeout(() => {
      this.map = true
    }, 200)
  });
},

How to display leaflet map properly on NuxtJS

4 Answers4