Карта не отображается из Mapbox в моем приложении rails - PullRequest
Новая
       16

Карта не отображается из Mapbox в моем приложении rails

0 голосов
/ 09 апреля 2019

Я пытаюсь реализовать карту для моего приложения Rails. Я использую Mapbox. Я добираюсь до точки, где я вижу долготу и широту моего объекта в браузере, когда я проверяю, однако я не вижу карту. Все, что я вижу, это пустой DIV, где должна быть карта. Это приводит меня к мысли, что CSS отсутствует. Я уверен, что я импортировал CSS правильно. Может кто-нибудь знакомый с Rails, скажите, пожалуйста, где я ошибся?

Я уже добавил пряжу mapbpox: пряжа добавить mapbox-gl.

Мой ключ API mapbox также находится в моем файле .env

Вот функция: приложение / JavaScript / плагины / init_mapbox.js 

import mapboxgl from 'mapbox-gl';

const initMapbox = () => {
  const mapElement = document.getElementById('map');

  if (mapElement) { // only build a map if there's a div#map to inject into
    mapboxgl.accessToken = mapElement.dataset.mapboxApiKey;
    const map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v10'
    });
  }
};

export { initMapbox };

приложение / JavaScript / пакеты / application.js 

console.log('Hello World from Webpacker')


import 'mapbox-gl/dist/mapbox-gl.css'; // <-- you need to uncomment the stylesheet_pack_tag in the layout!

import { initMapbox } from '../plugins/init_mapbox';

initMapbox();

Приложение / макеты / application.html.erb: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>HairDo</title>
    <%= csrf_meta_tags %>
    <%= action_cable_meta_tag %>    
    <%= stylesheet_link_tag 'application', media: 'all' %>
    <%= stylesheet_pack_tag 'application', media: 'all' %> <!-- Uncomment if you import CSS in app/javascript/packs/application.js -->

  </head>
  <body>
    <%= yield %>
    <%= javascript_include_tag 'application' %>
    <%= javascript_pack_tag 'application' %>
  </body>
</html>

приложение / просмотров / haridressers / index.html.erb 

<h2>See all hairdressers</h2>

  <div class="row justify-content-around p-3">
    <div class="col-lg-12">
    <% @hairdressers.each do |hairdresser| %>
      <div class="card-hairdresser m-3">
        <div>
         <!--  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJVvH5nQJp3WUIhCkdYHcRd5bR5szxoDyQI7fzyZbjbVNeDSqc" style='height: 100%; width: 100%; object-fit: contain'> -->
         <%= cl_image_tag hairdresser.photo, width: 300, height: 200, crop: :fill %>
        </div>


        <div class="card-body">
          <h5 class="card-title"><%= link_to hairdresser.name, hairdresser_path(hairdresser) %></h5>
          <p class="card-title"><%= hairdresser.address%></p>
          <p class="card-title"><%= hairdresser.location%></p>
        </div>
      </div>
    <% end %>
    <div>
      <%= link_to 'Back', root_path %>
    </div>
  </div>
  <div class="col-lg-12">
    <div
      id="map"
      style="width: 100%;
      height: 600px;"
      data-markers="<%= @markers.to_json %>"
      data-mapbox-api-key="<%= ENV['MAPBOX_API_KEY'] %>"
    ></div>
  </div>
</div>
...