Centre map on home country and fix map shading

- Fly to home country on load and when selection changes
- Add country centroids for all countries
- Fix duplicate country highlight shading via worldview filter
- Add GitHub source link to footer
- Fix country ordering bug

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: jdamcd

README.md

@@ -1,6 +1,6 @@
 # tripm.app
 
-A visual travel history tracker that extracts trips from your calendar.
+A visual travel history based on events in your calendar.
 
 ![tripm.app](screenshot.png)
 
@@ -12,10 +12,9 @@ A visual travel history tracker that extracts trips from your calendar.
   - Hotel and accommodation bookings
   - Multi-day events with country or city names
   - Travel keywords (flight, hotel, trip, etc.)
-- **Interactive world map**: View visited countries on an interactive world map
+- **Map**: View visited countries on an interactive world map
 - **Trip management**: Add, edit, and delete trips manually
-- **Date filtering**: Filter trips by date range
-- **Home country**: Set a home country to exclude from visit counts
+- **Filters**: Filter trips by date and exclude events from your home country
 - **Export/import**: Back up and restore your trip history
 
 ## Local development
@@ -53,7 +52,6 @@ npm run build
 - Tailwind CSS v4
 - MapBox GL JS via react-map-gl
 - ical.js for calendar parsing
-- Vitest for testing
 
 ## License
 

src/App.tsx

@@ -291,7 +291,7 @@ function App() {
       {/* Footer */}
       <footer className="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-4 py-3 mt-auto">
         <div className="max-w-7xl mx-auto text-center text-sm text-gray-500 dark:text-gray-400">
-          All data is processed locally in your browser. Use import / export to back up your trip history.
+          All data is processed locally in your browser. Use import / export to back up your trip history. <a href="https://github.com/jdamcd/trip-map" target="_blank" rel="noopener noreferrer" className="hover:text-gray-700 dark:hover:text-gray-300 underline">Source code on GitHub</a>.
         </div>
       </footer>
     </div>

src/components/WorldMap.tsx

@@ -1,8 +1,9 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Map as MapGL, Layer, Source, Popup } from 'react-map-gl/mapbox';
 import type { MapLayerMouseEvent } from 'react-map-gl/mapbox';
+import type { MapRef } from '@vis.gl/react-mapbox';
 import type { CountryVisit, VisitEntry } from '../types';
-import { countries } from '../data/countries';
+import { countries, countryCoordinates } from '../data/countries';
 import { format } from 'date-fns';
 import 'mapbox-gl/dist/mapbox-gl.css';
 
@@ -35,6 +36,7 @@ function useDarkMode() {
 
 export function WorldMap({ visits, homeCountry, onCountryClick }: WorldMapProps) {
   const isDark = useDarkMode();
+  const mapRef = useRef<MapRef>(null);
   const [hoverInfo, setHoverInfo] = useState<{
     longitude: number;
     latitude: number;
@@ -62,7 +64,12 @@ export function WorldMap({ visits, homeCountry, onCountryClick }: WorldMapProps)
   }, [visits, homeCountry]);
 
   const filter = useMemo(
-    () => ['in', ['get', 'iso_3166_1'], ['literal', highlightedCountryCodes]],
+    () => [
+      'all',
+      ['in', ['get', 'iso_3166_1'], ['literal', highlightedCountryCodes]],
+      // Filter by worldview to avoid duplicate polygons causing opacity stacking
+      ['any', ['==', ['get', 'worldview'], 'all'], ['in', 'US', ['get', 'worldview']]],
+    ],
     [highlightedCountryCodes]
   );
 
@@ -122,17 +129,30 @@ export function WorldMap({ visits, homeCountry, onCountryClick }: WorldMapProps)
     [onCountryClick, visitsByCode]
   );
 
+  useEffect(() => {
+    if (!homeCountry || !mapRef.current) return;
+    const coords = countryCoordinates[homeCountry];
+    if (!coords) return;
+    mapRef.current.flyTo({ center: coords, zoom: 3, duration: 1000 });
+  }, [homeCountry]);
+
+  const initialViewState = useMemo(() => {
+    if (homeCountry) {
+      const coords = countryCoordinates[homeCountry];
+      if (coords) return { longitude: coords[0], latitude: coords[1], zoom: 3 };
+    }
+    return { longitude: 0, latitude: 20, zoom: 1.75 };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const mapStyle = isDark
     ? 'mapbox://styles/mapbox/dark-v11'
     : 'mapbox://styles/mapbox/light-v11';
 
   return (
     <MapGL
-      initialViewState={{
-        longitude: 0,
-        latitude: 20,
-        zoom: 1.75,
-      }}
+      ref={mapRef}
+      initialViewState={initialViewState}
       minZoom={1.75}
       maxZoom={5}
       style={{ width: '100%', height: '100%' }}

src/data/countries.ts

@@ -78,6 +78,7 @@ export const countries: Country[] = [
   { code: 'GY', name: 'Guyana' },
   { code: 'HT', name: 'Haiti' },
   { code: 'HN', name: 'Honduras' },
+  { code: 'HK', name: 'Hong Kong' },
   { code: 'HU', name: 'Hungary' },
   { code: 'IS', name: 'Iceland' },
   { code: 'IN', name: 'India' },
@@ -106,6 +107,7 @@ export const countries: Country[] = [
   { code: 'LI', name: 'Liechtenstein' },
   { code: 'LT', name: 'Lithuania' },
   { code: 'LU', name: 'Luxembourg' },
+  { code: 'MO', name: 'Macau' },
   { code: 'MG', name: 'Madagascar' },
   { code: 'MW', name: 'Malawi' },
   { code: 'MY', name: 'Malaysia' },
@@ -145,6 +147,7 @@ export const countries: Country[] = [
   { code: 'PH', name: 'Philippines' },
   { code: 'PL', name: 'Poland' },
   { code: 'PT', name: 'Portugal' },
+  { code: 'PR', name: 'Puerto Rico' },
   { code: 'QA', name: 'Qatar' },
   { code: 'RO', name: 'Romania' },
   { code: 'RU', name: 'Russia' },
@@ -200,11 +203,63 @@ export const countries: Country[] = [
   { code: 'YE', name: 'Yemen' },
   { code: 'ZM', name: 'Zambia' },
   { code: 'ZW', name: 'Zimbabwe' },
-  { code: 'HK', name: 'Hong Kong' },
-  { code: 'MO', name: 'Macau' },
-  { code: 'PR', name: 'Puerto Rico' },
 ];
 
+// Country centroids [longitude, latitude] for map centering
+export const countryCoordinates: Record<string, [number, number]> = {
+  'AF': [65, 33], 'AL': [20, 41], 'DZ': [3, 28], 'AD': [1.5, 42.5],
+  'AO': [18, -12], 'AG': [-61.8, 17.1], 'AR': [-64, -34], 'AM': [45, 40],
+  'AU': [134, -25], 'AT': [14, 47.5], 'AZ': [47.5, 40.5], 'BS': [-77.5, 24],
+  'BH': [50.5, 26], 'BD': [90, 24], 'BB': [-59.6, 13.2], 'BY': [28, 54],
+  'BE': [4.5, 50.5], 'BZ': [-88.7, 17.3], 'BJ': [2.5, 9.5], 'BT': [91, 27.5],
+  'BO': [-65, -17], 'BA': [18, 44], 'BW': [24, -22], 'BR': [-55, -10],
+  'BN': [115, 4.5], 'BG': [25, 43], 'BF': [-1.5, 12], 'BI': [29.9, -3.4],
+  'CV': [-23.6, 16], 'KH': [105, 12], 'CM': [12, 6], 'CA': [-95, 60],
+  'CF': [19, 7], 'TD': [18, 15], 'CL': [-72, -35], 'CN': [105, 35],
+  'CO': [-72, 4], 'KM': [43.8, -12], 'CG': [15, -1], 'CD': [25, -3],
+  'CR': [-84, 9.8], 'CI': [-5.5, 6.5], 'HR': [16, 45.5], 'CU': [-79, 22],
+  'CY': [33, 35], 'CZ': [15, 50], 'DK': [10, 56], 'DJ': [43, 11.5],
+  'DM': [-61.4, 15.5], 'DO': [-76, 19], 'EC': [-78, -2], 'EG': [30, 27],
+  'SV': [-88.8, 13.8], 'GQ': [11, 2], 'ER': [38, 15], 'EE': [26, 59],
+  'SZ': [31.8, -26.5], 'ET': [40, 9], 'FJ': [178, -18], 'FI': [26, 64],
+  'FR': [2, 46], 'GA': [11.5, -0.5], 'GM': [-15, 13.4], 'GE': [44, 42],
+  'DE': [10, 51], 'GH': [-2, 8], 'GR': [22, 39], 'GD': [-61.7, 12.1],
+  'GT': [-90.2, 15.5], 'GN': [-11, 11], 'GW': [-14.7, 12], 'GY': [-59, 5],
+  'HT': [-72.3, 19], 'HN': [-86.5, 14], 'HU': [19, 47], 'IS': [-18, 65],
+  'IN': [77, 20], 'ID': [118, -2], 'IR': [53, 32], 'IQ': [44, 33],
+  'IE': [-8, 53.5], 'IL': [35, 32], 'IT': [12, 42], 'JM': [-77.5, 18.2],
+  'JP': [138, 36], 'JO': [36, 31], 'KZ': [68, 48], 'KE': [38, -1],
+  'KI': [173, 1.5], 'KP': [127, 40], 'KR': [128, 36], 'KW': [48, 29.5],
+  'KG': [75, 41], 'LA': [105, 18], 'LV': [25, 57], 'LB': [36, 34],
+  'LS': [29, -29.5], 'LR': [-10, 6], 'LY': [17, 25], 'LI': [9.5, 47.1],
+  'LT': [24, 56], 'LU': [6, 49.5], 'MG': [47, -20], 'MW': [35, -13.5],
+  'MY': [109, 4], 'MV': [73.5, 4], 'ML': [-2, 17], 'MT': [14.5, 35.5],
+  'MH': [171, 8], 'MR': [-11, 18], 'MU': [57.5, -20.2], 'MX': [-102, 24],
+  'FM': [153, 7], 'MD': [29, 47], 'MC': [7.4, 43.7], 'MN': [105, 46],
+  'ME': [19, 42.5], 'MA': [-5, 32], 'MZ': [35, -18], 'MM': [96, 20],
+  'NA': [18, -22], 'NR': [166.9, -0.5], 'NP': [84, 28], 'NL': [5.5, 52.5],
+  'NZ': [174, -41], 'NI': [-85.8, 12.9], 'NE': [8, 16], 'NG': [8, 9],
+  'MK': [22, 41.5], 'NO': [10, 62], 'OM': [58, 22], 'PK': [69, 30],
+  'PW': [134.5, 7.5], 'PS': [35.3, 31.9], 'PA': [-80, 9], 'PG': [147, -6],
+  'PY': [-58, -23], 'PE': [-76, -10], 'PH': [122, 13], 'PL': [20, 52],
+  'PT': [-8, 39.5], 'QA': [51.2, 25.5], 'RO': [25, 46], 'RU': [100, 60],
+  'RW': [29.9, -2], 'KN': [-62.7, 17.3], 'LC': [-61, 13.9],
+  'VC': [-61.2, 13.2], 'WS': [-171.8, -14], 'SM': [12.4, 43.9],
+  'ST': [6.7, 0.2], 'SA': [45, 24], 'SN': [-14, 14], 'RS': [21, 44],
+  'SC': [55.5, -4.7], 'SL': [-11.8, 8.5], 'SG': [103.8, 1.3],
+  'SK': [19, 48.5], 'SI': [15, 46], 'SB': [161, -9], 'SO': [46, 5.5],
+  'ZA': [25, -29], 'SS': [32, 7], 'ES': [-4, 40], 'LK': [80, 8],
+  'SD': [30, 12], 'SR': [-56, 4], 'SE': [15, 62], 'CH': [8, 47],
+  'SY': [38, 35], 'TW': [121, 24], 'TJ': [71, 39], 'TZ': [35, -6],
+  'TH': [101, 15], 'TL': [126, -8.5], 'TG': [1.2, 9.5], 'TO': [-175, -20.5],
+  'TT': [-61.2, 10.5], 'TN': [9, 34], 'TR': [35, 39], 'TM': [60, 40],
+  'TV': [179, -8], 'UG': [32, 1], 'UA': [32, 49], 'AE': [54, 24],
+  'GB': [-2, 54], 'US': [-97, 38], 'UY': [-56, -33], 'UZ': [64, 41],
+  'VU': [167, -16], 'VA': [12.4, 41.9], 'VE': [-66, 8], 'VN': [108, 16],
+  'YE': [48, 15], 'ZM': [28, -14], 'ZW': [30, -19], 'HK': [114.2, 22.3],
+  'MO': [113.5, 22.2], 'PR': [-66, 18.2],
+};
+
 export const countryByCode: Record<string, Country> = Object.fromEntries(
   countries.map((c) => [c.code, c])
 );