Rails link_to not loading leaflet map

Question

I've come across a really strange (at least to me) issue. When I type the url by hand the map load just fine, however, when I use a link (either rails or a href) the map won't load until I hit refresh.

Any ideas?

routes.rb

Rails.application.routes.draw do
    root 'page#map'
end

application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>LeafletTest</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

map.html.erb

<%= link_to("reload page (rails)", root_path) %><br />
<a href="\">reload page (a href)</a><br />

<div id="mapid"></>

page.scss

#mapid {
  width: 100%;
  height: 600px;
}

page.coffee

$ ->
  map = L.map('mapid').setView([
    51.505
    -0.09
  ], 13)
  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors').addTo map

idmean idmean · Accepted Answer · 2019-04-16T09:45:10

I was able to fix this issue by ensuring a new TileLayer was created every time the map was rendered, i.e. when turbolinks:load is fired.

Rails link_to not loading leaflet map

2 Answers