search

mysociety / local-intelligence-hub

https://www.localintelligencehub.com
Other
6 stars 2 forks source link

Fix Leaflet marker image path discovery #586

Closed zarino closed 4 months ago

zarino commented 4 months ago

Including url("/static/leaflet/images/marker-icon.png") in our Sass doesn’t work because django-compressor adds a hash as a query parameter, which breaks Leaflet’s /^(.*)marker-icon\.png$/ regexp.

So this commit removes the ruleset from our Sass pipeline, and just embeds it directly into the HTML page, where django-compressor can’t mess it up.

zarino commented 4 months ago

FYI @struan I’ve tested this out locally (with DEBUG=False in my docker env) and it works – and have verified that the URL in the HTML gets passed to Leaflet when it’s making its marker. Whether something on the live site (but not on Docker under DEBUG=False) will add a hash to the URL remains to be seen.

Note, though, I really think we should be setting this path with Icon.Default.imagePath = "<whatever>" in explore.esm.js but that doesn’t seem to work. Maybe because we’re importing bits of Leaflet individually (eg: import { Icon } from 'leaflet/src/layer/marker') and the modification doesn’t carry through separate imported objects? Must admit this is the point I get out my depth with ES6 Modules 😬 – see alternate pull request in https://github.com/mysociety/local-intelligence-hub/pull/588

zarino commented 4 months ago

Closing in favour of #588.