EarthmanWeb
commented
4 years ago FYI - I downgraded the versions, trying to find compatible ones, but so far no luck.
I started with the default versions installed with each module
Open EarthmanWeb opened 4 years ago
EarthmanWeb
commented
4 years ago FYI - I downgraded the versions, trying to find compatible ones, but so far no luck.
I started with the default versions installed with each module
EarthmanWeb
commented
4 years ago When I bypass this module, all is working as expected:
<style lang="scss">
@import '../../node_modules/leaflet.markercluster/dist/MarkerCluster.css';
@import '../../node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css';
</style>
<template>
<div :style="mapStyle">
<v-map ref="mymap" :style="mapStyle" :zoom="zoom" :center="center">
<v-icondefault :image-path="'/statics/leafletImages/'"></v-icondefault>
<v-tilelayer :url="url"></v-tilelayer>
<!-- <v-marker-cluster> -->
<v-marker :lat-lng="marker">
<v-popup content="test content"></v-popup>
</v-marker>
<!-- </v-marker-cluster> -->
</v-map>
</div>
</template>
<script>
import Vue from 'vue'
import { mapState, mapGetters } from 'vuex'
import store from '@/store/'
import L from 'leaflet'
import leafletCss from 'leaflet-css'
import { LMap, LTileLayer, LMarker, LLayerGroup, LFeatureGroup, LIconDefault, LPopup } from 'vue2-leaflet'
import Vue2LeafletMarkerCluster from 'vue2-leaflet-markercluster'
export default {
components: {
'v-map': LMap,
'v-icondefault': LIconDefault,
'v-tilelayer': LTileLayer,
'v-marker': LMarker,
'v-popup': LPopup
// 'v-marker-cluster': Vue2LeafletMarkerCluster
},
data () {
return {
windowHeight: '0',
windowWidth: '0',
zoom: store.state.mapStartZoom,
center: L.latLng(store.state.mapStartLat, store.state.mapStartLng),
url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
marker: L.latLng(store.state.mapStartLat, store.state.mapStartLng)
}
},
computed: {
...mapGetters([
'getIsMobile',
'getHostsFiltered',
'getHosts'
]),
mapStyle () {
var multiplier = 1
if (!this.getIsMobile) {
multiplier = 0.4
}
// size to the right height and width on load
return 'height:' + this.windowHeight + 'px;width:' + (this.windowWidth * multiplier) + 'px; margin:0px; padding: 0px;'
}
},
created () {
this.$nextTick(() => {
const map = this.$refs.mymap.mapObject
const esri = require('esri-leaflet')
esri.basemapLayer('Topographic').addTo(map)
window.addEventListener('resize', this.onResize, false) // resize the map on load
this.windowHeight = window.innerHeight - 105
this.windowWidth = window.innerWidth
this.renderComponent = true
map._onResize() // refresh the changes
}, (this))
},
destroyed () {
window.removeEventListener('resize', this.onResize)
},
methods: {
onResize () {
// resize the map when the window is resized
this.windowHeight = window.innerHeight - 105
this.windowWidth = window.innerWidth
},
getMarkerLatLng (host) {
// console.log('host', host)
if (host.lat && host.lon) {
return L.latLng(host.lat, host.lon)
}
},
getHostsMap () {
if (store.state.mapShowAllHosts) {
return this.getHosts
} else {
return this.getHostsFiltered
}
}
}
}
</script>
Hi, I've installed this in a Webpack project using Vue CLI 4 When I don't use the v-marker-cluster component, all works fine
Modules/versions in question:
When I try to use, with the syntax provided, I get an error:
Here is the contents of my package.json:
Here is my component code:
As far as I can tell by the documentation, there should not be a problem.
Can you please offer me any ideas why I may be getting this error?