jsVectorMap is rendering too small and destroys the layout

Question

I found a problem I can't solve by myself. I just want to render a jsvectormap, so the odd thing is when it renders it is way too small.

In addition to that there is a big black block in the site itself. Also when I scroll the site to 200% and then backwards it is then on normal size. And what is also very odd I completely copied it from another blade from my project.

It looked like the problem from this post: jVectorMap renders too small but I found no solution with the hints from there.

I am very close to just cancel the vectormap and I have no problem with that but I am now very eager to just solve that problem!

I would very appreciate some hints because I didn't find the right solution. Thank you very much in advance

I tried:

Using .updateSize(); change the actual size of the map but only if I use that many times, like in a for. The black block is even there.
Other JQuery functions afterwards like .width() .height() .css()m - nothing worked
Copied the code 1:1 from another blade so I don't think it is because of css
I tried every solution from this post: jVectorMap renders too small

My code:

<script src="{{ asset('js/plugins/jvectormap/dist/jquery-jvectormap.min.js') }}">            </script>
<script src="{{ asset('js/plugins/jvectormap/maps/jquery-jvectormap-world-mill-en.js') }}">  </script>
<script src="{{ asset('js/jquery_vector_map.js') }}"></script>
<link rel="stylesheet" href="{{ 'js/plugins/jvectormap/dist/jquery-jvectormap.css' }}">

<!-- World Map -->
<div class="col-xl-12 js-appear-enabled animated fadeIn" data-toggle="appear" data-timeout="800">
    <div class="block block-rounded block-bordered">
        <div class="block-header block-header-default">
            <h3 class="block-title">Studies - <small> {{ date("F", strtotime("this month")) }} </small> </h3>
            <div class="block-options">
                <button type="button" class="btn-block-option">
                    <i class="si si-settings"></i>
                </button>
            </div>
        </div>
        <div class="block-content block-content-full">
            <!-- World Map Container -->
            <div  id="world-map-studies"  class="js-vector-map-world" style="height: 500px;"></div>
        </div>
    </div>
</div>
<!-- END World Map -->

score 1 · Answer 1 · answered Apr 06 '19 at 15:09

1

Interesting, I am using it very similar way and in my case it renders correctly. Which browser have you tried? Aren't you trying from a device with Retina display or some huge resolution?

You can try my implementation, if this renders ok for you: https://sevenhillsaway.com/map/

I know I was fighting with it as well. If I remember setting the height also helped me.... Maybe some other Divs are influencing it in the design?

answered Apr 06 '19 at 15:09

Dominik Franek

341
3
5

Thanks for the help, but I checked all div's. I just copied everything where it works properly. I also have no retina display nor a huge resolution. I tried Chrome, Opera, Firefox and Edge. All the same. – Taranis Apr 08 '19 at 09:50
and the page I linked, you can see the map properly? Because if so, check also the version of jquery. Or do you have it online running somewhere so I can take a look? – Dominik Franek Apr 09 '19 at 15:01

jsVectorMap is rendering too small and destroys the layout

1 Answers1