From: Anthony Talarico Date: Wed, 25 Sep 2019 20:06:48 +0000 (-0400) Subject: fixing the leaflet map render issue regarding the container that is toggled. X-Git-Tag: v1.1.0^2~86 X-Git-Url: http://cvs2.gaslightmedia.com/gitweb/?a=commitdiff_plain;h=2858967b93f2f46cc65a573f51cfe03c29d0dc06;p=WP-Themes%2Fpetoskeyarea.git fixing the leaflet map render issue regarding the container that is toggled. globally scoped leafletmap var. updated function arguments. --- diff --git a/glm-member-db/views/front/members/detail.html b/glm-member-db/views/front/members/detail.html index e4b1997..6723905 100755 --- a/glm-member-db/views/front/members/detail.html +++ b/glm-member-db/views/front/members/detail.html @@ -513,6 +513,7 @@ // Open or close the appropriate section if a toggle is clicked $(".glm-member-detail-content-toggle").on("click", function() { + console.log("toggled") if($(this).parents('.glm-member-detail-sub-data-links').length) { var target = $(this).parent().parent().attr("id").slice(0, -10); } else { @@ -527,13 +528,22 @@ } $("#"+target+"-container").toggleClass("selected"); $("#"+target+"-toggle").toggleClass("selected"); + + }); $("#glm-member-detail-locationMap-toggle").on("click", function() { - var container = L.DomUtil.get('map'); - if(container != null){ - L.map.invalidateResize(); - } + // var container = L.DomUtil.get(leafletMap); + // // console.log(container) + + // if(typeof container !== 'undefined'){ + // console.log(container) + // // L.map.invalidateResize(); + // setTimeout(() => { + // // container.invalidateResize(); + // }, 500) + // // setTimeout(function(){ map.invalidateSize()}, 400); + //} }); {if $settings.detail_show_map} @@ -557,6 +567,14 @@ }); $(this).html(mapBtnTxt); + + var container = L.DomUtil.get(leafletMap); + + if(typeof container !== 'undefined'){ + setTimeout(() => { + container.invalidateSize() + }, 500) + } }); {if $settings.selected_map_interface == 1} @@ -575,10 +593,10 @@ var memberLat = {$settings.maps_default_lat}}; var memberLon = {$settings.maps_default_lon}}; {/if} - + var leafletMap; function initMap() { - var leafletMap = L.map('LeafletMapContainer').setView([memberLat, memberLon], {$settings.maps_default_zoom}); + leafletMap = L.map('LeafletMapContainer').setView([memberLat, memberLon], {$settings.maps_default_zoom}); var leafletTileServer = '{$settings.leaflet_tile_server}/{$settings.leaflet_tile_server_key}/' + {literal}'{z}/{x}/{y}.png'{/literal}; var leafletMinZoom = 5; var leafletMaxZoom = 18;