Rails Leaflet Webpack空白页 [英] Rails Leaflet Webpack blank page
问题描述
这是的延续相关问题，@ rossta解决了该问题，但现在问题已经解决，以为我会重新开始.
This a continuation of a related problem that @rossta fixed part of, but now the problem is moved so thought I'd start over.
没有错误，脚本已完成(由脚本中的console.log输出验证).身体元素出现.这适用于gem传单，现在可以在Rails 5.2中使用webpack，但现在不能在带有webpack的Rails 6中使用
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
我将脚本移到页面中以找出问题map/index.html.erb
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>
和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.
推荐答案
我不认为此更改会产生任何效果，但确实如此.
I can't believe that this change had any effect but it did.
将<div id="map_two"... var mapVar = L.map("map_two"...中的map_two更改为map并加载.我之所以使用map_two，是因为当我较早进行实验时，我以为我只用map使用的两个页面就变得混乱了.我也尝试了map-two，但它也不起作用(不是我会期望的，但是我仍然不知道发生了什么.我在更改之间重新启动了服务器，以更确定发生了什么.
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.
这篇关于Rails Leaflet Webpack空白页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
