在 Rails 的 Mapbox 地图上实现 jwilhem 的滑块答案

【问题标题】：Implementing jwilhem's slider on a Mapbox map in Rails在 Rails 的 Mapbox 地图上实现 jwilhem 的滑块
【发布时间】：2016-11-07 19:21:17
【问题描述】：

尝试实现D Wilhem's Leaflet Slider，Rails 中JQuery UI slider 的前端。我收到错误ReferenceError: Can't find variable: L。我看过很多讨论，并想象我混淆了我的语法。页面加载，1）我的数据显示，2）滑块控件显示，但滑块不起作用，然后我得到上述错误。

 function makeMap() {
   L.mapbox.accessToken = $('body').data("mapboxToken");

   var map = L.mapbox.map('map', 'mtnbiker.d7jfhf8u') // Was: mapbox.streets
              .setView([34.040951, -118.258579], 13);

   L.control.fullscreen().addTo(map);

   var featureLayer = L.mapbox.featureLayer()
                     .loadURL('map/point_data.geojson')
                     .addTo(map);

   var featureLayer = L.mapbox.featureLayer()
                        .loadURL('map/line_data.geojson')
                         .addTo(map);

   var sliderControl = L.control.sliderControl({range: true, alwaysShowDate: true, timeStrLength: 10, layer: featureLayer});

   map.addControl(sliderControl); 

   sliderControl.startSlider();

   $('#slider-timestamp').html(options.markers[ui.value].feature.properties.time.substr(0, 10)); 

   featureLayer.on('ready', function(e) {
     map.fitBounds(featureLayer.getBounds());
   });
  }

application.js:

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require 'leaflet.js'
//= require leaflet
//= require_tree .

地图在本地加载数据（点和线）和不起作用的滑块。点在 Heroku 加载，但不是线条或滑块。 https://secure-shore-68966.herokuapp.com/map.

回答：经过数周尝试不同的事情后，一位来自 MaptimeLA 的朋友能够在一次会议上与我坐下来并找到了一种类型。她非常熟悉 Rails 和调试。 application.js 是：

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

固定

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

感谢所有参与进来的人。

所有代码都在https://bitbucket.org/MtnBiker/crores5/。

PS。我看不到表示我想回答我自己的问题的复选框。

【问题讨论】：

标签： ruby-on-rails jquery-ui leaflet mapbox jquery-ui-slider

【解决方案1】：

查看链接中的代码，按此顺序加载以下脚本：

<script src="/assets/application-665a36b2268b441400787c68e9f08977c28cc33814ce32a46439c27016b720ec.js" data-turbolinks-track="true"></script>
<script src="https://api.tiles.mapbox.com/mapbox.js/v2.2.4/mapbox.js"></script>
<script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://rawgit.com/dwilhelm89/LeafletSlider/master/SliderControl.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>

我怀疑某些东西加载不正常，或者L 被丢弃在某个地方。我也看不到核心 jQuery 的加载位置。

查看Demo，他们加载了以下内容：

<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
<script src="https://rawgit.com/dwilhelm89/LeafletSlider/master/SliderControl.js" type="text/javascript"></script>

所以我认为你所缺少的只是核心 jQuery 和可能的 LeafletJS。这是一个基于他们提供的示例的有效 JSFiddle。

https://jsfiddle.net/Twisty/sr0sjzk2/

【讨论】：

谢谢。我会看更多的。事实上，自从我发帖以来，我一直在研究资产管理。我不了解层次结构，但正在尝试对其进行整理。还努力更好地弄清楚如何在浏览器中使用开发工具来查看正在加载的内容。至少会在我期望取得很大进展之前一天。地图和点现在正在 Heroku 中加载，但不是线条和滑块。地图、点和滑块在 localhost 上加载，但滑块无法正常工作，出现新错误 Uncaught TypeError: Cannot read property '_leaflet_id' of undefined(…)。
@Greg 您的数据点未完全加载。我看到一个 500 错误以响应 AJAX 中的 GET 请求之一。这将级联成未正确填充（未定义）的变量，从而导致代码错误。您的代码将运行到这些点并停止或奇怪地运行。
我看到 jQuery 不存在。它在本地主机上，所以 Heroku 有一些不同。我会调查的。谢谢
我认为 jQuery 包含在 secure-shore-68966.herokuapp.com/assets/… 中。我在其中查找了 jQuery 2.2.2 的部分内容，并找到了看起来相似的部分。 Rails 将在某些地方列出的资产放在一起。必须查看更多的页面加载。
@Greg 现在没有看到任何加载问题。还看到了所有的连接线。

【解决方案2】：

这不是一个完整的答案。但是通过 Rails 中的资产管道并进行更改，我已经消除了错误。问题可能是在使用各种教程时，我在 Ruby in Rails 应用程序的不同位置放置了不同版本的 Leaflet 或 jQuery。

但是页面仍然不能正常工作。我在本地主机上收到 TypeError: $("#leaflet-slider").slider is not a function. (In '$("#leaflet-slider").slider', '$("#leaflet-slider").slider' is undefined) 错误。错误在 D Wilhelm 的 SliderControl.js 中。在 Heroku 上，没有错误但没有滑块。我会发布一个新问题。 https://secure-shore-68966.herokuapp.com/map.

感谢 Twisty 的帮助。

【讨论】：