Untitled

<!DOCTYPE html>
<html>
<head>
  <title>BattleMap</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="src/jquery-jvectormap-2.0.3.css" type="text/css" media="screen" />
  <script src="src/jquery.js"></script>
  <script src="src/jquery-jvectormap.js"></script>
  <script src="src/jquery-jvectormap-world-mill.js"></script>
</head>
<body>
  <div id="world-map" style="width: 1200px; height: 800px"></div>
  <script type="module">
    import markers from './battles.js'
    $(function () {
      $('#world-map').vectorMap({
        map: 'world_mill',
        markers,
        onMarkerClick: function (event, index) {
          alert(`
            ${markers[index].name}\n
            ${markers[index].date}\n
            ${markers[index].abstract}\n
            ${markers[index].weburl}\n
            `
          )
        }
      })
    })
  </script>
</body>
</html>