jqvmap plugin, ui fixes

pages/_data/libs.json

@@ -1,9 +1,19 @@
-[
-  "jquery/dist/jquery.min.js",
-  "bootstrap/dist/js/bootstrap.bundle.min.js",
-  "autosize/dist/autosize.min.js",
-  "imask/dist/imask.min.js",
-  "selectize/dist/js/standalone/selectize.min.js",
-  "apexcharts/dist/apexcharts.min.js",
-  "peity/jquery.peity.min.js"
-]
+{
+  "js": [
+    "jquery/dist/jquery.min.js",
+    "bootstrap/dist/js/bootstrap.bundle.min.js",
+    "autosize/dist/autosize.min.js",
+    "imask/dist/imask.min.js",
+
+    "selectize/dist/js/standalone/selectize.min.js",
+    "apexcharts/dist/apexcharts.min.js",
+    "jqvmap/dist/jquery.vmap.min.js",
+    "jqvmap/dist/maps/jquery.vmap.world.js",
+    "jqvmap/dist/maps/jquery.vmap.usa.js",
+    "jqvmap/dist/maps/continents/jquery.vmap.europe.js",
+    "peity/jquery.peity.min.js"
+  ],
+  "css": [
+    "jqvmap/dist/jqvmap.min.css"
+  ]
+}

pages/_data/maps.yml

@@ -1,23 +1,12 @@
 world:
-  map: "world_en"
-  backgroundColor: 'transparent'
-  borderColor: '#ffffff'
-  borderWidth: 0.25
-  borderOpacity: 0.25
-  color: 'rgba(120,130,140, 0.1)'
-  enableZoom: false
-  showTooltip: true
-  selectedColor: null
-  hoverColor: 'red'
+  title: World map
+  map: world_en
 
-france:
-  map: 'france_fr'
-  backgroundColor: 'transparent'
-  borderColor: '#ffffff'
-  borderWidth: 0.25
-  borderOpacity: 0.25
-  color: 'rgba(120,130,140, 0.1)'
-  enableZoom: false
-  showTooltip: true
-  selectedColor: null
-  hoverColor: null
+europe:
+  title: Map of Europe
+  map: europe_en
+  zoom: true
+
+usa:
+  title: Map of USA
+  map: usa_en

pages/_includes/js/maps.html

@@ -1,20 +1,9 @@
 <script>
 	$(document).ready(function () {
-		$(`#{{ include.id }}`).each(function () {
-			$(this).vectorMap(
-				{
-					map: `{{ include.data[1].map }}`,
-					backgroundColor: `{{ include.data[1].backgroundColor }}`,
-					borderColor: `{{ include.data[1].borderColor }}`,
-					borderWidth: `{{ include.data[1].borderWidth }}`,
-					borderOpacity: `{{ include.data[1].borderOpacity }}`,
-					color: `{{ include.data[1].color}}`,
-					enableZoom: `{{ include.data[1].enableZoom}}`,
-					showTooltip: `{{ include.data[1].showTooltip}}`,
-					selectedColor: `{{ include.data[1].selectedColor}}`,
-					hoverColor: `{{ include.data[1].hoverColor}}`
-				}
-			);
+		$('#{{ include.id }}').each(function () {
+			$(this).vectorMap({
+				map: '{{ include.data[1].map }}'
+			});
 		});
 	})
-</script>
+</script>

pages/_includes/layout/css.html

@@ -1,3 +1,13 @@
+{% if site.data.libs %}
+<!-- Libs CSS -->
+{% for lib in site.data.libs.css %}
+<link href="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{{ lib }}?{{ site.time | date: '%s' }}" rel="stylesheet" />
+{% endfor %}
+{% endif %}
+
+<!-- Tabler Core -->
 <link href="{{ site.base }}/dist/css/tabler.css?{{ site.time | date: '%s' }}" rel="stylesheet" />
+
+<!-- Tabler Plugins -->
 <link href="{{ site.base }}/dist/css/tabler-flags.css?{{ site.time | date: '%s' }}" rel="stylesheet" />
 <link href="{{ site.base }}/dist/css/tabler-charts.css?{{ site.time | date: '%s' }}" rel="stylesheet" />

pages/_includes/layout/js.html

@@ -4,15 +4,15 @@
 	};
 </script>
 
-<!-- Libs JS -->
-{% for lib in site.data.libs %}
-<script src="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{{ lib }}?{{ site.time | date: '%s' }}"></script>
-{% endfor %}
+{% if site.data.libs %}
+   <!-- Libs JS -->
+   {% for lib in site.data.libs.js %}
+   <script src="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{{ lib }}?{{ site.time | date: '%s' }}"></script>
+   {% endfor %}
+{% endif %}
 
 <!-- Tabler Core -->
 <script src="{{ site.base }}/dist/js/tabler{% if jekyll.environment == 'production' %}.min{% endif %}.js?{{ site.time | date: '%s' }}"></script>
 
 <!-- Tabler Plugins -->
 <script src="{{ site.base }}/dist/js/tabler-charts{% if jekyll.environment == 'production' %}.min{% endif %}.js?{{ site.time | date: '%s' }}"></script>
-
-

pages/_includes/ui/map.html

@@ -0,0 +1,18 @@
+{% assign id = include.map %}
+{% assign height = include.height | default: 20 %}
+{% assign data = site.data.maps[id] %}
+
+{% if data %}
+<div id="map-{{ id }}" style="height: {{ height }}rem"></div>
+<script>
+	$(document).ready(function () {
+		$('#map-{{ id }}').vectorMap({
+			map: '{{ data.map }}',
+			backgroundColor: 'transparent',
+			color: 'rgba(120, 130, 140, .1)',
+		  borderColor: 'transparent'
+			{% if data.zoom %}enableZoom: true,{% endif %}
+		});
+	});
+</script>
+{% endif %}

pages/_layouts/base.html

@@ -26,9 +26,11 @@
    <meta name="description" content="{{ page.description | escape }}"/>
    {% endif %}
 
-   {% include layout/css.html %}
    {% include layout/og.html %}
 
+   {% include layout/css.html %}
+   {% include layout/js.html %}
+
    <style>body { display: none; }</style>
 </head>
 <body
@@ -42,7 +44,6 @@
 {% endif %}
 {% endif %}
 
-{% include layout/js.html %}
 <script>document.body.style.display = 'block';</script>
 </body>
 </html>

pages/maps.html

@@ -3,13 +3,16 @@ title: Maps
 page-title: Maps
 ---
 
+<div class="row">
+   {% for map in site.data.maps %}
+   <div class="col-lg-6">
 
-{% for map in site.data.maps %}
-{% assign title = map[0] %}
-{% assign key = 'map-' | append: title %}
-
-<div id="{{ key }}" style="height: 600px;"></div>
-
-{% include js/maps.html id=key data=map %}
-
-{% endfor %}
+      <div class="card">
+         <div class="card-body">
+            {% assign id = map[0] %}
+            {% include ui/map.html map=id %}
+         </div>
+      </div>
+   </div>
+   {% endfor %}
+</div>