6 Replies Latest reply: Apr 17, 2018 3:11 PM by Casper van Pomeren RSS

    [Mashup] White squares when I use Qlik.resize() in combination with a map object and a button

    Casper van Pomeren

      Hello everyone,

       

      I am currently working on a Mashup in Qlik Sense. This Mashup starts with a map object and a button and when you press that button you get to see a different map in a different size and some secret text. The problem I am having is that when I press the button twice (so to get back to my starting position) my map suddenly has a white square in the background or the background doesn't load 100%. With 'background' I mean the google maps OpenStreetMap.


      For a better understanding some screenshots of the problem:
      Starting view (all good):

      Qlik.Resize question.PNG

       

      When I press the left button (all good, get to see new map object and some secret text):Qlik.Resize question01.PNG

       

      When I press the left button again (return to starting position -> white squares appear in the background):

       

      Qlik.Resize question02.PNG

      Does anyone know how I can get rid of these white squares? The user can do it by zooming in and out, because then the entire map will show/reload again.

       

      This is my relevant code:

      JS:

      $('#page2button2').click(function () {

          $('.page2button2optie1, .page2button2optie2').toggle();

          qlik.resize();

      });


      HTML:

      <div class="row">

           <div class="col-sm-12 col-md-12 page2button2optie1 qvobject" id="QV03"></div>

            <div class="col-xs-12 col-md-12 page2button2optie2">
                     <div class="row">

      <div class="col-sm-12 col-md-6 qvobject" id="QV04"></div>
      <div class="col-sm-12 col-md-6">

                     <div class="row">

      <div class="col-sm-12 col-md-12 qvobject" id="QV05"></div>

      <div class="col-sm-12 col-md-12 qvobject" id="QV10"></div>

      <div class="col-sm-12 col-md-12 qvobject" id="QV11"></div>

      <div class="col-sm-12 col-md-12 qvobject" id="QV12"></div>

                                    </div>

                               </div>

                     </div>

           </div>

      </div>


      Does anyone know what I am doing wrong in my code or if there is any way I can prevent these white squares? One solution could be that on the press of the button I quickly zoom in and out without the user knowing (since this also works for the user, it should also work for me). The problem is, I don't know how to achieve this.

       

      Would love to hear what you guys think.

       

      Thanks in advance,

       

      Casper