Skip to content

Commit

Permalink
feat: add map with visited countries, regions, states
Browse files Browse the repository at this point in the history
  • Loading branch information
@martapanc
martapanc committed Apr 13, 2024
1 parent 20d9f48 commit 72aed38
Show file tree
Hide file tree
Showing 3 changed files with 310 additions and 4 deletions.
88 changes: 85 additions & 3 deletions src/components/organisms/about/Travel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,19 @@
import * as am5 from '@amcharts/amcharts5';
import * as am5map from '@amcharts/amcharts5/map';
import Am5themes_Animated from '@amcharts/amcharts5/themes/Animated';
import am5geodata_italyLow from '@amcharts/amcharts5-geodata/italyLow';
import am5geodata_ukLow from '@amcharts/amcharts5-geodata/ukLow';
import am5geodata_usaLow from '@amcharts/amcharts5-geodata/usaLow';
import am5geodata_worldLow from '@amcharts/amcharts5-geodata/worldLow';
import { useLayoutEffect } from 'react';

import {
countriesVisited,
italyVisitedRegions,
ukVisitedRegions,
usStatesVisited,
} from '@/data/about/travel/data';

const Travel = () => {
useLayoutEffect(() => {
const root = am5.Root.new('chartdiv');
Expand All @@ -19,24 +29,96 @@ const Travel = () => {
// maxZoomLevel: 16
// zoomStep: 1,
homeZoomLevel: 2,
homeGeoPoint: { longitude: 9, latitude: 45 },
homeGeoPoint: { longitude: 11, latitude: 45 },
// wheelSensitivity: 0.5
}),
);

chart.set('zoomControl', am5map.ZoomControl.new(root, {}));

const polygonSeries = chart.series.push(
const worldSeries = chart.series.push(
am5map.MapPolygonSeries.new(root, {
geoJSON: am5geodata_worldLow,
exclude: ['AQ'],
fill: am5.color('#E1E1E1'),
opacity: 0.75,
}),
);

const worldVisitedSeries = chart.series.push(
am5map.MapPolygonSeries.new(root, {
geoJSON: am5geodata_worldLow,
include: countriesVisited.map((country) => country.id),
exclude: ['US', 'IT', 'GB'],
fill: am5.color('#8FC8E3'),
opacity: 0.9,
}),
);

// const usaSeries = chart.series.push(
// am5map.MapPolygonSeries.new(root, {
// geoJSON: am5geodata_usaLow,
// exclude: states.map((state) => state.id),
// fill: am5.color("#8FC8E3"),
// opacity: 0.9
// })
// );

const usaVisitedSeries = chart.series.push(
am5map.MapPolygonSeries.new(root, {
geoJSON: am5geodata_usaLow,
include: usStatesVisited.map((state) => state.id),
fill: am5.color('#309ECC'),
opacity: 0.9,
}),
);

// const italySeries = chart.series.push(
// am5map.MapPolygonSeries.new(root, {
// geoJSON: am5geodata_italyLow,
// fill: am5.color("#8FC8E3"),
// opacity: 0.9
// })
// );

const italyVisitedSeries = chart.series.push(
am5map.MapPolygonSeries.new(root, {
geoJSON: am5geodata_italyLow,
include: italyVisitedRegions.map((region) => region.id),
fill: am5.color('#309ECC'),
opacity: 0.9,
}),
);

polygonSeries.events.on('datavalidated', function () {
const ukSeries = chart.series.push(
am5map.MapPolygonSeries.new(root, {
geoJSON: am5geodata_ukLow,
include: ukVisitedRegions,
fill: am5.color('#309ECC'),
opacity: 0.9,
}),
);

worldSeries.events.on('datavalidated', function () {
chart.goHome();
});

worldVisitedSeries.mapPolygons.template.setAll({
tooltipText: '{name}',
});

usaVisitedSeries.mapPolygons.template.setAll({
tooltipText: '{name}',
});

italyVisitedSeries.mapPolygons.template.setAll({
tooltipText: '{name}',
});

ukSeries.mapPolygons.template.setAll({
tooltipText: '{name}',
});

return () => {
root.dispose();
};
Expand Down
2 changes: 1 addition & 1 deletion src/data/about/randomFacts.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@
{
"name": "Countries visited",
"headline": "I have visited a total of 21 countries so far 🗺️",
"description": "I have visited a total of 21 countries so far 🗺️ \n\nThe full list is: Austria, Belgium, China, France, Germany, Iceland, Ireland, Italy, Malta, the Netherlands, Monaco, Poland, Portugal, Russia, San Marino, Slovakia, Spain, Switzerland, United Kingdom, United States, Vatican City.",
"description": "I have visited a total of 21 countries so far 🗺️ \n\nThe full list is: Austria, Belgium, China, France, Germany, Iceland, Ireland, Italy, Malta, Monaco, the Netherlands, Poland, Portugal, Russia, San Marino, Slovakia, Spain, Switzerland, United Kingdom, United States, Vatican City.",
"isFactTrue": true,
"explanation": "Correct! The full list is: Austria, Belgium, China, France, Germany, Iceland, Ireland, Italy, Malta, Monaco, the Netherlands, Poland, Portugal, Russia, San Marino, Slovakia, Spain, Switzerland, United Kingdom, United States, Vatican City."
}
Expand Down
224 changes: 224 additions & 0 deletions src/data/about/travel/data.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,224 @@
export const countriesVisited = [
{
title: 'Austria',
id: 'AT',
},
{
title: 'Belgium',
id: 'BE',
},
{
title: 'China',
id: 'CN',
},
{
title: 'France',
id: 'FR',
},
{
title: 'Germany',
id: 'DE',
},
{
title: 'Iceland',
id: 'IS',
},
{
title: 'Ireland',
id: 'IE',
},
{
title: 'Italy',
id: 'IT',
},
{
title: 'Malta',
id: 'MT',
},
{
title: 'Monaco',
id: 'MC',
},
{
title: 'The Netherlands',
id: 'NL',
},
{
title: 'Poland',
id: 'PL',
},
{
title: 'Portugal',
id: 'PT',
},
{
title: 'Russia',
id: 'RU',
},
{
title: 'San Marino',
id: 'SM',
},
{
title: 'Slovakia',
id: 'SK',
},
{
title: 'Spain',
id: 'ES',
},
{
title: 'Switzerland',
id: 'CH',
},
{
title: 'United Kingdom',
id: 'GB',
},
{
title: 'United States',
id: 'US',
},
{
title: 'Vatican City',
id: 'VA',
},
];

export const usStatesVisited = [
{
name: 'Alabama',
id: 'US-AL',
},
{
name: 'California',
id: 'US-CA',
},
{
name: 'Delaware',
id: 'US-DE',
},
{
name: 'Florida',
id: 'US-FL',
},
{
name: 'Georgia',
id: 'US-GA',
},
{
name: 'Maryland',
id: 'US-MD',
},
{
name: 'New Jersey',
id: 'US-NJ',
},
{
name: 'New York',
id: 'US-NY',
},
{
name: 'North Carolina',
id: 'US-NC',
},
{
name: 'Pennsylvania',
id: 'US-PA',
},
{
name: 'South Carolina',
id: 'US-SC',
},
{
name: 'Texas',
id: 'US-TX',
},
{
name: 'Virginia',
id: 'US-VA',
},
{
name: 'West Virginia',
id: 'US-WV',
},
];

export const italyVisitedRegions = [
{
name: 'Campania',
id: 'IT-72',
},
{
name: 'Emilia-Romagna',
id: 'IT-45',
},
{
name: 'Friuli Venezia Giulia',
id: 'IT-36',
},
{
name: 'Lazio',
id: 'IT-62',
},
{
name: 'Liguria',
id: 'IT-42',
},
{
name: 'Lombardia',
id: 'IT-25',
},
{
name: 'Marche',
id: 'IT-57',
},
{
name: 'Piemonte',
id: 'IT-21',
},
{
name: 'Toscana',
id: 'IT-52',
},
{
name: 'Trentino-Alto Adige',
id: 'IT-32',
},
{
name: "Valle d'Aosta",
id: 'IT-23',
},
{
name: 'Veneto',
id: 'IT-34',
},
];

export const ukVisitedRegions = [
'GB-SCT',
'GB-NIR',
'GB-UKC',
'GB-UKD',
'GB-UKE',
'GB-UKG',
'GB-UKF',
'GB-UKH',
'GB-UKI',
'GB-UKJ',
];

// const countriesLived = [
// {
// "name": "France"
// },
// {
// "name": "Italy"
// },
// {
// "name": "United Kingdom"
// },
// {
// "name": "United States"
// }
// ]

0 comments on commit 72aed38

Please sign in to comment.