Skip to main content
Announcements
Have questions about Qlik Connect? Join us live on April 10th, at 11 AM ET: SIGN UP NOW
cancel
Showing results for 
Search instead for 
Did you mean: 
cpomeren003
Partner - Creator II
Partner - Creator II

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

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

1 Solution

Accepted Solutions
ErikWetterberg

Hi,

Looks like a bug, resize() should work. But you could try calling getObject() (or even better use visualization Api och call show again) when the user switches. The client caches objects, so it should not fetch from the server again.

Erik Wetterberg

View solution in original post

6 Replies
ErikWetterberg

Hi,

Is the the same map data? Couldn't you just put the text on top of the map and just toggle it, not the map?

Erik Wetterberg

cpomeren003
Partner - Creator II
Partner - Creator II
Author

No, it's not the same map data. I also got the same situation with a map object that swaps with a table and that has the same problem. So unfortunately that wouldn't solve this problem.

Thanks for thinking with me though.

ErikWetterberg

Hi,

Looks like a bug, resize() should work. But you could try calling getObject() (or even better use visualization Api och call show again) when the user switches. The client caches objects, so it should not fetch from the server again.

Erik Wetterberg

cpomeren003
Partner - Creator II
Partner - Creator II
Author

Calling getObject() worked, thank you very much.

Here is my working code:

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

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

     qlik.resize();

     app.getObject('QV03','NtjJuB');

     app.getObject('QV04','GbNGS');

});


Could you maybe elaborate on this part:

(or even better use visualization Api och call show again) when the user switches. The client caches objects, so it should not fetch from the server again.

I don't quite understand what you mean by this. Do you maybe have an example for me? I know it already works, but would love to learn the 'better' way as well.

Thanks again for the help!

ErikWetterberg

Hi,

A solution with the Visualization API would mean that you get the maps first:

var map1, map2;

app.visualization.get('NtjJuB').then(function(m1){

  map1 = m1;

  map1.show('QV03');

});

app.visualization.get('GbNGS').then(function(m2){

  map2 = m2;

  map2.show('QV04');

});

In your click handler you can then just show the map again:

  map1.show('QV03');

or

map2.show('QV04');

I have written an introduktion to the visualizatioon API here:

The Visualization API

Erik Wetterberg

cpomeren003
Partner - Creator II
Partner - Creator II
Author

Thanks once again for the explanation/help, it really helps.
I am fairly new to API's so your link is great as well.