feat: added country map to the website

Author: aaronczichon

personal/package-lock.json

@@ -1,7 +1,7 @@
 {
 	"name": "aaronczichon.de",
 	"type": "module",
-	"version": "1.0.0",
+	"version": "1.0.1",
 	"description": "Personal website of Aaron Czichon",
 	"scripts": {
 		"dev": "astro dev",
@@ -28,6 +28,7 @@
 		"typescript": "^5.3.3"
 	},
 	"devDependencies": {
+		"@types/mapbox-gl": "^3.1.0",
 		"prettier": "^3.2.5",
 		"prettier-plugin-astro": "^0.13.0"
 	}

personal/package.json

@@ -31,6 +31,11 @@ import { Image } from "astro:assets";
       class={currentPath.indexOf("cv") > -1 ? "active" : ""}>CV</a
     > -->
     <a href="/cv/" class={currentPath.indexOf("cv") > -1 ? "active" : ""}>CV</a>
+    <a
+      href="/visited-countries/"
+      class={currentPath.indexOf("visited-countries") > -1 ? "active" : ""}
+      >Visited Countries</a
+    >
     <!-- <a
       href="/pengiun"
       class={currentPath.indexOf("pengiun") > -1 ? "active" : ""}

personal/src/components/Nav.astro

@@ -0,0 +1,26 @@
+import { useState, useEffect } from 'preact/hooks';
+
+import BasicMap from './BasicMap';
+import { addMapLayer } from './map.func';
+
+export default function CountryDynamicMap({zoom, center}) {
+  const [map, setMap] = useState(null);
+  useEffect(() => {
+    // Add route to map
+    if (map) {
+      map.on('load', () => {
+        addMapLayer(map);
+      });
+    }
+  }, [map]);
+
+  useEffect(() => {
+    if (map) {
+      map.setCenter(center);
+    }
+  })
+
+  return (
+    <BasicMap zoom={zoom} setMap={setMap} />
+  );
+}

personal/src/components/dynamic/CountryMap.jsx

@@ -0,0 +1,45 @@
+import * as mapboxgl from 'mapbox-gl';
+
+export const addMapLayer = (map: mapboxgl.Map) => {
+  map.addSource('countries', {
+    type: 'vector',
+    url: 'mapbox://mapbox.country-boundaries-v1'
+});
+
+  map.addLayer(
+    {
+      id: 'country-boundaries',
+      source: 'countries',
+      'source-layer': 'country_boundaries',
+      type: 'fill',
+      paint: {
+        'fill-color': '#19bf32',
+        'fill-opacity': 0.7,
+      },
+    },
+    'country-label'
+  );
+
+  // ISO List: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-3
+  map.setFilter('country-boundaries', [
+    "in",
+    "iso_3166_1_alpha_3",
+    'ITA',
+    'CAN',
+    'DEU',
+    'ESP',
+    'SVK',
+    'SVN',
+    'CZE',
+    'HRV',
+    'BEL',
+    'NOR',
+    'AUT',
+    'LTU',
+    'FIN',
+    'EST',
+    'USA',
+    'CHE',
+    'FRA'
+  ]);
+}

personal/src/components/dynamic/map.func.ts

@@ -0,0 +1,17 @@
+---
+import Layout from "../layouts/Layout.astro";
+import CountryMap from "../components/dynamic/CountryMap";
+---
+
+<Layout title="Aaron Czichon - Visited Countries">
+  <main class="container">
+    <h1>Visited Countries</h1>
+    <p>
+      I've already visited a bunch of countries in my life. I love to keep track
+      of such things.
+    </p>
+  </main>
+
+  <!-- Map Component here -->
+  <CountryMap client:visible zoom="3" center={[10.451526, 51.165691]} />
+</Layout>