javascript - Leaftlet on Ionic Tabs App shows only first tile -

-

i have ionic tabs app (i used cordova templates on visual studio 2015) leaflet map on second tab. on first tab have search parameters pois want show on map markers. working fine, including map showing tiles, until start interacting controls on first tab. specifically, when enter input control , soft keyboard appears, if go second tab, map showing first tile. if zoom in or out, map refreshes shows first tile. problem solved though if change orientation of device.

the soft keyboard not thing causes problem. on ripple example, soft keyboard not show (i use laptop keyboard) after while manipulating search parameters on first tab, map stops working properly.

also, have tried mapbox api instead of leaflet , problem occurs same way.

the l.map instance unable correctly get/calculate it's dimensions because @ initialization instance's parent container has style of display: none. can call invalidatesize on map instance make recalculate it's dimensions when tab containing map shown:

checks if map container size changed , updates map if — call after you've changed map size dynamically, animating pan default.

http://leafletjs.com/reference.html#map-invalidatesize

i'm far no ionic expert according docs/reference, ion-tab has on-select callback this:

called when tab selected.

http://ionicframework.com/docs/api/directive/iontab/

<ion-tab on-select="ontabselected()"></ion-tab>  function ontabselected () {     //assuming 'map' holds reference map instance.     map.invalidatesize(); }

as mentioned in comments below question poster, above works, listening $ionicview.enter event , using invalidatesize in it's callback:

$scope.$on('$ionicview.enter', function () {     map.invalidatesize(); });

Comments

Post a Comment

Popular posts from this blog

ruby - Trying to change last to "x"s to 23 -

-
i have been playing around irb , have string looks this: irb(main):072:0> puts ["[\"4354 5432 5432 xxxxx\", \"6547 6547 8543 xxxxx\", \"2344 6543 6674 xxxxx\", \"2346 6236 7543 xxxxx\", \"1273 5585 5587 xxxxx\"]"] => nil irb(main):073:0> what want gsub last 2 "x" s of each 17 digit combination, 23 . what i've tried far (i've been using rubular): a.gsub(/\d[x]/,"23") <= grabs "x" s i'm close a.gsub(/\w[x{2}]/,"23") <= grabs "x" s grabs two digits each combination. is there easier way i'm not understanding? a.gsub(/\d{4} \d{4} \d{4} xxx\kxx/, '23') \d{4} = 4 digits what \k drop matched far. can use don't replace entire number, still able validate have in desired format.
Read more

jquery - Clone last and append item to closest class -

-
this bare-bones code on page: <div class="list-container"> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> </div> <p><button class="add-list-item">add</button></p> <div class="list-container"> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> </div> <p><button class="add-list-item">add</button></p> <di...
Read more

css - Can I use the :after pseudo-element on an input field? -

-
i trying use :after css pseudo-element on input field, not work. if use span , works ok. <style type="text/css"> .mystyle:after {content:url(smiley.gif);} .mystyle {color:red;} </style> this works (puts smiley after "buu!" , before "some more") <span class="mystyle">buuu!</span>a more this not work - colors somevalue in red, there no smiley. <input class="mystyle" type="text" value="somevalue"> what doing wrong? should use pseudo-selector? note: cannot add span around input , because being generated third-party control. :after , :before not supported in internet explorer 7 , under, on elements. it's not meant used on replaced elements such form elements (inputs) , image elements . in other words it's impossible pure css. however if using jquery can use $(".mystyle").after("add smiley here"); api docs on .after to ...
Read more