Rails Leaflet Webpack blank page

问题

This a continuation of a related problem that @rossta fixed part of, but now the problem is moved so thought I'd start over.

No errors and the script is completing (verified by console.log outputs in the script). The body element shows up. This worked with gem leaflet and now webpack in Rails 5.2, but not now in Rails 6 with webpack

I moved the script into the page to isolate the problem map/index.html.erb

<p id="notice"><%= notice %></p>
<% provide(:title, 'Map') %>
<h4>This is map/index.html.erb and is put in layouts/map.html.erb.</h4>
  <div id="map_two" class="map clearfix"></div>   -->
  <script>
    function makeMapTwo() {

    console.log('Hello from makeMapTwo in map/index.html.erb')
        var mapVar = L.map("map_two", { center: [34.040951, -118.258579], zoom: 13 });
        L.tileLayer('https://crores.s3.amazonaws.com/tiles/bkm/{z}/{x}/{y}.png').addTo(mapVar);

        $.getJSON("line_data.geojson", function (data_data) {
          var timelineData = L.timeline(data_data, {
            style: function(data_data){
              return {
                stroke: true,
                fillOpacity: 0.5
              }
              }, // end style: function(data_data)
            waitToUpdateMap: true,
            onEachFeature: function(data_data, layer) {
              layer.bindTooltip(data_data.properties.popup, { direction: 'top' } );
            } // onEachFeature:
          }); // end let timelineData = L.timeline
          var timelineControl = L.timelineSliderControl({
            enableKeyboardControls: true,
            steps: 100,
            start: 1885,
            end: 1928,
          });
          timelineData.addTo(mapVar); 
          timelineControl.addTo(mapVar);
          timelineControl.addTimelines(timelineData);
          }); //  end $.getJSON
        }; // end function makeMapTwo()

    $(document).ready(function() {
      makeMapTwo();
    });
  </script>

views/layouts/map.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <h6>This is layouts/map.html.erb. A note to remind me that header is happening twice in maps TODO</h6>
    <%= favicon_link_tag 'favicon.ico' %>
     <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload', 'data-turbolinks-suppress-warning': true %>
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     <style> 
       .map {
         height: 400px;
         width: 100%
       }
     </style>
     <%= csrf_meta_tags %>
  </head>
    <%= render 'layouts/header' %> <!-- the navbar -->
  <body class="container" data-mapbox-token="<%= ENV['MAPBOX_TOKEN'] %>">
    <%= yield %>
    <%= render 'layouts/footer' %>
  </body>
</html>

and app/javascript/packs/application.js:

import "core-js/stable"
import "regenerator-runtime/runtime"
import '../stylesheets/application'
window.jQuery = $
window.$      = $
import 'leaflet'
import "leaflet.timeline"
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("trix")
require("@rails/actiontext")
require("jquery") 
import "bootstrap"
import 'bootstrap/dist/js/bootstrap'

document.addEventListener("turbolinks:load", () => {
  $('[data-toggle="tooltip"]').tooltip()
  $('[data-toggle="popover"]').popover()
})

config/webpack/environment.js:

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

environment.plugins.append('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery',
    Popper: ['popper.js' ,'default'],
  }))

module.exports = environment

package.json

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

environment.plugins.append('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery',
    Popper: ['popper.js' ,'default'],
  }))

module.exports = environment

Debugging needed, but I'm not sure where to start.

回答1:

I can't believe that this change had any effect but it did.

Changed the map_two in <div id="map_two"... var mapVar = L.map("map_two"... to just map and it loads. I was using map_two because when I was experimenting earlier I thought the two pages I was using with just map were getting confused. I also tried map-two and it didn't work either (not that I would have expected it, but I still do't understand what is happening. I restarted the server between the changes to be more sure of what is going on.

来源：https://stackoverflow.com/questions/59744187/rails-leaflet-webpack-blank-page

标签

javascript

ruby-on-rails

OpenLayers

ruby-on-rails-6

webpacker