Jak zrobić interaktywną klikalną mapę Polski?

Tworzenie interaktywnej klikalnej mapy Polski może wydawać się skomplikowane, ale tak naprawdę to prosty projekt, który można zrealizować w zaledwie kilku krokach. Dzięki niej możesz dodać fajny element na swoją stronę internetową – idealny do wizualizacji danych, prezentowania lokalizacji czy tworzenia interaktywnych przewodników. W tym artykule przeprowadzę Cię przez cały proces, od pomysłu do gotowej mapy. Gotowi? No to jedziemy!

Co będziemy potrzebować?

Zanim zaczniemy, musimy przygotować kilka rzeczy:

HTML – do stworzenia podstawowej struktury strony.
CSS – żeby mapa wyglądała schludnie.
JavaScript – żeby dodać interaktywność (bo przecież chcemy, żeby coś się działo, gdy użytkownik kliknie!).
Plik SVG z mapą Polski – to baza, na której będziemy pracować.

Nie martw się, wszystko wyjaśnię krok po kroku, więc nie musisz być mistrzem kodowania.

Krok 1: Znalezienie mapy Polski w formacie SVG

Mapa Polski w formacie SVG to kluczowy element. Dlaczego SVG? To format wektorowy, który pozwala na skalowanie obrazu bez utraty jakości. Możesz znaleźć darmowe mapy SVG w internecie – polecam wyszukać frazę „Polska mapa SVG” i wybrać taką, która ma oznaczone województwa (bo chcemy klikalność, prawda?).

Alternatywnie, możesz stworzyć własną mapę w programie graficznym, takim jak Adobe Illustrator czy Inkscape.

Krok 2: Struktura HTML

Teraz czas na podstawy. Stwórz plik HTML i umieść w nim strukturę naszej mapy. Zakładam, że masz już pobraną mapę SVG.

Otwórz swój ulubiony edytor kodu (np. VS Code) i stwórz nowy plik index.html:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Jak zrobić interaktywną mapę Polski?">
    <title>Interaktywna mapa Polski</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 0;
            padding: 0;
        }

        svg {
            max-width: 100%;
            height: auto;
        }

        .region {
            cursor: pointer;
            transition: fill 0.3s;
        }

        .region:hover {
            fill: #ffcc00;
        }
    </style>
</head>
<body>
    <h1>Interaktywna mapa Polski</h1>
    <div id="mapa">
        <!-- Tutaj wkleimy nasz plik SVG -->
    </div>
    <script src="script.js"></script>
</body>
</html>

To jest nasz start. Na razie nie mamy mapy, ale spokojnie, zaraz ją dodamy.

Krok 3: Dodanie mapy SVG

Skopiuj kod SVG mapy Polski do sekcji <div id="mapa">. Kod SVG może być dość długi, ale oto przykład uproszczonej wersji:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
    <g id="Mazowieckie" class="region" fill="#d4d4d4" stroke="#000" stroke-width="1">
        <path d="M200,100 L300,100 L300,200 L200,200 Z"></path>
    </g>
    <g id="Pomorskie" class="region" fill="#d4d4d4" stroke="#000" stroke-width="1">
        <path d="M100,50 L200,50 L200,100 L100,100 Z"></path>
    </g>
    <!-- Dodaj pozostałe województwa -->
</svg>

Każde województwo oznaczone jest jako grupa <g> z unikalnym id (np. „Mazowieckie”). To pozwala nam na przypisanie funkcji do konkretnego regionu.

Krok 4: Stylizacja CSS

Dzięki klasie .region województwa zmieniają kolor po najechaniu myszką. Dodałem też delikatną animację, żeby efekt był płynny. Możesz dostosować kolory według własnych upodobań.

Krok 5: Dodanie interaktywności w JavaScript

Teraz zaczyna się magia! Chcemy, żeby po kliknięciu w województwo wydarzyło się coś fajnego – np. wyświetlenie alertu lub przeniesienie do innej strony.

Otwórz plik script.js i dodaj poniższy kod:

// Wybieramy wszystkie elementy z klasą "region"
const regions = document.querySelectorAll('.region');

// Dodajemy funkcję kliknięcia
regions.forEach(region => {
    region.addEventListener('click', () => {
        const regionName = region.getAttribute('id');
        alert(`Kliknąłeś: ${regionName}`);
        // Tutaj możesz dodać dodatkowe akcje, np. przekierowanie:
        // window.location.href = `/${regionName.toLowerCase()}.html`;
    });
});

Co tu się dzieje?

Wybieramy wszystkie elementy z klasą .region za pomocą querySelectorAll.
Dodajemy EventListener, który reaguje na kliknięcia.
Wykorzystujemy getAttribute('id'), żeby pobrać nazwę klikniętego województwa i wyświetlić ją w alercie.

Krok 6: Testowanie i optymalizacja

Otwórz plik index.html w przeglądarce i kliknij na dowolne województwo. Powinieneś zobaczyć alert z nazwą województwa. Jeśli wszystko działa, gratulacje! Masz działającą interaktywną mapę Polski.

Co dalej?

Teraz możesz rozbudować swoją mapę o dodatkowe funkcje:

Dodaj szczegółowe informacje o każdym województwie (np. w wyskakującym oknie).
Połącz mapę z bazą danych, żeby wyświetlać dynamiczne dane.
Zmień styl mapy, dodając różne kolory dla województw w zależności od warunków (np. gęstości zaludnienia).
Dodaj responsywność, aby mapa działała świetnie na urządzeniach mobilnych.

Tworzenie interaktywnej klikalnej mapy Polski to świetny sposób na wzbogacenie swojej strony internetowej. Wystarczy odrobina HTML, CSS i JavaScript, żeby uzyskać naprawdę imponujący efekt. Mam nadzieję, że ten poradnik był dla Ciebie pomocny i udało Ci się stworzyć własną mapę.