From 761df6a3d29a997188b9b92e1f38087d0871c6ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kuna?=
<1282324+codecalm@users.noreply.github.com>
Date: Sat, 5 Feb 2022 13:53:22 +0100
Subject: [PATCH] feat: New vector maps demos (#1020)
---
src/pages/_data/libs.json | 5 ++-
src/pages/_data/maps-vector.yml | 38 ++++++++++++++--
src/pages/_data/menu.yml | 1 +
.../cards/{map.html => map-vector.html} | 0
src/pages/_includes/layout/homepage.html | 2 +-
src/pages/_includes/ui/map-vector.html | 44 ++++++++++++++++++-
src/pages/maps-vector.html | 33 ++++++++++++++
7 files changed, 116 insertions(+), 7 deletions(-)
rename src/pages/_includes/cards/{map.html => map-vector.html} (100%)
create mode 100644 src/pages/maps-vector.html
diff --git a/src/pages/_data/libs.json b/src/pages/_data/libs.json
index 30dfaf32a..fb0f6175a 100644
--- a/src/pages/_data/libs.json
+++ b/src/pages/_data/libs.json
@@ -16,7 +16,10 @@
"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-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"
},
"css": {
"mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css"
diff --git a/src/pages/_data/maps-vector.yml b/src/pages/_data/maps-vector.yml
index e95ea4e8e..c2ea9f126 100644
--- a/src/pages/_data/maps-vector.yml
+++ b/src/pages/_data/maps-vector.yml
@@ -4,11 +4,41 @@ world:
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 }'
-europe:
- title: Map of Europe
- map: europe
+canada:
+ title: Map of Canada
+ map: canada
zoom: true
+ filled: true
+ color: green
+
+russia:
+ title: Map of russia
+ map: russia
+ color: green
+ filled: true
+ 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
usa:
title: Map of USA
- map: usa_en
+ map: us_merc_en
+ color: red
+ filled: true
+ 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
diff --git a/src/pages/_data/menu.yml b/src/pages/_data/menu.yml
index 3a60c1019..85a722c4c 100644
--- a/src/pages/_data/menu.yml
+++ b/src/pages/_data/menu.yml
@@ -52,6 +52,7 @@ base:
maps-vector:
url: maps-vector.html
title: Vector maps
+ badge: New
navigation:
url: navigation.html
title: Navigation
diff --git a/src/pages/_includes/cards/map.html b/src/pages/_includes/cards/map-vector.html
similarity index 100%
rename from src/pages/_includes/cards/map.html
rename to src/pages/_includes/cards/map-vector.html
diff --git a/src/pages/_includes/layout/homepage.html b/src/pages/_includes/layout/homepage.html
index 68ae80bde..e2c845234 100644
--- a/src/pages/_includes/layout/homepage.html
+++ b/src/pages/_includes/layout/homepage.html
@@ -40,7 +40,7 @@
- {% include cards/map.html title="Locations" %}
+ {% include cards/map-vector.html title="Locations" %}
{% comment %}
diff --git a/src/pages/_includes/ui/map-vector.html b/src/pages/_includes/ui/map-vector.html
index ad19b9d73..9d1e27964 100644
--- a/src/pages/_includes/ui/map-vector.html
+++ b/src/pages/_includes/ui/map-vector.html
@@ -21,9 +21,15 @@
backgroundColor: 'transparent',
regionStyle: {
initial: {
+ {% unless data.filled %}
fill: '#F8FAFC',
- stroke: '#dae1e7',
+ stroke: 'rgba(98, 105, 118, .16)',
strokeWidth: 1,
+ {% else %}
+ fill: '#e9ecef',
+ stroke: '#fff',
+ strokeWidth: 1,
+ {% endunless %}
}
},
zoomOnScroll: {% if data.zoom %}true{% else %}false{% endif %},
@@ -35,6 +41,42 @@
values: {{ data.values }},
},
{% endif %}
+ {% if data.markers %}
+ markers: [
+ {% for marker in data.markers %}
+ {
+ coords: [{{ marker.coords }}],
+ name: "{{ marker.name }}",
+ },
+ {% endfor %}
+ ],
+ markerStyle: {
+ initial: {
+ r: 3,
+ stroke: '#fff',
+ opacity: 1,
+ strokeWidth: 3,
+ stokeOpacity: .5,
+ fill: '{{ color | tabler_color }}'
+ },
+ hover: {
+ fill: '{{ color | tabler_color }}',
+ stroke: '{{ color | tabler_color }}'
+ }
+ },
+ markerLabelStyle: {
+ initial: {
+ fontSize: 10
+ },
+ },
+ labels: {
+ markers: {
+ render: function(marker) {
+ return marker.name
+ },
+ },
+ },
+ {% endif %}
});
window.addEventListener("resize", () => {
diff --git a/src/pages/maps-vector.html b/src/pages/maps-vector.html
new file mode 100644
index 000000000..e1867351f
--- /dev/null
+++ b/src/pages/maps-vector.html
@@ -0,0 +1,33 @@
+---
+title: Vector Maps
+page-header: Vector Maps
+menu: base.maps-vector
+libs: jsvectormap, jsvectormap-world, jsvectormap-usa, jsvectormap-canada, jsvectormap-russia
+---
+
+
+
+
+
+
World map
+ {% include ui/map-vector.html map-id="world" height=18 %}
+
+
+
+
+
+
+
Map of Russia
+ {% include ui/map-vector.html map-id="russia" height=18 %}
+
+
+
+
+
+
+
Map od USA
+ {% include ui/map-vector.html map-id="usa" height=18 %}
+
+
+
+