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

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
siddhant3030
Hi, I have to write a raw query for one of my project. But till now I have used ecto queries and don’t have much experience writing raw ...
New
lessless
I believe there are people here who are dealing with CSV files import on the daily basis, and since Excel is a really popular tool there ...
New
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
johnnyicon
Hi all, I’ve just started learning Elixir and Phoenix Framework, so please pardon my n00bness at this stage. I’m trying to use Postgres...
New
shahryarjb
Hello, I get Persian date from my client and convert it to normal calendar like this: def jalali_string_to_miladi_english_number(persi...
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
itssasanka
Hi all, Trying to get some more clarity over utc_datetime and naive_datetime for Ecto: The documentation above suggests that while ...
New
sergio_101
I am VERY much an elixir newbie. I have taken one elixir course and one phoenix course on Udemy. During that course, I saw the instructor...
New
chensan
I have a User schema with a :from_id field set to type :string: defmodule TweetBot.Repo.Migrations.CreateUsers do use Ecto.Migration ...
New

Other popular topics Top

danschultzer
None of the current solutions worked well for me, so I went ahead and built a user management system from scratch. This project took far...
548 29377 241
New
New
siddhant3030
Hi, I have to write a raw query for one of my project. But till now I have used ecto queries and don’t have much experience writing raw ...
New
chrismccord
As promised, the first release candidate of Phoenix 1.3.0 is out! This release focuses on code generators with improved project structure...
New
Fl4m3Ph03n1x
About me? ( if you have nothing better to do than reading about some random guy in the internet :stuck_out_tongue: ) Hello all, this is ...
New
msaraiva
Surface is an experimental library built on top of Phoenix LiveView and its new LiveComponent API that aims to provide a more declarative...
564 43622 214
New
vegabook
I’m brand new to Phoenix and I have stripped one of the demo applications to the bone. I just want to get an svg up on the screen. Here i...
New
joaquinalcerro
Hi there, I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 records...
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
Qqwy
Update: How to use the Blogs & Podcasts section You can post links to your blog posts or podcasts either in one of the Official Blog...
3271 126479 1222
New

We're in Beta

About us Mission Statement