How can I make DataMaps display in browser?
Question
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!
1 answers
solution1
1 ACCPTED 2018-01-05 16:39:22
You have some tasks that need to be done:
Remove this line:
<script src="/datamaps.world.min.js"></script>Change from
httptohttpsthe urls of your assets.
Hope this helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.