I am in the process of developing a website that includes a full-size map using JVectorMap. The map currently occupies 100% of the width and height of the page, but I would like to add a border around it when fully zoomed out. However, when the map is zoomed in, I still want it to extend to the edge of the page. In essence, I need the initial view of the map to be more zoomed out than the default setting.
Unfortunately, traditional HTML borders and padding won't work for this scenario because they maintain the border even when the map is zoomed in. The only solution I could think of was adjusting the 'scale' variable in the code snippet below to a value less than zero:
<script>
$(function(){
$('#map').vectorMap({
map: 'world_mill',
focusOn: {
x: 0.5,
y: 0.5,
scale: 0.8
}
});
});
</script>
However, changing the 'scale' value to anything below 1 didn't have any effect as it appeared to be disregarded. To better illustrate the issue, I've attached screenshots below.
Current Page (Full-Size Map) https://i.sstatic.net/lhgTl.png
Desired Page (Map with Border) https://i.sstatic.net/QaV1w.png
Any assistance on how to achieve this desired outcome would be greatly appreciated!