vue-leaflet/Vue2Leaflet

Strange featureGroup behavior with svg icons (they are not displayed)

Open

Aperta il 30 dic 2019

Vedi su GitHub
 (8 commenti) (0 reazioni) (0 assegnatari)JavaScript (1942 star) (380 fork)batch import
bugconfirmedhelp wanted

Descrizione

Description

I added icons for markers as svg-code. Inside featureGroup icons aren't displayed on the map (while markers themselves are presented and svg-code is in the marker too). In the same time, in devtools I found strange div block inside the map with display:none styles with all my icons inside again. If I remove display:none, I can see all my icons.

Live Demo

https://codesandbox.io/s/suspicious-spence-tu812 (components -> HelloWorld.vue)

Steps to Reproduce

See the demo (map in the sandbox isn't working well but the icons behavior is the same as on my localhost)

Expected Results

I see marker's svg-icons inside featuregroup

Actual Results

Icons are not visible

Browsers Affected

  • Chrome
  • Firefox
  • Edge
  • Safari 9
  • Safari 8
  • IE 11

Versions

latest

Guida contributor

Tech stack
javascriptvuehtmlcss
Dominio
frontend
Tipo issue
bug
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
3
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
1-3 hours
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
stale
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
clear
Prerequisiti
Vue 2 basicsLeaflet.jsSVG CSS rendering
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
60
Direzione di ricerca
Investigate the CSS `display: none` applied to the SVG icons inside the featureGroup. Check the Vue2Leaflet source code, specifically the LFeatureGroup component, to see how it handles child markers with custom icons. Look at the live demo and browser devtools to identify which CSS rule is hiding the icons. A possible fix could involve overriding the display property or ensuring the icon's SVG is properly positioned.