Jak osadzić mapę z OpenStreetMap na swojej stronie

Cześć! Masz stronę internetową i zastanawiasz się, jak osadzić na niej mapę? Dobrze trafiłeś! W tym artykule pokażę Ci, jak w prosty sposób skorzystać z OpenStreetMap (OSM) i osadzić mapę na swojej stronie internetowej. Wszystko krok po kroku, bez zbędnego technicznego żargonu. Gotowy? No to zaczynamy!

Dlaczego OpenStreetMap?

Zanim przejdziemy do działania, powiem Ci, dlaczego warto wybrać OSM. OpenStreetMap to otwarta, darmowa platforma, która pozwala na korzystanie z map bez ograniczeń licencyjnych, jak to bywa np. w przypadku Google Maps. Co więcej, społeczność stale aktualizuje dane, więc mapy są precyzyjne i aktualne.

Nie musisz płacić za API, a sama integracja jest prosta jak bułka z masłem. Teraz, gdy już wiesz, dlaczego to świetny wybór, przejdźmy do konkretów.

Jak osadzić mapę OpenStreetMap? Krok po kroku

1. Znajdź miejsce na mapie

Pierwszym krokiem jest znalezienie lokalizacji, którą chcesz pokazać na swojej stronie.

Otwórz OpenStreetMap.
Wyszukaj miejsce w pasku wyszukiwania u góry.
Przybliż mapę tak, jak chcesz, żeby wyglądała na stronie. Możesz skorzystać z myszki albo suwaków.

Gotowe? Super! Teraz czas na wyciągnięcie kodu.

2. Skopiuj kod do osadzenia

Na OpenStreetMap jest bardzo proste narzędzie do generowania kodu.

Kliknij w ikonę „Udostępnij” (znajduje się po prawej stronie ekranu, wygląda jak strzałka wychodząca z pudełka).
W nowym oknie zobaczysz sekcję Osadź mapę.
Skopiuj kod iframe, który tam znajdziesz.

Kod będzie wyglądał mniej więcej tak:

<iframe width="600" height="450" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=..."></iframe>
<small><a href="https://www.openstreetmap.org">Wyświetl większą mapę</a></small>

Proste, prawda? Teraz masz gotowy kod, który możesz wstawić na swoją stronę.

3. Dodaj kod na swoją stronę

Jeśli masz dostęp do plików HTML swojej strony, wystarczy, że wkleisz ten kod w odpowiednim miejscu. Oto jak to zrobić:

Otwórz plik HTML, gdzie chcesz, żeby była mapa.
Wklej kod iframe w miejscu, w którym ma się pojawić.
Zapisz zmiany i odśwież stronę.

Przykład:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mapa z OpenStreetMap</title>
</head>
<body>
    <h1>Oto moja mapa</h1>
    <iframe width="600" height="450" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=..."></iframe>
    <small><a href="https://www.openstreetmap.org">Wyświetl większą mapę</a></small>
</body>
</html>

Teraz, gdy otworzysz swoją stronę w przeglądarce, mapa będzie widoczna. Gratulacje! To już prawie wszystko.

A co jeśli chcesz coś bardziej zaawansowanego?

Osadzenie mapy za pomocą iframe jest super proste, ale jeśli chcesz mieć większą kontrolę nad jej wyglądem czy funkcjonalnością, możesz skorzystać z biblioteki Leaflet.js. Pozwoli Ci to np. dodawać markery, zmieniać styl mapy i wiele więcej.

Jak korzystać z Leaflet.js?

Oto szybki przewodnik.

1. Dodaj bibliotekę Leaflet.js do swojej strony

W nagłówku swojej strony (czyli między <head> a </head>) dodaj poniższy kod:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

2. Utwórz kontener na mapę

W pliku HTML wstaw element <div> o określonym identyfikatorze:

<div id="map" style="height: 400px;"></div>

3. Dodaj kod JavaScript

Pod kodem HTML (np. przed zamknięciem tagu <body>) wklej poniższy skrypt:

<script>
    // Inicjalizacja mapy
    var map = L.map('map').setView([51.505, -0.09], 13); // Ustaw współrzędne i zoom

    // Dodanie warstwy mapy z OpenStreetMap
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '© OpenStreetMap'
    }).addTo(map);

    // Dodanie markera
    var marker = L.marker([51.505, -0.09]).addTo(map);
    marker.bindPopup("<b>Witaj!</b><br>To jest moja mapa.").openPopup();
</script>

4. Efekt końcowy

Twoja strona będzie teraz wyglądać mniej więcej tak:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mapa z Leaflet.js</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
</head>
<body>
    <h1>Moja mapa z OpenStreetMap</h1>
    <div id="map" style="height: 400px;"></div>
    <script>
        var map = L.map('map').setView([51.505, -0.09], 13);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '© OpenStreetMap'
        }).addTo(map);

        var marker = L.marker([51.505, -0.09]).addTo(map);
        marker.bindPopup("<b>Witaj!</b><br>To jest moja mapa.").openPopup();
    </script>
</body>
</html>

Osadzenie mapy z OpenStreetMap to świetny sposób na wzbogacenie swojej strony internetowej. Możesz to zrobić w prosty sposób za pomocą iframe lub bardziej zaawansowany z użyciem Leaflet.js. Bez względu na to, którą opcję wybierzesz, OSM daje Ci ogromne możliwości za darmo.