1

I'm having a problem that has been asked by various questions but I haven't been able to solve it through the method that has been provided in various answers.

My issue is that tiles are not rendering correctly inside a jQuery Modal that included a Leaflet map generated through a rails application.

The previous questions (such as this Leaflet map not showing properly in bootstrap 3.0 modal) have suggested using invalidateSize(); method through a jQuery function after the modal is shown.

My application differs to the question in that I'm using the jQuery Modal library.

I'm currently trying with something like this

<% @clinics.each_with_index do |clinic, index| %>

<div class="link-to-map">
   <a href="#ex1" rel="modal:open" id="to-modal">
     <span class="glyphicon glyphicon-arrow-right"></span>
   </a>
</div>



<div id="ex1" class="map-modal" style="display:none;">
  <div class="row">
     <div class="col-sm-7">
       <div id="mapid-<%= index %>" class="mapas-modal">                                                 
       </div>
     </div>
   </div>
<% end %>
</div>

<script>
  var mymap = L.map('mapid-<%= index %>').setView([19.419444, -99.145556], 13);

  L.tileLayer('https://api.mapbox.com/styles/v1/eclarkgd/ciwfc2mce004b2plkmujdb3no/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZWNsYXJrZ2QiLCJhIjoiY2lraXVvaWlzMDUzN3RubTZ2OHBscWRxciJ9.ikI5wjFM2RNcoOrssqx2Zg', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    maxZoom: 18,
  }).addTo(mymap);

  var marker = L.marker([19.419444, -99.145556]).addTo(mymap);
  marker.bindPopup("<%= clinic.institucion %>").openPopup();
</script>

<script>   
  $('#to-modal').click(function() {

    setTimeout(function() {
      mymap.invalidateSize();
      alert("corre corre");
    }, 1000);

  });
</script>

Still my tiles are not rendering correctly within the div. I've used this method previously in an application that used the traditional bootstrap modal and it worked

Any ideas would be greatly appreciated.

**Edited to add the modal opening link

Community
  • 1
  • 1
eclark
  • 819
  • 7
  • 16

1 Answers1

1

You are not showing your modal opening link, etc., so we are left to assume you do not have typos.

Attaching an event listener on the "click" event of your modal opening link might not be the more appropriate scheme.

Why not simply using the events provided by your jQuery Modal plugin?

https://github.com/kylefox/jquery-modal#events

// Invalidate map size when the modal is opened.
$('#ex1').on($.modal.OPEN, function () {
  mymap.invalidateSize();
});

Demo: https://jsfiddle.net/3v7hd2vx/285/

ghybs
  • 47,565
  • 6
  • 74
  • 99
  • Hello, thanks for the comment, it is still not rendering corrently and still looks as if the size is not invalidated. I've added the modal opening link. Thanks for the help! – eclark May 11 '17 at 16:04
  • Actually now that I've checked, the solution works but partially. The rails app generates 8 modals each with a map inside each, for some reason the mapinvalidate side is only working for the last one. – eclark May 11 '17 at 21:23
  • Hard to tell what might be wrong without seeing your new code. Could be a closure or reference issue. – ghybs May 11 '17 at 21:43