- 🇷🇺Russia _kom__
The problem has been solved one year ago https://github.com/Leaflet/Leaflet/issues/5705. I think we can close the issue, checked as described here https://www.drupal.org/project/leaflet/issues/3103941 → , the bug disappeared.
This is not exactly a new issue. The problem is the same as the issue described here:
Map in modal: missing tiles
https://www.drupal.org/node/2681641 →
The referenced issue above is about trying to use a Leaflet Map in a modal window.
This post:
javascript - Data-toggle tab does not download Leaflet map
http://www.itgo.me/a/3245848458408470933/data-toggle-tab-does-not-downlo...
Describes the issue in detail.
In my case, I am trying to use a leaflet map in a Bootstrap accordion. The display issue with the map seems to be the same. When I display this map in a page, everything is OK, visitors can see the map as intended (marker in the middle etc.) But if I place it in a an accordion pane, multiple issues appear (see in the attached screenshot): Only one map tile is generated and the marker is in the wrong place in the modal as well, it's in the top left corner.
The map is a view with a Map (Leaflet API, via IPGV&M) display and was inserted into the accordion with the insert view module.
The map displays perfectly in a page.
It does not display properly in a bootstrap accordion when the panel first opens.
The map displays perfectly when the browser window is resized. After the resize It continues to work when the tab is closed then open again.
User StG posted some code here (
https://www.drupal.org/node/2681641 →
) that is a workaround. The solution is to use drupal_add_js to pass map.invalidateSize(); to the map.
I am trying to get his fix to work in my case. I adapted the code and placed it in the page with the leaflet map in the accordion.
<?php
// add inline javascript
drupal_add_js('
jQuery(function($) {
$(document).ready(function(){
$(\'#where-to-get-tested\').on(\'show.bs.collapse\', function(){
var map = Drupal.settings.leaflet[0].lMap;
map.invalidateSize();
});
});
});
', 'inline');
?>
Unfortunately it does not work.
I am pretty sure that the event is OK, well maybe not that sure.
In my code, #where-to-get-tested is the the id of the panel that the leaflet is in.
I understand the issue. Bottom line, I am sure the that StG’s code is solid, I just don’t know how to reference the map.
I have been struggling with this for a couple of days. I am not a js coder and this is too complex for me. Any insight offered would be very appreciated. A patch to the leaflet js would be the ideal outcome, but I just want to solve my immediate issue.
Thank You
This is the generated source code (panel with the leaflet map).
<div class="panel panel-default">
<div class="panel-heading" id="headingOne" role="tab">
<h2 class="panel-title">
<a aria-controls="where-to-get-tested" aria-expanded="false" class="collapsed trig-resize" data-parent="#accordion" data-toggle="collapse" href="#where-to-get-tested" role="button">Where to Get Tested</a>
</h2>
</div>
<div aria-labelledby="headingOne" class="panel-collapse collapse" id="where-to-get-tested" role="tabpanel">
<div class="panel-body">
<p class="bigger">
Getting tested is quick and easy. By choosing one of the gay-friendly clinics below, your test is totally confidential and, in most cases, free-of-charge. Post-exposure prophylaxis (PEP), a short-term antiretroviral treatment to reduce the likelihood of HIV infection after potential exposure, and PrEP may also be available.
</p>
<div class="inserted-view">
<div class="view view-clinics-map-ip-geoloc-display view-id-clinics_map_ip_geoloc_display view-display-id-block_1 view-dom-id-04a24383412321aa1d039451b981c730">
<div class="view-content">
<div class="ip-geoloc-map leaflet-view amarkers">
<div id="ip-geoloc-map-of-view-clinics_map_ip_geoloc_display-block_1-c4822b00dd64ea054169163f9c8624ba" style="height: 80vh; position: relative;" class="leaflet-container leaflet-retina leaflet-fade-anim" tabindex="0"><div class="leaflet-map-pane" style="transform: translate3d(0px, 0px, 0px);"><div class="leaflet-tile-pane"><div class="leaflet-layer"><div class="leaflet-tile-container"></div><div class="leaflet-tile-container leaflet-zoom-animated"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; transform: translate3d(-231px, -163px, 0px);" src="//mt2.googleapis.com/vt?x=102140&y=60486&z=17"></div></div></div><div class="leaflet-objects-pane"><div class="leaflet-shadow-pane"></div><div class="leaflet-overlay-pane"><svg class="leaflet-zoom-animated" style="transform: translate3d(0px, 0px, 0px);" width="0" height="0" viewBox="0 0 0 0"></svg></div><div class="leaflet-marker-pane"></div><div class="leaflet-popup-pane"></div></div></div><div class="leaflet-control-container"><div class="leaflet-top leaflet-left"><div class="leaflet-control-zoom leaflet-bar leaflet-control"><a class="leaflet-control-zoom-in" href="#" title="Zoom in">+</a><a class="leaflet-control-zoom-out" href="#" title="Zoom out">-</a></div></div><div class="leaflet-top leaflet-right"></div><div class="leaflet-bottom leaflet-left"><div class="leaflet-control-scale leaflet-control"><div class="leaflet-control-scale-line"></div></div></div><div class="leaflet-bottom leaflet-right"><div class="leaflet-control-attribution leaflet-control"><a href="http://leafletjs.com" title="A JS library for interactive maps">Leaflet</a> | Map data © <a target="attr" href="http://googlemaps.com">Google</a></div></div></div></div>
</div>
</div>
</div> </div>
<!-- /panel-body-->
</div><!-- /panel-collapse -->
</div><!-- /panel-->
</div>
I posted a not very well thought out post in the Module Development and Code Questions forum about the same issue. Sorry for the duplicate post.
Leaflet map in a Bootstrap Accordion/Tab (same for modal) issue
https://www.drupal.org/node/2844713 →
Active
1.4
Code
Not all content is available!
It's likely this issue predates Contrib.social: some issue and comment data are missing.
The problem has been solved one year ago https://github.com/Leaflet/Leaflet/issues/5705. I think we can close the issue, checked as described here https://www.drupal.org/project/leaflet/issues/3103941 → , the bug disappeared.