m-gregoire/nuxt-leaflet

Quick guide to making Leaflet works with Nuxt

nuxt-leaflet's Issues

Nuxt leaflet updated

See updated version of nuxt-leaflet where L is exposed via this.$L on the vue components

Importing the library

Looking at Vue-Leaflet docs, looks like the new way to import the library is this:

# Full library
import * as Vue2Leaflet from 'vue2-leaflet'; // VALID

# Just the necessary
import { LMap, LTileLayer, LMarker } from 'vue2-leaflet';

So the plugin now should look like this:

import Vue from 'vue'
import { LMap, LTileLayer, LMarker } from 'vue2-leaflet'
const VueLeaflet = {
  install(Vue, options) {
    Vue.component('l-map', LMap)
    Vue.component('l-marker', LMarker)
    Vue.component('l-tile-layer', LTileLayer)
  }
};
Vue.use(VueLeaflet);
export default VueLeaflet;

How does Leaflet work in production SPA mode?

I've been struggling to get Leaflet to work in production mode, specifically in my Nuxt app where mode is spa. I'm essentially using geolocation to plot markers on a map that represent businesses.

I've tried two different solutions (nuxt-leaflet module as well as the instructions you provide, with some tweaks) and in both cases my map works perfectly in dev mode but after npm run build && npm start, it fails in the exact same way: tiles are scattered all over the screen, I can't see the map markers, and I get no console errors. I posted my nuxt-leaflet module solution but haven't heard anything yet.

I'm new to Nuxt so I feel like this is something fundamental that I'm missing. What could it be? Many thanks for any help!

Using pretty much what you've outlined, here's what I've got:

// in nuxt.config.js
plugins: [
  { src: '~/plugins/leaflet-map', ssr: false }
],

// ~/plugins/leaflet-map.js
import Vue from 'vue'
import { LMap, LTileLayer, LMarker } from 'vue2-leaflet';
import 'leaflet/dist/leaflet.css'

const LeafletMap = {
  install(Vue, options) {
    Vue.component('l-map', LMap);
    Vue.component('l-tilelayer', LTileLayer);
    Vue.component('l-marker', LMarker);
  }
};

Vue.use(LeafletMap);
export default LeafletMap;

<template>
  <section class="bg-white mb-4" style="height: 75vh;">
    <div id="map-wrap" class="h-full">
      <l-map ref="myMap" :zoom=18 :center="[33.500598, -86.796270]"></l-map>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.map = this.$refs.myMap.mapObject;
      this.initMap();
    });

  },
  methods: {
    initMap() {
      this.map.locate({ setView: true, enableHighAccuracy: true, maximumAge: 15000 })
        .on('locationfound', e => {
          this.setMarkers();
        })
        .on('locationerror', e => {
          this.map.panTo([33.500598, -86.796270]);
          this.setMarkers();
        });
      L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}.png',
        {
          minZoom: 18,
          attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attribution">CARTO</a>',
        }
      ).addTo(this.map);
      this.map.on('moveend', e => {
        this.setMarkers();
      });
    },
    setMarkers() {
      let markers = [];
      this.getBusinesses()
        .then(businesses => {
          markers = businesses;
          if (markers.length > 0) {
            const myIcon = L.divIcon({className: 'map-marker-icon'});
            for (const business of markers) {
              L.marker([business.latitude, business.longitude], { icon: myIcon })
                .addTo(this.map)
                .bindPopup(`<a href="/businesses/${business.id}">` + business.name + '</a><br/>' + business.address + '<br/>Scored <b>' + business.latest_inspection.score + '</b> on ' + business.latest_inspection.inspection_date);
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    getBusinesses() {
      const latLong = this.map.getCenter();
      return new Promise((resolve) => {
        resolve(this.$axios.$get(`/businesses/geo-search?lat=${latLong.lat}&long=${latLong.lng}`));
      });
    }
  }
}
</script>

<style>
.map-marker-icon {
  background-image: url('~assets/img/marker-icon.png');
  background-color: transparent;
  background-size: cover;
  width: 20px !important;
  height: 32px !important;
}
</style>

Add l-moving-marker component

Im trying to add https://github.com/LouisMazel/vue2-leaflet-movingmarker to the library, How can I add this as a plugin to the library?
What I did is I installed it then added import LMovingMarker from 'vue2-leaflet-movingmarker' to my leaflef plugin in nuxt plugins folder and adding Vue.component('l-moving-marker', LMovingMarker); at the end , but when leaflet map opens it throws error that did you register the component properly.

// leafletmap plugin.js for nuxt
import Vue from 'vue';
import {LMap, LTileLayer, LMarker , LIconDefault, LPopup} from 'vue2-leaflet';
import {VGeosearch} from 'vue2-leaflet-geosearch';
import LMovingMarker from 'vue2-leaflet-movingmarker'
import L from 'leaflet';
delete L.Icon.Default.prototype._getIconUrl;

L.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')
})

Vue.component('l-map', LMap);
Vue.component('l-tilelayer', LTileLayer);
Vue.component('l-marker', LMarker);
Vue.component('l-popup', LPopup);
Vue.component('l-icon-default', LIconDefault);
Vue.component('v-geosearch', VGeosearch);
Vue.component('l-moving-marker', LMovingMarker);

thanks for any help

L is not defined

that's using Universal Mode, Nuxt version 2.8.1

plus this compiler warning
ERROR Failed to compile with 1 errors friendly-errors 23:42:01

ERROR in ./pages/user/map2.vue friendly-errors 23:42:01

Module Error (from ./node_modules/eslint-loader/index.js): friendly-errors 23:42:01

C:\Projects\NUXT\yamenu\pages\user\map2.vue
8:19 error 'L' is not defined no-undef
9:5 error 'L' is not defined no-undef

Update install instructions

Since Leaflet is now a peerDependency, you should add leaflet to your install instructions.

 npm install vue2-leaflet leaflet --save

can't found the support for edgemarker

hi i wanna implement a library with this module
here is the github link of edgemarker
https://github.com/ubergesundheit/Leaflet.EdgeMarker
is there any method to implement it with nuxt js???

exports-loader

Hi.
Copying the example:
import { PruneCluster, PruneClusterForLeaflet } from 'exports-loader?PruneCluster,PruneClusterForLeaflet!prunecluster/dist/PruneCluster.js'

and I had to yarn add exports-loader but I get the error:

Module build failed (from ./node_modules/exports-loader/dist/cjs.js):
ValidationError: Invalid options object. Exports Loader has been initialized using an options object that does not match the API schema.
options misses the property 'exports'. Should be:
non-empty string | object { name, syntax?, alias? } | [non-empty string | object { name, syntax?, alias? }, ...] (should not have fewer than 1 item)

Any ideas? Not sure if exports-loader should work out of the box with nuxt?

Better CSS loading

You can load leaflet CSS also in the nuxt plugin via:
import 'leaflet/dist/leaflet.css'

p.s. Your guide helped a lot! Many thanks...