I am trying to test my jvectormap locally. Previously I was just accessing the HTML file directly through the browser. I recently switched to using an HTTP server to serve the files, but now the map displays with a very small height. The strange thing is, if I resize the browser (bigger or smaller) the map gets larger and larger (doesn't seem to stop expanding). The map when it's initially rendered has a height of 54px.
Setting the height CSS attribute for the div I defined to contain the map, as well as the .jvectormap-container div, does not help. It it increases the background size, but not the size of the actual map. It is the height in the <svg> tag that is actually causing me this issue.
When I access the site again via the file directly, it renders fine. When I do "view source" and access all the files through the HTTP server, they also look fine too. There are no errors in the JS console. I get the same issue on multiple browsers.
Here is my body html:
<body>
<div id="world-map" style="position: absolute; top: 0; right: 0; bottom: 0; left: 0;"></div>
<script src="main.js"></script>
</body>
And main.js contains
var mapDiv = $('#world-map');
mapDiv.vectorMap();
The problem was that the HTTP server was responding with the incorrect MIME for the JS file.
It would be interesting to know why this would cause this particular problem.