Phoenix + Leaflet.JS

Phoenix Forum Questions / Help
1

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

1 Like
2

Hi, did you import Leaflet module in your app.js?
Also you can go with
npm: { styles: {leaflet: ['dist/leaflet.css']}, globals: {leaflet: 'leaflet'} } in brunch-config.js
^ not sure the exact syntax, check http://brunch.io/docs/config.html#-npm-

1 Like
3

You can install with: npm install leaflet --save and then import "L" from "leaflet" at the top of your app.js

4 Likes
4

@defoemark I already tried to run npm install leaflet --save and add import "L" from "leaflet" in web/static/js/app.js

but there’s error message error in compiling app.js --> unexpected token

5

This is a javascript error, but still if you give us the line (and the surrounding lines) that it is pointing to and which token then we can help. :slight_smile:

6

Make sure you loaded babel-preset-es2015 to enable es6 syntax:
plugins: { babel: { presets: ["es2015"], ignore: [/web\/static\/vendor/] } }
And also I mistyped the line. There should be import L from "leaflet" (L without quotes)
Anyway would be better to share your package.json and config file

1 Like