Icons change? about nuxt-leaflet HOT 9 CLOSED

I've made an update and the Leaflet L object can now be found via this.$L

This only seems to work after the map is ready. Is that correct? For example, this does not seem to work for me (TypeError: Cannot read property 'icon' of undefined):

<template>
  <div id="map-wrap" style="height: 400px">
 <client-only>
   <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]" :icon="icon"></l-marker>
   </l-map>
 </client-only>
</div>
</template>

<script>
export default {
  data(){
    return {
      icon: this.$L.icon({
        iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png',
      })
    }
  }
}
</script>

whereas this one works fine:

<template>
  <div id="map-wrap" style="height: 400px">
 <client-only>
   <l-map :zoom=13 :center="[55.9464418,8.1277591]"  @ready="setIconStyles">
     <l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tile-layer>
     <l-marker :lat-lng="[55.9464418,8.1277591]" :icon="icon"></l-marker>
   </l-map>
 </client-only>
</div>
</template>

<script>
export default {
  data(){
    return {
      icon: null
    }
  },
  methods: {
    setIconStyles(){
      this.icon = this.$L.icon({
        iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png',
      })
    }
  }
}
</script>

Is this latter one the intended, proper way of doing this, or am I overlooking something?

from nuxt-leaflet.

I wanted to share my solution.
I'm using nuxt-leaflet to serve the map and leaflet is not server side renderable.

I need a different Icon for most markers so setting a default did not suffice.
I found and slightly altered a workaround from the nuxt discord channel

	let L = { icon(){} };
	if (process.browser) L = require('leaflet');

I define L as an object with an empty function called icon and only require leaflet if process is ran in browser

Full content of index.vue:

<template>
    <div id="map">
        <no-ssr>
            <l-map :zoom=startZoom :center="{lat: startLat, lng : startLon}">
                <l-tile-layer :url=tileserver></l-tile-layer>
                <l-marker :lat-lng="{lat: startLat, lng : startLon}" :icon="customIcon">
                </l-marker>
            </l-map>
        </no-ssr>
    </div>
</template>

<script>

	let L = { icon(){} };
	if (process.browser) L = require('leaflet');

	export default {
		layout: 'map',
		data() {
			return {
				tileserver: process.env.tileServer,
                startLat: process.env.startPos.split(',')[0],
                startLon: process.env.startPos.split(',')[1],
                startZoom: parseInt(process.env.startZoom),
                customIcon:  L.icon({
					iconUrl: 'static/icon_023_00.png',
					iconSize:     [40, 40],
					iconAnchor:   [21, 35],
					popupAnchor:  [-3, -76]
				})
			}
		}
	}
</script>

from nuxt-leaflet.

I implemented custom icons like this:

            <l-marker
              v-for="(location, key) in locations"
              :key="key"
              :lat-lng="location.coordinates"
            >
              <l-icon
                iconUrl="https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png"
              ></l-icon>
            </l-marker>

Works perfectly fine for me and doesn't require additional js methods.

from nuxt-leaflet.

Hi!
Do you actually managed to solve the issue without doing so?

Is there a way without having to Simply copy-paste this bit of code (and thus import all dependencies related) in my template?

Thanks in advance!

from nuxt-leaflet.

Hi @JohnatanNorman
I switched from nuxt to a basic vue template for this project, and I never managed to find a good way to do it before my change.

Sorry

from nuxt-leaflet.

Hi,
So it's not possible with nuxt-leaflet to set a special icon for a specific marker ?

from nuxt-leaflet.

I've made an update and the Leaflet L object can now be found via this.$L

from nuxt-leaflet.

@andrashann thanks for that helpful tip, lost a few days chansing this one

@schlunsen Any plans to update the above in the project itself or is this expected?

from nuxt-leaflet.

@JoeEarly Sorry, for the late reply.

Anybody up for doing a pull request with the given change?

from nuxt-leaflet.