Zoom-to-bounding-box after map resize with responsive layout not working properly

[Bojan-Lukic]

Here's more less how I did it: https://jsfiddle.net/wunderbart/Lom3b0gb/ There's not much comments explaining the code yet and the structure is taken out from larger app so it can be a bit overkill. I'll be happy to answer any questions. Enjoy!

I am currently using an edited version of your implementation, @WunderBart. Unfortunately, I am having similar issues as described in @lukpueh's response:

@mg1075's tip conflicts with Datamap.prototype.resize() (used for responsiveness), because resize sets the CSS transform property and @mg1075 the SVG transform attribute. If both are set one of them is ignored. Below works with responsive=True. But I would rather change the resize method to use the SVG transform attribute instead. [...] Cheers!

The backstory is that I was looking for a static solution to display a world map with visited places on my website. I found this implementation and forked the repo here. Zoom was missing in that implementation, but @WunderBart's solution complements it perfectly. The only issue, as mentioned above, is zoom behavior with responsive=True and map.resize();. I edited @WunderBart's JSFiddle for a MWE showcasing the issue here: https://jsfiddle.net/k1bpsyqr/8/ (rerun the code once). Already, on initial display, zoom only works to some extent (does not zoom in all directions). The map does change size dynamically on window resize. However, after the first resize, zoom does not work at all anymore. You can try the implementation from my forked repo as well, with a full example and proper functionality (JSFiddle is a little too fiddly for this example).

I assume that the initial zoom state, or rather some width/height parameter, needs to be reset after using map.resize();. How exactly would this look like, though? Could you please help me with this?

Originally posted by @Bojan-Lukic in https://github.com/markmarkoh/datamaps/issues/122#issuecomment-2575615782

[Bojan-Lukic]

For anyone looking for a quick fix to the issue: I replaced

window.addEventListener('resize', function() {
    map.resize(); 
});

with

window.addEventListener('resize', function() {
    $('#container').empty();
    new Datamap(); 
}); 

This clears the container which contains the map and creates a new Datamap instance in that container for every resize event.

This implementation is not ideal and a resize solution is probably preferred. So far, I have not found such a solution though. Also, the bubbles do not update size upon window resize. I think this has to do with this.instance.bubbles(CITIES); being used outside of the instantiated Datamaps object. Help is highly appreciated.