Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Not Visible Default 'marker-icon.png' #610

Closed
2 tasks done
pjs21s opened this issue Aug 12, 2020 · 0 comments
Closed
2 tasks done

Not Visible Default 'marker-icon.png' #610

pjs21s opened this issue Aug 12, 2020 · 0 comments

Comments

@pjs21s
Copy link

pjs21s commented Aug 12, 2020

Description

when i use <l-marker> tag I couldn't see default marker images (marker-icon.png, marker-shadow.png)
(Actually i hope you check why l-marker don't show their default marker images.)

So i used LIcon but also i couldn't see marker images

I wrote code like this before

<template>
<div>
<l-map>
<l-marker :lat-lng="markerLatLng">
    <l-icon
        icon-url="leaflet/dist/images/marker-icon.png"
        shadow-url="leaflet/dist/images/marker-shadow.png"
    />
</l-marker>
... others
</l-map>
</div>
</template>
<script>
import { latLng } from 'leaflet'
import { LMap, LTileLayer, LMarker, LIcon} from "vue2-leaflet"

export default {
  components: {
    LMap,
    LTileLayer,
    LMarker,
    LIcon
  },
  ... others
}
</script>

Even though I was able to see default marker-icon.png in devtools.
I couldn't see on leaflet like this screenshot

beforevue

Steps to Reproduce

So i changed my code little like this.
add : and default marker images link imported in script

<template>
<div>
<l-map>
<l-marker :lat-lng="markerLatLng">
    <l-icon
        :icon-url="markerImg"
        :shadow-url="markerShadowImg"
    />
</l-marker>
...others
</l-map>
</div>
</template>
<script>
import { latLng } from 'leaflet'
import { LMap, LTileLayer, LMarker, LIcon} from "vue2-leaflet"
import markerImg from 'leaflet/dist/images/marker-icon.png';
import markerShadowImg from 'leaflet/dist/images/marker-shadow.png';

export default {
  components: {
    LMap,
    LTileLayer,
    LMarker,
    LIcon,
    markerImg,
    markerShadowImg
  },
  data(){
    return {
      ... others
      markerImg : markerImg,
      markerShadowImg : markerShadowImg
    }
  },
  ... others
}
</script>

then i can see default marker-icon.png and shadow.png like this screenshot

aftervue

I wonder is it different? or just kind of bugs?
Thank you for reading

Browsers Affected

  • Chrome -> [O] Chrome
  • Firefox -> [O] Firefox
  • [?] Edge
  • [?] Safari 9
  • [?] Safari 8
  • [?] IE 11

Versions

  • Leaflet: v1.6.0
  • Vue: v2.6.11
  • Vue2Leaflet: v2.5.2
@pjs21s pjs21s closed this as completed Aug 17, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant