put fullscreen map into the center

[mxhryvo]

Hello, thanks for this wonderful plugin.

I have successfully managed to get my map into fullscreen mode, but now it doesnt stay in the center anymore (With "display: flex")

Here is the fiddle: https://jsfiddle.net/mxhryvo/sdfpp35o/

would be awesome if you could help me with that.

[neveldo]

Hello,

Thanks, I'm glad you appreciate Mapael ! It seems that the .map container is 100% width, you should set a smaller width and a margin:auto; to the div in order to center it.

Otherwise, you can try (see https://stackoverflow.com/questions/8639383/how-do-i-center-an-svg-in-a-div) :

.map svg{
    display: block;
    margin: auto;
}

But it don't seems to work, I don't know why ;(

[mxhryvo]

yeah it puts the map in the centre, but If you zoom in then you can see its not quite fullscreen because it is staying in its borders: https://jsfiddle.net/sdfpp35o/4/

So the map gets cut of on higher zoom levels. I havent found out how to get a map in the center with having true fullscreen mode, like google maps or every other map.

[neveldo]

Hello,

It seems to worker better when removing

          align-items: center;
          display: flex;

from .mapcontainer CSS

[mxhryvo]

hmm thats not working https://jsfiddle.net/sdfpp35o/8/

When I put 50% width, its in the center but it gets cut off. And with 100% width, its fullscreen but not in the center.

[neveldo]

Hello,

The issue seems to come from the code within $(window).on('resize', function() {...} , to re-compute SVG size on window resize. The SVG seems to get bad value for its width. Where does this algorithm come from ?

[Indigo744]

@mxhryvo do you still need help or did you resolve your issue?

[carlitoselmago]

This issue persists, any solution to it or at least any solid workaround?