[Edit, found the issue...]
(I know, why IE8, and jquery 1.12.4...I have to support it for a while yet)
I want to display a US map at 400px wide with a few points on it. Using the latest Mapael (2.0.0) examples I modified the code below from the samples folder. In FF, Chrome and IE 9+ it works well. In IE8, which I need to support, the map is normal size and clipped. It seems like the automatic resize doesn't work. You can test this by using the code below and set the emulation to IE8.
Am I missing something?
Code...
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" charset="utf-8"></script>
<!-- Doesn't work with IE8 -->
//src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.0/raphael-min.js"
<!-- Doesn't work with IE8 -->
<!-- The correct one for IE8 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js" charset="utf-8"></script>
<!-- The correct one for IE8 -->
<script src="https://rawgit.com/neveldo/jQuery-Mapael/2.0.0/js/jquery.mapael.min.js" charset="utf-8"></script>
<script src="https://rawgit.com/neveldo/jQuery-Mapael/2.0.0/js/maps/usa_states.js" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
$(".mapcontainer").mapael({
map: {name: "usa_states"},
plots: {
'ny': {
latitude: 42.9538,
longitude: -75.5268,
tooltip: {content: "New York"},
value: [50]
}
}
});
});
</script>
</head>
<body>
<div class="container" style="width:400px;">
<div class="mapcontainer">
<div class="map">
</div>
</div>
</div>
</body>
</html>
The issue was I was using the new Raphael JS library. I needed to use an older one.
Doesn't work with IE8: src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.0/raphael-min.js"
The correct one for IE8: src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"