Mapbox.js rendering blank in Ruby on Rails

Question

I - a beginner at Ruby on Rails, HTML and CSS - am trying to render a Mapbox.js map in my Rails application. However, the map does not show up. As you can see in the picture, the zoom controls do show up correctly. When trying to resolve the error, I came across this FAQ. I have confirmed that my access token, map ID and account usage limits are not the problem.

The following is my code:

<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet'/>

<div class="content">
  <% if @points[@unit.name] != nil && @points[@unit.name].length %>

      <div id='map' style="
          position: relative;
          margin-left: -10px;
          bottom: 0;
          width: 700px;
          height: 700px;">
      </div>

      <script type='text/javascript'>
          L.mapbox.accessToken = 'heres-my-access-token';
          var map = L.mapbox.map('map', 'mapbox.satellite').setView([52.214360, 6.860573], 8);
      </script>

  <% end %>

... other <div>s

</div>

<script>
    $('map').show();
    map.invalidateSize();
</script>

I'm working in a pretty large application so the problem is probably caused by styling or something. I checked according to the FAQ tips and the elements on the page are not set as initially 'hidden' anywhere. I am not quite sure whether my invalidateSize() command is placed correctly though...

I'm now pretty much stuck - does someone have other ideas to troubleshoot this problem?

Answer 1

Should $('map').show(); be $('#map').show(); ?

You can also check if this is firing too soon, by only running it on doc ready ie

$(function() {
  $('#map').show();
  map.invalidateSize();
});

Answer 2

Turns out the problem was that it wouldn't load the mapbox.js script because of the Content Security Policy directive.

I found this out by going to the browser console, which I hadn't thought of trying before. Here I found the errors related to mapbox (eg 'Refused to load the script because....'.

I fixed it by whitelisting mapbox.