Map not showing using vanilla JavaScript

3omdawy commented 2 weeks ago

Hello :) Thanks for this great plugin.

I am using HTML and JS, and my HTML page is as simple as this:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Test Maps</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsvectormap/dist/css/jsvectormap.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/jsvectormap"></script>
    <script src="https://cdn.jsdelivr.net/npm/jsvectormap/dist/maps/world.js"></script>
</head>

<body>
    <div id="map" style="width: 600px; height: 350px"></div>

    <script>
        var map = new jsVectorMap({
            selector: "#map",
            map: "world",
        });
    </script>
</body>

</html>

There are no errors on the console but the map div is totally blank ![Uploading Screenshot 2024-06-27 172008.jpg…]()

themustafaomar commented 2 weeks ago

Hi @3omdawy

I gave this example a try in my machine and it works perfectly fine, and works on codepen.io as well.

https://codepen.io/themustafaomar/pen/MWdRxdB

BTW, screenshot provided doesn't seem to work.

3omdawy commented 2 weeks ago

Thanks Mustafa :) I know the issue now. JS was blocked due to hosting. Cloudflare has an option called Rocket Loader™ when I disabled it everything worked fine

3omdawy commented 2 weeks ago

Another solution: defer the setting of map till the page is interactive:

        document.addEventListener('readystatechange', event => {
            if (event.target.readyState === "interactive") { //or at "complete" if you want it to execute in the most last state of window.
                var map = new jsVectorMap({
                    selector: "#map",
                    map: "world",
                });
            }
        });

themustafaomar / jsvectormap

Map not showing using vanilla JavaScript #158