world-map/map.html at main · framethespace/world-map · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<div>

    <link
      rel="stylesheet"
      href="https://unpkg.com/jsvectormap/dist/jsvectormap.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap"
      rel="stylesheet"
    />
    <div id="map"></div>

    <script src="https://unpkg.com/jsvectormap"></script>
    <script src="https://unpkg.com/jsvectormap/dist/maps/world-merc.js"></script>

    <script>
      var markers = [
        { name: "Egypt", coords: [26.8206, 30.8025] },
        { 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 jvm = new jsVectorMap({
        map: "world_merc",
        selector: "#map",
        zoomButtons: true,
        zoomOnScroll: true,

        regionStyle: {
          initial: {
            fill: "#d1d5db"
          }
        },

        labels: {
          markers: {
            render: (marker) => marker.name
          }
        },

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

          if (name === "Russia" || name === "Brazil") {
            return index;
          }
        }),
        markers: markers,
        markerStyle: {
          initial: { fill: "#5c5cff" },
          selected: { fill: "#ff5050" }
        },
        markerLabelStyle: {
          initial: {
            fontFamily: "Roboto",
            fontWeight: 400,
            fontSize: 13
          }
        }
      });
    </script>

</div>