m-gregoire / nuxt-leaflet Goto Github PK
View Code? Open in Web Editor NEWQuick guide to making Leaflet works with Nuxt
License: Apache License 2.0
Quick guide to making Leaflet works with Nuxt
License: Apache License 2.0
See updated version of nuxt-leaflet where L is exposed via this.$L on the vue components
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;
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: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, © <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>
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
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
Since Leaflet is now a peerDependency, you should add leaflet
to your install instructions.
npm install vue2-leaflet leaflet --save
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???
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?
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...
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.