Phoenix + Leaflet.JS

[taufiq ibrahim]

Hi all,

I just learned using Phoenix framework for couple of days.

I tried include a Leaflet.JS inside the project.

I already:

- successfully create a new page called /maps

- the page can be loaded

- tried to put leaflet.js and leaflet.css inside web/static/vendor

- create a div and script to call leaflet map in web/templates/maps/index.html.eex

However when I load the page the map was not loaded with console says : Uncaught ReferenceError: L is not defined

It seems that the JS was not loaded but if I checked the sources using Chrome inspect element the JS was already loaded.

Am I missing something here? Any help would be appreciated.

Thanks

[OvermindDL1]

Is it loaded 'before' your code?  Since it does not seem to follow ES6 styling the vendor directory is correct, but because of that order will matter (it does not with ES6 javascript).  You could wrap the code in ES6 migration code then import it as normal, though easier might be to put it in the files.javascripts.order.before section so it is included before anything else.

Also the css file should usually still be in the css folder (usually, does not matter on output).  Vendor is generally for files that need to be ignored for post-processing by brunch (non-ES6 javascript in the default phoenix case).

Also there are more people talking on the main Elixir discussion site at https://elixirforum.com/ :-)