'How to display leaflet map properly on NuxtJS

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 :

Solution 1:^[1]

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

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

Solution 2:^[2]

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: [],
      },

  }
}

Solution 3:^[3]

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

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Bernard
Solution 2	kusiaga
Solution 3	amirhosein armantaheri

'How to display leaflet map properly on NuxtJS

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]