Make the map fully responsive

[qvsoft]

It will be great if jVectormap support responsive feature for mobile device, with both full map display or crop area(setFocus initial). Now we can use setSize() to when screen resize trigger, but if we setFocus when map load, the crop area go wrong.

[Oldenborg]

Are there any plans to implement this feature? @bjornd

[bjornd]

To fix this you just need to call call setFocus after set size not on map load. So it not a major issue, but it will be fixed for sure anyway.

[Oldenborg]

Actually it turns out if you use bootstrap 4 and you put the map element within a col with overflow hidden it auto resizes.. I have no idea why this happens, I stumbled upon it while debugging some other css on the parent element

[nicolagordon]

Tried your suggestion @bjornd - I used onRegionClick to call setFocus and cause map to be responsive - it didn't work for me - when I make my browser window smaller (or view via my mobile device) I see a map with horizontal scroll bar rather than a resized map - can you advise?

My html page contains the following:

<script type="application/javascript" src="http://<URL+PATH>/zoomtravels-worldmap.js"></script>
  <div id="map1" style="width: 570px; height: 300px"></div>

And zoomtravels-worldmap.js looks like this:

 $(function(){
      var mymap = new jvm.Map({
        container: $('#map1'),
...
    onRegionClick: function(event, code) {
      document.getElementById('map1').focus();
    },
      });
    });

Also, can you advise on appropriate way to call setFocus after set size (call via onRegionClick was just to see how it would work). Any input would be appreciated - thanks!