Rails Leaflet Webpack пустая страница - PullRequest
Новая
       8

Rails Leaflet Webpack пустая страница

1 голос
/ 15 января 2020

Это продолжение связанной проблемы , которую @rossta исправила часть, но теперь проблема перенесена, поэтому я думаю, что я начну все сначала.

Нет ошибок, и сценарий завершается (проверено выводами console.log в скрипте). Элемент тела обнаруживается. Это работало с буклетом gem и теперь веб-пакетом в Rails 5.2, но не сейчас в Rails 6 с веб-пакетом

Я переместил скрипт на страницу, чтобы изолировать проблему 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

Необходима отладка, но я не уверен, с чего начать.

1 Ответ

0 голосов
/ 16 января 2020

Не могу поверить, что это изменение имело какой-либо эффект, но оно имело место.

Изменило map_two в <div id="map_two"... var mapVar = L.map("map_two"... на map и оно загружается. Я использовал map_two, потому что когда я экспериментировал ранее, я думал, что две страницы, которые я использовал только с map, запутались. Я также попробовал map-two, и это тоже не сработало (не то, чтобы я ожидал этого, но я все еще не понимаю, что происходит. Я перезапустил сервер между изменениями, чтобы быть более уверенным в происходящем.

...