ruby on rails: leaflet-rails not loading

问题

Using RoR 4.1.4

I am trying to use the leaflet-rails gem. I followed the steps outlined in the github page, but when I try to load the map, I see

ReferenceError: L is not defined

in the browser console. This obviously means that the helper from the gem is being loaded and executed but it can't find the leaflet.js file.

However, the head section of the page shows that /assets/leaflet.js is being referenced and it actually IS there.

When I look at the generated code:

    <div id="map"></div>
    <script>
    var map = L.map('map')
    map.setView([-54.0, 6.08], 16)
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
              attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
              maxZoom: 18,
    subdomains: '',
    }).addTo(map)
    </script>
  </div>
  <script src="/assets/jquery.js?body=1" data-turbolinks-track="true"></script>
  <!-- all the other scripts loaded -->
  <script src="/assets/exif.js?body=1" data-turbolinks-track="true"></script>
  <script src="/assets/leaflet.js?body=1" data-turbolinks-track="true"></script>
  <!-- some more scripts -->

So the gem adds a script right below the map div, and only then, due to the sprockets mechanism and all that, the other scripts are loaded. To me this looks like then obviously the script can't possibly load the leaflet.js as it's being referenced afterwards!

So...am I misunderstanding something re how RoR handles gems and javascripts? It must have been working at some point...

Here's my /app/assets/javascript/application.js:

//= require jquery
//= require jquery.ui.widget

// Here I load a whole bunch of javascripts which are related to jquery-fileupload, cut for brevity
//= require bootstrap.min
//= require bootbox.min 
//= require bootstrap-datepicker

//= require exif 
//= require leaflet

//= require turbolinks
//= require_tree .

回答1:

Turns out this is maybe some RoR specific issue.

Many sites recommend to put the

<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

line which loads the javascripts, at the END of a file, in order to speed up page display. With the leaflet-rails gem, this isn't great, and will generate the problem described above. If putting the same line in the <head> section, the problem goes away...

P.S. I still have problems with the gem though, now I get

Error: No value provided for variable {s}

If I substitute "http://{s}.tile.osm.org/{z}/{x}/{y}.png" with "http://a.tile.osm.org/{z}/{x}/{y}.png" it works...don't think it's meant to work that way though...but that's a different issue...

回答2:

I faced the same issue in rails.

leaflet works in development mode (bower managed)
Can't find variable L in production mode

The following steps did not help.

asset "leaflet" (Bowerfile)
//= require leaflet/dist/leaflet.js (application.js)
*= require leaflet/dist/leaflet.css (application.css)
Rails.application.config.assets.precompile += ['leaflet/dist/leaflet.js', 'leaflet/dist/leaflet.css']
assets precompiled and uploaded to production public/assets/...

Am I still missing something?

[solution]

This issue can be resolved by using CDN assets recommended by leaflet at http://leafletjs.com/examples/quick-start/

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

However, I would prefer to use local cached precompiled assets bundled at my app-server instead of relying on a public CDN, network bandwidths, and a lot more external things.