Correctly loading an external npm dep (Leaflet)

Phoenix Forum Questions / Help
,
1

I want to add a Leaflet map, without loading some js and css from external parties.

I followed Asset Management — Phoenix v1.7.14

First I tried the suggested option 3:
{:leaflet, github: "Leaflet/Leaflet", app: false, compile: false}

mix deps.get retrieves it correctly, but importing it in app.js fails (could not be resolved).

After I tried the other option (instaling into assets with npm)
Here I could import the js, but importing the css fails:

import 'leaflet/dist/leaflet.css';

which fails with
✘ [ERROR] No loader is configured for ".png" files: node_modules/leaflet/dist/images/marker-icon.png

as suggested somewhere I modify the following to dev.exs

  watchers: [
    esbuild:
      {Esbuild, :install_and_run,
       [:case_manager, ~w(--sourcemap=inline --watch --loader:.png=file)]},

this compiles, but obviously its looking for the files in the wrong place:

[debug] ** (Ecto.NoResultsError) expected at least one result but got none in query:
from c0 in App.Entries.Entry,
  where: c0.id == ^"marker-icon-2x.png"

omg, its trying to load the assets through ecto!

i am at a loss. How is this being done the correct way?

1 Like
2

I think the browser is just doing what it’s told by leaflet.js, which is requesting marker-icon-2x.png, a relative URL. Requesting marker-icon-2x.png on //myapp:4000/entries would make the browser GET //myapp:4000/entries/marker-icon-2x.png. You need some way to tell leaflet.js to use a different URL.

Based on a cursory glance around leaflet.js and its docs, you would probably want to override Icon.Default and point the URLs to your static path (e.g. /static/images/marker-icon-2x.png or however you have your statics organized).

3

Did you try @import "leaflet/dist/leaflet.css"; in “/assets/css/app.css”?

I think you should set --loader:.png=dataurl in the Esbuild config.