Search code examples
javascriptjqueryhtmlcssjvectormap

JVectorMap Set Scale Below 1

I am creating a web page which requires a full size map, for which I am using JVectorMap. The map has a width and height of 100%. However, this makes the map extend right to the very edges of the page when fully zoomed out, which is undesirable. Ideally, there would be a border around the map when fully zoomed out, but when zoomed in the map would still extend to the edge of the page. Essentially, I want to begin with the map more zoomed out than seems to be allowed.

In this case, HTML borders and padding cannot be used, as although they do create the desired effect on page load, the border persists when the map is zoomed in. The only idea I had was to attempt to set the 'scale' variable near the end of the following code to a value below zero:

<script>
    $(function(){
        $('#map').vectorMap({
            map: 'world_mill',
            focusOn: {
                x: 0.5,
                y: 0.5,
                scale: 0.8
            }
        });
    });
</script>

This had no effect, as any value for 'scale' below 1 seems to be ignored. I have included screenshots below to illustrate the problem.

Current Page (Map extends to edge) Current Page (Map extends to edge)

Ideal Page (Map has border Ideal Page (Map has border)

Any help would be much appreciated!

Solution

  • I'm going to post the answer to my own question, just in case anyone stumbles upon this in the future. It seems that setScale can only set the zoom to values between the zoomMin and zoomMax parameters, therefore by lowering zoomMin to 0.9 I was able to successfully use setScale to reduce the zoom to 0.9 also.

    Therefore the final code I ended up with was:

    $(function(){
    $('#map').vectorMap({
        map: 'world_mill',
        zoomMin: 0.9,
        focusOn: {
            x: 0.5,
            y: 0.5,
            scale: 0.9
        },
    });
});