fix: #1018 - vector map not working

src/pages/_data/libs.json

@@ -16,10 +16,7 @@
     "litepicker": "litepicker/dist/litepicker.js",
     "tom-select": "tom-select/dist/js/tom-select.base.min.js",
     "jsvectormap": "jsvectormap/dist/js/jsvectormap.min.js",
-    "jsvectormap-world": "jsvectormap/dist/maps/world.js",
-    "jsvectormap-usa": "jsvectormap/dist/maps/us-merc-en.js",
-    "jsvectormap-canada": "jsvectormap/dist/maps/canada.js",
-    "jsvectormap-russia": "jsvectormap/dist/maps/russia.js"
+    "jsvectormap-world": "jsvectormap/dist/maps/world-merc.js"
   },
   "css": {
     "mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css"

src/pages/_data/maps-vector.yml

 world:
   title: World map
-  map: world
+  map: world_merc
   color: blue
   values: '{ "AF": 16, "AL": 11, "DZ": 158, "AO": 85, "AG": 1, "AR": 351, "AM": 8, "AU": 1219, "AT": 366, "AZ": 52, "BS": 7, "BH": 21, "BD": 105, "BB": 3, "BY": 52, "BE": 461, "BZ": 1, "BJ": 6, "BT": 1, "BO": 19, "BA": 16, "BW": 12, "BR": 2023, "BN": 11, "BG": 44, "BF": 8, "BI": 1, "KH": 11, "CM": 21, "CA": 1563, "CV": 1, "CF": 2, "TD": 7, "CL": 199, "CN": 5745, "CO": 283, "KM": 0, "CD": 12, "CG": 11, "CR": 35, "CI": 22, "HR": 59, "CY": 22, "CZ": 195, "DK": 304, "DJ": 1, "DM": 0, "DO": 50, "EC": 61, "EG": 216, "SV": 21, "GQ": 14, "ER": 2, "EE": 19, "ET": 30, "FJ": 3, "FI": 231, "FR": 2555, "GA": 12, "GM": 1, "GE": 11, "DE": 3305, "GH": 18, "GR": 305, "GD": 0, "GT": 40, "GN": 4, "GW": 0, "GY": 2, "HT": 6, "HN": 15, "HK": 226, "HU": 132, "IS": 12, "IN": 1430, "ID": 695, "IR": 337, "IQ": 84, "IE": 204, "IL": 201, "IT": 2036, "JM": 13, "JP": 5390, "JO": 27, "KZ": 129, "KE": 32, "KI": 0, "KR": 986, "KW": 117, "KG": 4, "LA": 6, "LV": 23, "LB": 39, "LS": 1, "LR": 0, "LY": 77, "LT": 35, "LU": 52, "MK": 9, "MG": 8, "MW": 5, "MY": 218, "MV": 1, "ML": 9, "MT": 7, "MR": 3, "MU": 9, "MX": 1004, "MD": 5, "MN": 5, "ME": 3, "MA": 91, "MZ": 10, "MM": 35, "NA": 11, "NP": 15, "NL": 770, "NZ": 138, "NI": 6, "NE": 5, "NG": 206, "NO": 413, "OM": 53, "PK": 174, "PA": 27, "PG": 8, "PY": 17, "PE": 153, "PH": 189, "PL": 438, "PT": 223, "QA": 126, "RO": 158, "RU": 1476, "RW": 5, "WS": 0, "ST": 0, "SA": 434, "SN": 12, "RS": 38, "SC": 0, "SL": 1, "SG": 217, "SK": 86, "SI": 46, "SB": 0, "ZA": 354, "ES": 1374, "LK": 48, "KN": 0, "LC": 1, "VC": 0, "SD": 65, "SR": 3, "SZ": 3, "SE": 444, "CH": 522, "SY": 59, "TW": 426, "TJ": 5, "TZ": 22, "TH": 312, "TL": 0, "TG": 3, "TO": 0, "TT": 21, "TN": 43, "TR": 729, "TM": 0, "UG": 17, "UA": 136, "AE": 239, "GB": 2258, "US": 4624, "UY": 40, "UZ": 37, "VU": 0, "VE": 285, "VN": 101, "YE": 30, "ZM": 15, "ZW": 5 }'
 
-canada:
-  title: Map of Canada
-  map: canada
-  zoom: true
-  filled: true
-  color: green
 
-russia:
-  title: Map of russia
-  map: russia
-  color: green
-  filled: true
+world-markers:
+  title: Map with markers
+  map: world_merc
+  color: red
   markers:
-    - name: Moscow
-      coords: 55.75, 37.61
-    - name: St Petersburg
-      coords: 59.93, 30.30
-    - name: Novosibirsk
-      coords: 55.01, 82.93
-    - name: Vladivostok
-      coords: 43.10, 131.87
+    - name: Russia
+      coords: 61.524, 105.3188
+    - name: Canada
+      coords: 56.1304, -106.3468
+    - name: Greenland
+      coords: 71.7069, -42.6043
+    - name: Egypt
+      coords: 26.8206, 30.8025
+    - name: Brazil
+      coords: -14.235, -51.9253
+    - name: China
+      coords: 35.8617, 104.1954
+    - name: United States
+      coords: 37.0902, -95.7129
+    - name: Norway
+      coords: 60.472024, 8.468946
+    - name: Ukraine
+      coords: 48.379433, 31.16558
 
-usa:
-  title: Map of USA
-  map: us_merc_en
-  color: red
-  filled: true
+
+world-lines:
+  title: Map with markers
+  map: world_merc
+  color: blue
+  lines:
+    - from: Russia
+      to: Greenland
+    - from: Russia
+      to: United States
+    - from: Russia
+      to: Canada
+    - from: Brazil
+      to: Norway
+    - from: Brazil
+      to: Ukraine
+    - from: Brazil
+      to: Egypt
+    - from: Brazil
+      to: China
   markers:
-    - name: San Francisco
-      coords: 37.77, -122.41
-    - name: New York
-      coords: 40.71, -74.00
-    - name: Kansas City
-      coords: 39.09, -94.57
-    - name: Las Vegas
-      coords: 36.16, -115.13
-    - name: Dallas
-      coords: 32.77, -96.79
+    - name: Russia
+      coords: 61.524, 105.3188
+    - name: Canada
+      coords: 56.1304, -106.3468
+    - name: Greenland
+      coords: 71.7069, -42.6043
+    - name: Egypt
+      coords: 26.8206, 30.8025
+    - name: Brazil
+      coords: -14.235, -51.9253
+    - name: China
+      coords: 35.8617, 104.1954
+    - name: United States
+      coords: 37.0902, -95.7129
+    - name: Norway
+      coords: 60.472024, 8.468946
+    - name: Ukraine
+      coords: 48.379433, 31.16558

src/pages/_includes/ui/map-vector.html

@@ -3,7 +3,7 @@
 {% assign color = include.color | default: data.color | default: 'green' %}
 
 {% if data %}
-	<div class="ratio ratio-21x9">
+	<div class="ratio ratio-4x3">
 		<div>
 			<div id="map-{{ id }}" class="w-100 h-100"></div>
 		</div>
@@ -52,7 +52,7 @@
 				],
 				markerStyle: {
 					initial: {
-						r: 3,
+						r: 4,
 						stroke: '#fff',
 						opacity: 1,
 						strokeWidth: 3,
@@ -77,6 +77,22 @@
 					},
 				},
 				{% endif %}
+				{% if data.lines %}
+				lines: [
+					{% for line in data.lines %}
+					{
+						from: "{{ line.from }}",
+						to: "{{ line.to }}"
+					},
+					{% endfor %}
+				],
+				lineStyle: {
+					strokeDasharray:"4 4",
+					animation: true,
+					stroke: "rgba(98, 105, 118, .75)",
+					strokeWidth: .5,
+				},
+				{% endif %}
 			});
 
 			window.addEventListener("resize", () => {

src/pages/maps-vector.html

@@ -2,7 +2,7 @@
 title: Vector Maps
 page-header: Vector Maps
 menu: base.maps-vector
-libs: jsvectormap, jsvectormap-world, jsvectormap-usa, jsvectormap-canada, jsvectormap-russia
+libs: jsvectormap, jsvectormap-world
 ---
 
 <div class="row row-cards">
@@ -10,23 +10,23 @@ libs: jsvectormap, jsvectormap-world, jsvectormap-usa, jsvectormap-canada, jsvec
 		<div class="card">
 			<div class="card-body">
 				<h3 class="card-title">World map</h3>
-				{% include ui/map-vector.html map-id="world" height=18 %}
+				{% include ui/map-vector.html map-id="world" %}
 			</div>
 		</div>
 	</div>
 	<div class="col-md-6">
 		<div class="card">
 			<div class="card-body">
-				<h3 class="card-title">Map of Russia</h3>
-				{% include ui/map-vector.html map-id="russia" height=18 %}
+				<h3 class="card-title">Map with markers</h3>
+				{% include ui/map-vector.html map-id="world-markers" %}
 			</div>
 		</div>
 	</div>
 	<div class="col-md-6">
 		<div class="card">
 			<div class="card-body">
-				<h3 class="card-title">Map od USA</h3>
-				{% include ui/map-vector.html map-id="usa" height=18 %}
+				<h3 class="card-title">Map with markers and lines</h3>
+				{% include ui/map-vector.html map-id="world-lines" %}
 			</div>
 		</div>
 	</div>