solop

solop

Correctly loading an external npm dep (Leaflet)

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

I followed Asset Management — Phoenix v1.8.8

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?

First Post!

voughtdq

voughtdq

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).

Where Next?

Popular in Questions Top

sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
New
vertexbuffer
Hello, can anybody help here..? I have a list of players and I what to delete an element, but every for loop the list is reverting to ori...
New
9mm
I am constructing a JSON object (map) and I need to conditionally set a field. I’m trying to write proper elixir-way code… and I’m at a l...
New
JeremM34
Hello, how can I check the Phoenix version ? Thanks !
New
nobody
How to bind a phoenix app to a specific ip address? could not find anything about that, nowhere, unfortunately, but for me this is quite...
New
jaysoifer
Is there a way to rollback a specific migration and only that one (“skipping” all the other ones)? Would mix ecto.rollback -v 200809061...
New
jay1
Why is it that the mnesia database isn’t the most preferred database for use in Elixir/Phoenix?
New
beno
I will often find my self writing things similar to: case some_value do nil -> something() "" -> something() _ -> somethi...
New
belgoros
I’m not a pro in using Regex and can’t figure out why the following behaviour happens, especially if we take into account the difference ...
New
marick
I had some trouble figuring out how to make many-to-many associations work. Once I got it working, I wrote a blog post. Because I’m a nov...
New

Other popular topics Top

gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New
Patoshizzle
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID<0.412.0> terminating ** (Postgrex.Error) FATAL...
New
ovidiubadita
Hey all, I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod – where is this set? Thanks.
New
minhajuddin
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
grych
Hi folks, Few months ago I have announced the proof-of-concept of the library to manipulate the browsers DOM objects directly from Elixi...
639 52341 488
New
jason.o
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New
klo
Got a question about when to concat vs. prepending items to list then reversing to achieve appending. So i know lists boil down to [1 | ...
New
komlanvi
Hi everyone, I was playing with phoenix liveView but I run into an issue. I have a form and want to validate each input text when the te...
New

We're in Beta

About us Mission Statement