I’m trying to deploy a custom icon for my leaflet visualization. I feel like I’m missing something - the file keeps getting a 404. I’ve tried moving it to /components, that didn’t help.
Only referenced files are included in the build output. How are you trying to use the image?
Passing it to Leaflet as a base for a map icon. Until I get this to work I’m just hosting it on another website, like below:
const ChargerIcon = L.Icon.extend({
options: {
iconSize: [30, 30],
iconAnchor: [15, 25],
popupAnchor: [0, -25]
}
});
const chargerIcon = new ChargerIcon({iconUrl: "https://aircharg.wordpress.com/wp-content/uploads/2025/01/aircharge-charger.png"});
then later…
loc.Marker = L.marker([loc.lat, loc.lng], {icon: chargerIcon});
loc.Marker.bindPopup(popupForCharger(loc));
loc.Marker.addTo(map);
I tried FileAttachment
, then passing that to leaflet
const mapMarker = FileAttachment("components/aircharge-charger.png")
then later using mapMarker.image(), but that was feeding the file object to leaflet, not the path to the actual file.
The app is here if its helpful:
https://aircharge.observablehq.cloud/aircharge/
Perhaps, you might try mapMarker.url()
?
Thanks for the idea @mcmcclur !
I’m trying that here, like this:
const airchargeMarker = FileAttachment("components/aircharge.png").image();
then later,
const chargerIcon = new ChargerIcon({iconUrl: airchargeMarker.url()});
I see a type error airchargeMarker.url is not a function
in the debug console in FireFox. If I take the .image()
off, I instead see a 404 that [object Promise]
cannot be found.
With a little more poking, airchargeMarker
does have a property name
which contains the filename (though not the path) - providing this to leaflet still gets a 404 (even if I move the file back out of components to the src
app root)