สร้าง Interactive Map ด้วย Next.js และ MapLibre GL

# สร้างโปรเจกต์ Next.js
npx create-next-app@15.5.11 thailand-map -- --typescript --tailwind --eslint

# เข้าไปในโฟลเดอร์โปรเจกต์
cd thailand-map

thailand-map/
├── app/
│   ├── layout.tsx       # Root layout
│   ├── page.tsx         # Home page
│   └── globals.css      # Global styles
├── components/          # React components
├── lib/                 # Utility functions
├── public/              # Static files
├── package.json
├── tsconfig.json
└── next.config.ts       # Next.js config

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint"
  }
}

# ติดตั้ง map libraries
npm install maplibre-gl@^5.17.0 react-map-gl@^8.1.0

# ติดตั้ง TypeScript types สำหรับ GeoJSON
npm install @types/geojson@^7946.0.16

# ติดตั้ง TypeScript types สำหรับ map
npm install --save-dev @types/maplibre-gl

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  transpilePackages: ['maplibre-gl'],
  webpack: (config) => {
    config.module = config.module || {};
    config.module.unknownContextCritical = false;
    return config;
  },
};

export default nextConfig;

# สร้างโฟลเดอร์สำหรับเก็บข้อมูล
mkdir -p public/data

# วางไฟล์ thailand-provinces.json ใน public/data/

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "id": "10",
      "properties": {
        "id": "10",
        "name": "Bangkok",
        "PROV_NAMT": "กรุงเทพมหานคร"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [[
          [100.5, 13.7],
          [100.6, 13.8],
          ...
        ]]
      }
    }
  ]
}

// lib/election-data.ts

// Party types
export type Party = 'pink' | 'yellow';

export interface Candidate {
  id: string;
  name: string;
  party: Party;
  votes: number;
}

export interface ProvinceElectionData {
  provinceId: string;
  provinceName: string;
  candidates: [Candidate, Candidate]; // Exactly 2 candidates
  winner: Party;
  totalVotes: number;
}

export interface NationalStats {
  totalVotes: number;
  pinkPartyVotes: number;
  yellowPartyVotes: number;
  pinkPartySeats: number;
  yellowPartySeats: number;
  totalProvinces: number;
}

// Party colors and names
export const PARTY_COLORS = {
  pink: '#ec4899', // pink-500
  yellow: '#eab308', // yellow-500
} as const;

export const PARTY_NAMES = {
  pink: 'พรรคสีชมพู',
  yellow: 'พรรคสีเหลือง',
} as const;

'use client';

import { useEffect, useMemo, useRef, useState, useCallback } from 'react';
import { Map as MapLibreMap } from 'react-map-gl/maplibre';
import type { FeatureCollection } from 'geojson';
import type { ProvinceElectionData, Party } from '@/lib/election-data';
import 'maplibre-gl/dist/maplibre-gl.css';

interface ElectionMapProps {
  geoJson: FeatureCollection;
  electionData: ProvinceElectionData[];
  onProvinceSelect: (provinceId: string | null) => void;
}

export default function ElectionMap({
  geoJson,
  electionData,
  onProvinceSelect,
}: ElectionMapProps) {
  // ... component implementation
}

<MapLibreMap
  ref={mapRef}
  initialViewState={{
    longitude: 101.5,
    latitude: 13.5,
    zoom: 5.5,
  }}
  minZoom={4}
  maxZoom={12}
  mapStyle={{
    version: 8,
    sources: {
      'osm': {
        type: 'raster',
        tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
        tileSize: 256,
        attribution: '&copy; OpenStreetMap contributors',
      },
      'provinces': {
        type: 'geojson',
        data: geoJson,
      },
    },
    layers: [
      {
        id: 'osm-tiles',
        type: 'raster',
        source: 'osm',
        minzoom: 0,
        maxzoom: 19,
      },
      // ... province layers
    ],
  }}
/>

// Generate fill-color expression
const fillColorExpression = useMemo(() => {
  const expression: any[] = ['case'];

  // Add color conditions for each province
  for (const feature of geoJson.features) {
    const provinceId = feature.properties?.id;
    const winner = provinceWinners.get(provinceId);
    if (winner === 'pink') {
      expression.push(['==', ['get', 'id'], provinceId], '#ec4899');
    } else if (winner === 'yellow') {
      expression.push(['==', ['get', 'id'], provinceId], '#eab308');
    }
  }

  // Add default color
  expression.push('#d1d5db');
  return expression;
}, [geoJson, provinceWinners]);

// Use in layer
{
  id: 'provinces-fill',
  type: 'fill',
  source: 'provinces',
  paint: {
    'fill-color': fillColorExpression,
    'fill-opacity': [
      'case',
      ['boolean', ['feature-state', 'selected'], false],
      0.8,
      ['boolean', ['feature-state', 'hovered'], false],
      0.7,
      0.5,
    ],
  },
}

// Expression จะถูกแปลงเป็น:
'case',                                   // ฟังก์ชัน case
['==', ['get', 'id'], '10'], '#ec4899',   // ถ้า id = 10 ให้สีชมพู
['==', ['get', 'id'], '11'], '#eab308',   // ถ้า id = 11 ให้สีเหลือง
// ... ทุกจังหวัด
'#d1d5db'                                 // ถ้าไม่ตรงกับใครเลย ให้สีเทา

// Handle click on provinces
const onClick = useCallback((e: any) => {
  const feature = e.features?.[0];
  if (!feature) return;

  const provinceId = feature.properties?.id;

  if (selectedProvinceId === provinceId) {
    // Deselect if clicking the same province
    handleReset();
  } else {
    setSelectedProvinceId(provinceId);
    onProvinceSelect(provinceId);
  }
}, [selectedProvinceId, onProvinceSelect, handleReset]);

// Update feature state when selection changes
useEffect(() => {
  const map = mapRef.current;
  if (!map) return;

  // Clear previous selection
  provinceFeatureIds.featureMap.forEach((featureId) => {
    map.getMap().setFeatureState(
      { source: 'provinces', id: featureId },
      { selected: false }
    );
  });

  // Set new selection
  if (selectedProvinceId) {
    const featureId = provinceFeatureIds.featureMap.get(selectedProvinceId);
    if (featureId !== undefined) {
      map.getMap().setFeatureState(
        { source: 'provinces', id: featureId },
        { selected: true }
      );
    }
  }
}, [selectedProvinceId, provinceFeatureIds]);

// Hover state effect
useEffect(() => {
  const map = mapRef.current;
  if (!map) return;

  // Clear all hovers
  provinceFeatureIds.featureMap.forEach((featureId) => {
    map.getMap().setFeatureState(
      { source: 'provinces', id: featureId },
      { hovered: false }
    );
  });

  // Set new hover
  if (hoveredProvinceId) {
    const featureId = provinceFeatureIds.featureMap.get(hoveredProvinceId);
    if (featureId !== undefined) {
      map.getMap().setFeatureState(
        { source: 'provinces', id: featureId },
        { hovered: true }
      );
    }
  }
}, [hoveredProvinceId, provinceFeatureIds]);

// Calculate province bounds
const provinceFeatureIds = useMemo(() => {
  const featureMap = new Map<string, number>();
  const boundsMap = new Map<string, [number, number, number, number]>();

  geoJson.features.forEach((feature, index) => {
    const provinceId = feature.properties?.id;
    if (provinceId) {
      featureMap.set(provinceId, feature.id || index);

      // Calculate bounds for this province
      if (feature.geometry?.type === 'Polygon') {
        const coordinates = feature.geometry.coordinates[0] as [number, number][];
        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
        coordinates.forEach(([lon, lat]) => {
          minX = Math.min(minX, lon);
          minY = Math.min(minY, lat);
          maxX = Math.max(maxX, lon);
          maxY = Math.max(maxY, lat);
        });
        boundsMap.set(provinceId, [minX, minY, maxX, maxY]);
      }
    }
  });
  return { featureMap, boundsMap };
}, [geoJson]);

// Fly to province when selected
useEffect(() => {
  const map = mapRef.current;
  if (!map || !selectedProvinceId) return;

  const bounds = provinceFeatureIds.boundsMap.get(selectedProvinceId);
  if (bounds) {
    const [minX, minY, maxX, maxY] = bounds;
    const padding = 50;

    map.getMap().fitBounds(
      [
        [minX, minY],
        [maxX, maxY]
      ],
      {
        padding: { top: padding, bottom: padding, left: padding, right: padding },
        duration: 1000,
      }
    );
  }
}, [selectedProvinceId, provinceFeatureIds]);

// Expression ประมวลผลบน GPU ทำให้เร็วมาก
'fill-color': [
  'case',
  ['==', ['get', 'id'], '10'], '#ec4899',   // จังหวัด 10 = ชมพูชนะ
  ['==', ['get', 'id'], '11'], '#eab308',   // จังหวัด 11 = เหลืองชนะ
  '#d1d5db'                                 // default = สีเทา
]

paint: {
  'fill-opacity': [
    'case',
    ['boolean', ['feature-state', 'selected'], false],  // ถ้า selected
    0.8,                                                 // opacity = 0.8
    ['boolean', ['feature-state', 'hovered'], false],   // ถ้า hovered
    0.7,                                                 // opacity = 0.7
    0.5,                                                 // default
  ],
  'line-width': [
    'case',
    ['boolean', ['feature-state', 'selected'], false],  // ถ้า selected
    3,                                                   // ขอบหนา 3px
    ['boolean', ['feature-state', 'hovered'], false],   // ถ้า hovered
    2,                                                   // ขอบหนา 2px
    1,                                                   // default
  ],
}

'use client';

import { useMemo } from 'react';
import type { ProvinceElectionData, NationalStats } from '@/lib/election-data';
import { PARTY_COLORS, PARTY_NAMES } from '@/lib/election-data';

interface ElectionInfoProps {
  electionData: ProvinceElectionData[];
  nationalStats: NationalStats;
  selectedProvinceId: string | null;
}

export default function ElectionInfo({
  electionData,
  nationalStats,
  selectedProvinceId,
}: ElectionInfoProps) {
  const selectedProvince = useMemo(() => {
    if (!selectedProvinceId) return null;
    return electionData.find((p) => p.provinceId === selectedProvinceId) || null;
  }, [selectedProvinceId, electionData]);

  return (
    <div className="h-full flex flex-col bg-white dark:bg-gray-900 rounded-lg">
      {/* Header */}
      <div className="p-6 border-b">
        <h1 className="text-2xl font-bold">การเลือกตั้งทั่วไป พ.ศ. 3569</h1>
      </div>

      {/* Content - National Overview or Province Detail */}
      {selectedProvince ? (
        // Province Detail View
        <div>...</div>
      ) : (
        // National Overview View
        <div>...</div>
      )}
    </div>
  );
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-out forwards;
}

.animate-slideUp {
  animation: slideUp 0.4s ease-out forwards;
}

.animate-scaleIn {
  animation: scaleIn 0.3s ease-out forwards;
}

// Desktop: 3 columns (1:2 ratio)
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4 h-full">
  <div className="lg:col-span-1"> {/* Info panel - 33% */}
  <div className="lg:col-span-2"> {/* Map - 67% */}
</div>

// Mobile: 1 column (stacked)
<div className="grid grid-cols-1">
  <div> {/* Info panel - 100% */}
  <div> {/* Map - 100% */}
</div>

/* app/globals.css */
@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

className="bg-white dark:bg-gray-900"
className="text-gray-900 dark:text-white"
className="border-gray-200 dark:border-gray-700"

npm run dev

'fill-color': [
  'interpolate',              // สร้าง gradient สี
  ['linear'],                 // ประเภท interpolation
  ['get', 'turnout'],         // ค่าเปอร์เซ็นต์
  0, '#fee5d9',               // 0% = สีแดงอ่อน
  50, '#fcae91',              // 50% = สีส้ม
  70, '#fb6a4a',              // 70% = สีแดง
  100, '#de2d26'              // 100% = สีแดงเข้ม
]

// แก้ไข Party type
export type Party = 'pink' | 'yellow' | 'blue' | 'green';

// อัปเดต PARTY_COLORS และ PARTY_NAMES
export const PARTY_COLORS = {
  pink: '#ec4899',
  yellow: '#eab308',
  blue: '#3b82f6',
  green: '#22c55e',
} as const;

export const PARTY_NAMES = {
  pink: 'พรรคสีชมพู',
  yellow: 'พรรคสีเหลือง',
  blue: 'พรรคสีฟ้า',
  green: 'พรรคสีเขียว',
} as const;

'use client';

import { useEffect, useState } from 'react';
import dynamic from 'next/dynamic';
import type { FeatureCollection } from 'geojson';
import {
  generateAllProvincesData,
  calculateNationalStats,
  type ProvinceElectionData,
  type NationalStats,
} from '@/lib/election-data';

// Dynamically import ElectionMap to avoid SSR issues with maplibre-gl
const ElectionMap = dynamic(() => import('@/components/ElectionMap'), {
  ssr: false,
  loading: () => (
    <div className="w-full h-full flex items-center justify-center bg-gray-100 dark:bg-gray-800 rounded-lg">
      <div className="text-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900 dark:border-gray-100 mx-auto mb-4"></div>
        <p className="text-gray-600 dark:text-gray-400">กำลังโหลดแผนที่...</p>
      </div>
    </div>
  ),
});

import ElectionInfo from '@/components/ElectionInfo';

export default function Home() {
  const [geoJson, setGeoJson] = useState<FeatureCollection | null>(null);
  const [electionData, setElectionData] = useState<ProvinceElectionData[]>([]);
  const [nationalStats, setNationalStats] = useState<NationalStats | null>(null);
  const [selectedProvinceId, setSelectedProvinceId] = useState<string | null>(null);

  useEffect(() => {
    // Load GeoJSON data
    fetch('/data/thailand-provinces.json')
      .then((response) => response.json())
      .then((data) => {
        setGeoJson(data);

        // Generate election data
        const provincesData = generateAllProvincesData(data);
        setElectionData(provincesData);

        // Calculate national statistics
        const stats = calculateNationalStats(provincesData);
        setNationalStats(stats);
      })
      .catch((error) => {
        console.error('Error loading GeoJSON:', error);
      });

    // Listen for clear-selection event from ElectionInfo component
    const handleClearSelection = () => {
      setSelectedProvinceId(null);
    };

    window.addEventListener('clear-selection', handleClearSelection);

    return () => {
      window.removeEventListener('clear-selection', handleClearSelection);
    };
  }, []);

  const handleProvinceSelect = (provinceId: string | null) => {
    setSelectedProvinceId(provinceId);
  };

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-950 p-4 md:p-6">
      <div className="max-w-7xl mx-auto h-[calc(100vh-3rem)]">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 h-full">
          {/* Left sidebar - Info panel */}
          <div className="lg:col-span-1 h-full">
            {nationalStats && (
              <ElectionInfo
                electionData={electionData}
                nationalStats={nationalStats}
                selectedProvinceId={selectedProvinceId}
              />
            )}
          </div>

          {/* Right - Map */}
          <div className="lg:col-span-2 h-full">
            {geoJson ? (
              <ElectionMap
                geoJson={geoJson}
                electionData={electionData}
                onProvinceSelect={handleProvinceSelect}
              />
            ) : (
              <div className="w-full h-full flex items-center justify-center bg-gray-100 dark:bg-gray-800 rounded-lg">
                <div className="text-center">
                  <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900 dark:border-gray-100 mx-auto mb-4"></div>
                  <p className="text-gray-600 dark:text-gray-400">กำลังโหลดข้อมูล...</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "แผนที่การเลือกตั้ง พ.ศ. 3569",
  description: "ผลการเลือกตั้งทั่วไป 77 จังหวัดทั่วประเทศไทย",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {children}
      </body>
    </html>
  );
}

@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-out forwards;
}

.animate-slideUp {
  animation: slideUp 0.4s ease-out forwards;
  opacity: 0;
}

.animate-slideDown {
  animation: slideDown 0.4s ease-out forwards;
}

.animate-scaleIn {
  animation: scaleIn 0.3s ease-out forwards;
}

thailand-map/
├── app/
│   ├── layout.tsx          # Root layout with fonts and metadata
│   ├── page.tsx            # Main page with dynamic imports
│   └── globals.css         # Global styles + animations
├── components/
│   ├── ElectionMap.tsx     # Map component with MapLibre GL
│   └── ElectionInfo.tsx    # Info panel component
├── lib/
│   └── election-data.ts    # Data generation and types
├── public/
│   └── data/
│       └── thailand-provinces.json  # GeoJSON data (ดาวน์โหลดเอง)
├── package.json
├── tsconfig.json
├── next.config.ts          # Next.js config with transpilePackages
└── tailwind.config.ts      # Tailwind CSS v4 config