Ruby on Rails - Leaflet-rails 'ReferenceError: L is not defined'

user_13927852 0
Viewed 343

I am new to Ruby on Rails and Leaflet, but I am trying to implement a map using the gem 'leaflet-rails' version 1.6 with Rails version 6.0.3.2.

here is a similar thread on a similar issue.

I am receiving 'ReferenceError: L is not defined' when I load up my page.. I have followed the install guide and have been trying to implement the map for the last 2 night now, with no avail. The only way I am able to get the map to work is if I add the code below into the HTML file I am trying to implement the map into.

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"/>

I have checked and I am Using leaflet-rails 1.6.0

I have added 'gem 'leaflet-rails'' to the Gemfile

I have added '*= require leaflet' to the application.css file

I have added '//= require' leaflet to the application.js file

I have added the code below to application.html.erb

<%= javascript_pack_tag 'application', 'data-turbolinks-track': true %>
<%= stylesheet_link_tag 'application' %>

I have added the code below to the leaflet.rb file I created

 ' Leaflet.tile_layer = 'http://{s}.tile.cloudmade.com/YOUR-CLOUDMADE-API-KEY/997/256/{z}/{x}/{y}.png'
# You can also use any other tile layer here if you don't want to use Cloudmade - see http://leafletjs.com/reference.html#tilelayer for more
Leaflet.attribution = 'Your attribution statement'
Leaflet.max_zoom = 18'

When I refresh the page and inspect the HTML, the script is running the below code.

var map = L.map('map', {});
map.setView([51.52238797921441, -0.08366235665359283], 18);
L.tileLayer('http://{s}.tile.cloudmade.com/YOUR-CLOUDMADE-API-KEY/997/256/{z}/{x}/{y}.png', {
          attribution: 'Your attribution statement',
          maxZoom: 18,
}).addTo(map);

If I look inside the head of the file, it seems to be referencing the application.js file, but no where can I see it referencing anything related to Leaflet.

<script src="/packs/js/application-9fe6f817df469889a178.js" data-turbolinks-track="true"></script>

I am pretty lost on what to try next as I am very new to Rails.

I would highly appreciate any help. Regards, Rory.

leaflet rubygems ruby-on-rails ruby javascript
1 Answers

Blockquote Skip the gem and just install Leaflet through Yarn. You can add the dependency with yarn add leaflet. Front-end packages distributed as gems are an obsolete concept in Rails 6. And where generally problematic as they always lagged behind the package the wrapped. – max

I was following outdated install instructions on the leaflet-rails github page. I installed leaflet via a gem, which is now obsolete in rails 6 so all my attempts to initialize the map were unsuccessful.

The //= require leaflet comment is a Sprockets directive for the old assets pipeline and won't do anything in Webpack. In Webpack you use its require('leaflet') function in your main manifest (or imports). Its a very different beast and you're following outdated instructions. github.com/rails/webpacker – max

I then installed leaflet via yarn and initialized it in application.js with require(leaflet) and added the leaflet css to it's own file and referenced that in the html.erb file I am working in. Then it was just simply using the inbuilt map helper function and the basic map is working.

 <%= map(:center => {
  :latlng => [51.52238797921441, -0.08366235665359283],
  :zoom => 18
}) %>

Thanks to Max for solving this issue for me.

user_139278520
Related