javascriptdatamaps

How can I make DataMaps display in browser?

I'm trying to embed a DataMap (datamaps.github.io) in my website with Bootstrap and am trying to use the following code as test code.

from http://plnkr.co/edit/W9SbVTm0ovffh5i7ahid?p=preview:

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js">
</script>
<script src="http://datamaps.github.io/scripts/0.4.0/datamaps.world.min.js">
</script>


<script>

    $(document).ready(function () {
        $("#myTab li:eq(0) a").tab('show');
    });

</script>

<body>
<nav>
    <ul class="nav nav-pills center-pills" role="tablist" id="myTab">
        <li><a data-toggle="pill" href="#sectionA">Section A</a></li>
        <li><a data-toggle="pill" href="#sectionB">Section B</a></li>
    </ul>
</nav>

<div class="container">

    <!--<div id="map"></div>-->
    <section>
        <div class="tab-content">
            <div id="sectionA" class="tab-pane fade">
                <H2>sectionA</H2>
                <!-- the map will appear here -->
                <div id="map"></div>

            </div>
            <div id="sectionB" class="tab-pane fade">
                <H2>sectionB</H2>
                <div id="map2"></div>

            </div>
        </div>
    </section>


    <script>
        $('a[data-toggle="pill"]').on('shown.bs.tab', function (e) {
            console.log(e);
            if (e.target.href.indexOf('sectionA') > -1) {
                console.log("Should Show Map!!");
            }
        });

        var map = new Datamap({
            element: document.getElementById('map'),
            height: 500, width: 500
        });
        var map = new Datamap({
            element: document.getElementById('map2'), fills: {defaultFill: "fa0af0"},
            height: 500, width: 500
        });
    </script>

</div>
</body>
</html>

However, this doesn't work and I can get the html code to work offline in a browser, but not on my Github Pages site even with identical code. Online, I just get a blank page. I've seen on other StackOverflow answers that the size of the map must be specified for it to work with Bootstrap, but here it is specified and still doesn't display.

Am I missing some script import? Or what are some other possible issues?

Any help greatly appreciated!

Solution

  • You have some tasks that need to be done:

    Hope this helps!