Custom Icon with Nuxt #238
Description
Hi there.
I've been trying to replicate this jsfiddle: https://jsfiddle.net/z3bmc1ex/42/ but couldn't get it to work in Nuxt.
UPDATE: I've changed standard icons but couldn't change second one with :icon.
Would appreciate help with this issue, since I can't find docs to resolve the problem myself. Code below throws an error:
TypeError: options.icon.createIcon is not a function
and
TypeError: Cannot read property 'parentNode' of undefined
Thanks in advance!
<template>
<div
id="map-wrap"
style="height: 500px">
<no-ssr>
<v-map
:zoom="13"
:center="[47.413220, -1.219482]">
<v-tilelayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"/>
<v-marker :lat-lng="[47.413220, -1.219482]"/>
<v-marker
:lat-lng="[47.413220, -2.219482]"
:icon="icon"/>
</v-map>
</no-ssr>
</div>
</template>
<script>
let Vue2Leaflet = {}
if (process.browser) {
Vue2Leaflet = require('vue2-leaflet')
const L = require('leaflet')
delete L.Icon.Default.prototype._getIconUrl
L.Icon.Default.imagePath = ''
L.Icon.Default.mergeOptions({
iconRetinaUrl: require('~/assets/markers/marker-icon-2x.png'),
iconUrl: require('~/assets/markers/marker-icon.png'),
shadowUrl: require('~/assets/markers/marker-shadow.png')
})
}
export default {
components: {
'v-map': Vue2Leaflet.LMap,
'v-tilelayer': Vue2Leaflet.LTileLayer,
'v-marker': Vue2Leaflet.LMarker
},
data() {
return {
icon: {
iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-green.png',
shadowUrl: 'http://leafletjs.com/examples/custom-icons/leaf-shadow.png',
iconSize: [38, 95],
shadowSize: [50, 64],
iconAnchor: [22, 94],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76]
}
}
}
}
</script>
<style src="leaflet/dist/leaflet.css">
</style>
<style>
.map-wrap {
width: 100%;
height: 500px !important;
}
</style>