Map tiles not reloading after setView

[senti]

We are using

Code: Select all

center

and

Code: Select all

zoom

to synchronise the mapView between two
Highchart maps.

The updates are triggered from the

Code: Select all

redraw

event of one chart, and
the map-view of the second map are then updated using

Code: Select all

chart.mapView.setView(props.mapView.center, props.mapView.zoom, true, true)

.

After

Code: Select all

setView

, the inactive map the moves correctly, but the map tiles are not
reloaded for the new position after and a white border appears.

Only after the map is again focused the new map tiles are loaded.

What can be done to force the map tiles to reload after

Code: Select all

setView

?.

I have created a video that shows the problem www.seven49.net/download/highmaps_move.mkv .

[jakub.s]

Hi @senti,

Welcome to our forum & thanks for the question!

Please create a minimal reproducible example in JSFiddle. You could start from one of the demos available here: https://www.highcharts.com/demo

Only then will I be able to investigate this issue further and potentially offer a sensible solution.

Best regards!

[senti]

I finally go around to create a minimal Demo demonstrating the Problem.

https://codesandbox.io/p/github/brnsnt/ ... -demo/main

Repo: https://github.com/brnsnt/highmaps-mapview-demo

---
And here is the original post propertly formatted.


We are using center and zoom to synchronise the mapView between two Highchart maps.

The updates are triggered from the redraw event of one chart, and
the map-view of the second map is then updated using

Code: Select all

chart.mapView.setView(props.mapView.center, props.mapView.zoom, true, true)

.

After setView, the inactive map the moves correctly, but the map tiles are not
reloaded for the new position after and a white border appears.

Only after the map is again focused the new map tiles are loaded.

What can be done to force the map tiles to reload after setView?

I have created a video that shows the problem www.seven49.net/download/highmaps_move.mkv .

[andrzej.b]

Hi,

Thanks for the demo shared. I haven't noticed the issue you described. Can you upload the video to some online viewer, as we cannot download such files locally?

And just looking at your config, It sounds like the map tiles are not being re-rendered immediately after calling setView. This might be due to the rendering cycle of the map not being triggered properly. A possible workaround is to manually trigger a redraw after setting the view. Here's how you can do it:

Code: Select all

chart.mapView.setView(props.mapView.center, props.mapView.zoom, true, true);
chart.redraw();

If the above doesn't resolve the issue, you could try forcing a reflow of the chart container. This can sometimes help in ensuring that the tiles are reloaded:

Code: Select all

chart.mapView.setView(props.mapView.center, props.mapView.zoom, true, true);
chart.reflow();

Let me know if this helps or if you need further assistance!

Kind regards,

[senti]

Thank you for your reply.

Applying reflow and redraw did not fix the issue.

I have uploaded a video here:

https://imagekit.io/tools/asset-public- ... tQ__%22%7D

[andrzej.b]

Hi,

Thanks for the video. It seems that it is a bug, so I have created a GitHub issue for it. You can watch this issue in the link below and track any information and workarounds for this one: https://github.com/highcharts/highcharts/issues/22501

Kind regards,

[senti]

Thank you. Then I will do just that.

[andrzej.b]

Hi,

After internal discussion we found a fix, you need to set redrawTiles to true after the setView:

Code: Select all

function updateMapView() {
  if (
    chart.value &&
    (chart.value.chart.mapView.center != props.mapView.center ||
      props.mapView.zoom != props.mapView.zoom)
  ) {
    chart.value.chart.mapView.setView(
      props.mapView.center,
      props.mapView.zoom,
      true,
      true,
    );
    chart.value.chart.series[0].redrawTiles = true;
  }
}

If there are any glitches, please let me know.

Kind regards,

[Nehakumari]

Hi, I’m also facing a similar issue with map tiles not reloading after setView. Can you explain how redrawTiles = true works to solve this? Does it ensure immediate tile reloading, or are there any limitations?

[andrzej.b]

Hi @Nehakumari,

Can you add your comments on GitHub? We work as a single team, and we want to keep the discussion about bugs and workarounds under relevant tickets on GH - it benefits everyone involved - you get better and faster support, devs get more context, and it helps to prioritize the tickets.
Thanks for understanding.

If anything else pops up, please let us know.

Kind regards,