JSvectormap 1.3.2 responsive worldmap

Based on: https://github.com/themustafaomar/jsvectormap/issues/7#issuecomment-657210744

by katalin_2003

HTML

<script src="https://unpkg.com/[email protected]/dist/js/jsvectormap.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/maps/world.js"></script>
<div id="map"></div>

CSS

body {
  font-family: sans-serif;
  background-color: #f8f9fa;
  overflow: hidden;
}

#map {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

JavaScript

/*function $(selector) {
  return document.querySelector(selector)
}*/

var markers = [{
    name: "Romania",
    coords: [44.9367, 26.0129]
  },
  {
    name: "Russia",
    coords: [61.524, 105.3188]
  },
  {
    name: "Canada",
    coords: [56.1304, -106.3468]
  },
  {
    name: "Greenland",
    coords: [71.7069, -42.6043]
  },
  {
    name: "Brazil",
    coords: [-14.235, -51.9253]
  }
];

var jsvmap = new jsVectorMap({
  map: "world",
  selector: "#map",
  draggable: true,
  zoomButtons: true,
  zoomOnScroll: true,
  bindTouchEvents: true,
  zoomOnScrollSpeed: 1,
  zoomMax: 18,
  zoomMin: 1,

  labels: {
    markers: {
      render: function(index) {
        return index.name;
      }
    }
  },

  regionsSelectable: true,
  regionSelectableOne: true,
  markersSelectable: true,
  selectedMarkers: markers.map((marker, index) => {
    var name = marker.name;

    if (name === "Brazil" || name === "Russia") {
      return index;
    }
  }),
  markers: markers,
  markerStyle: {
    initial: {
      fill: "#5c5cff"
    },
    selected: {
      fill: "#ff5050"
    }
  },
  markerLabelStyle: {
    initial: {
      fontFamily: "Roboto",
      fontWeight: 400,
      fontSize: 13
    }
  },
  onRegionSelected: function(index, isSelected, selectedRegions) {
    console.log(index, isSelected, selectedRegions);
  },
  onViewportChange: function(data) {
    // console.log(data);
  }
});

// window on resize
var resizeMapTimer;
window.addEventListener('resize', function(e) {
  clearTimeout(resizeMapTimer);
  resizeMapTimer = setTimeout(function() {
    // Using built-in DOM manipulation class for jsvectormap to set css properties.
    jsvmap.container.css({
      width: window.innerWidth + 'px',
      height: window.innerHeight + 'px'
    })
    jsvmap.updateSize();
  }, 10);
});

//jsvmap.updateSize();