search

geostyler / geostyler-legend

Small library to render map legends with OpenLayers and d3
BSD 2-Clause "Simplified" License
11 stars 9 forks source link

Icon image does not appear in legend unless it's shown on map #442

Open rdewit opened 1 year ago

rdewit commented 1 year ago

Bug

Describe the bug When a style contains an Icon with an image, the legend will not show it unless it's also visible on the map.

To Reproduce Steps to reproduce the behavior:

  1. Go to https://geostyler.github.io/geostyler-demo/
  2. Click on 'Display: Legend' in the right panel
  3. Observe the red line for 'Rule 1' in the legend
  4. Then click on the symbolizer preview for 'Rule 1' in the Graphical Editor
  5. Change the 'Kind' to 'Icon'
  6. Observe a now empty legend image for 'Rule 1'
  7. Now click on 'Preview Map' and then back to 'Legend'
  8. Observe the legend image now showing

Expected behavior The legend image(s) should be visible even when the feature has not been drawn on the map (yet).

Screenshots The screenshot shows the problem in our application: the icons for 'Accessible parking' and 'Off-leash area 6am to 9am only' do not show because the features that have those icons are not visible on the map. When we redraw the legend when those features are visible, they show as expected.

geostyler-legend-not-drawing-icons

Note: the icons in the screenshot are cut off because geostyler-legend does not yet support offsets (which are used in this style). The style of these layers has 3 SVG icons: one for the 'bubble', one for the contents of the bubble and a separate shadow icon. The latter is showing for all styles in the screenshot because it's showing for at least one visible feature.

Environment: This happens both on the latest versions of Firefox and Chrome and both on Linux and Windows.

Additional context It seems that something is preventing the icon image(s) from loading (correctly) in the legend code. When looking at the network tab in the dev tools, I see the image being fetched. I have had similar issues in the past with our custom (non-geostyler) legend where when an image is first loaded without crossOrigin: anonymous and then again without crossOrigin, the map would refuse to show the image due to the browser serving the image from the cache that was stored without crossOrigin and tainting the canvas. I wonder if this might be something similar.

KaiVolland commented 12 months ago

Hey @rdewit, thanks for the report.

rdewit commented 11 months ago

Hopefully it helps finding out what's causing it, @KaiVolland . I've tried all sorts of things in the app side of things (like pre-loading the SVGs) but none of them worked. Happy to help out where I can.

KaiVolland commented 11 months ago

Hey @rdewit, actually a timing/loading issue with the svg was my first guess too. Maybe i'll find some time in the next two weeks to have a closer look at this. But i can't promise. :/