Jak dodać lokalizacje na mapach w Drupalu? Praktyczny przewodnik krok po kroku

W poniższym wpisie przedstawię kompletny przewodnik, jak stworzyć stronę z mapą oraz lokalizacjami dostawców w Drupalu. To rozwiązanie opiera się na darmowych narzędziach, takich jak OpenStreetMap oraz moduły Geofield i Leaflet. Co najważniejsze, aby osiągnąć ten efekt, nie potrzebujesz żadnej wiedzy programistycznej - wszystko można skonfigurować za pomocą interfejsu Drupala. Zachęcam do przeczytania artykułu lub obejrzenia wideo z serii Nowoczesny Drupal.

1. Wymagane moduły i narzędzia

Aby stworzyć mapę z lokalizacjami dostawców, konieczne będzie zainstalowanie kilku modułów i narzędzi. Poniżej lista niezbędnych komponentów:

• Geofield – dodaje pole do przechowywania współrzędnych geograficznych.
• Geocoder – umożliwia konwersję adresu (tekstu) na współrzędne geograficzne (szerokość i długość).
• Address – moduł do obsługi szczegółowych danych adresowych.
• Leaflet – pozwala na wyświetlanie map OpenStreetMap w Drupalu.

2. Instalacja i konfiguracja modułów

Poniżej znajduje się instrukcja, jak krok po kroku zainstalować i skonfigurować moduły w Drupalu oraz przygotować środowisko do stworzenia mapy dystrybutorów.

Krok 1: Instalacja wymaganych modułów

1. Przejdź do zakładki Rozszerzenia i włącz następujące moduły:
   • Geofield
   • Geocoder
   • Address
   • Leaflet (wraz z modułem dodatkowym - Leaflet Views)

2. Za pomocą Composera zainstaluj bibliotekę geocoder.php:

composer require geocoder-php/geocoder

3. Zarejestruj się na stronie OpenRouteService, aby uzyskać klucz API do geokodowania.

Krok 2: Konfiguracja geokodowania

1. Przejdź do Konfiguracja > System > Geocoder.
2. W zakładce Providers wybierz OpenRouteService i wpisz uzyskany klucz API.
3. Zapisz ustawienia.

3. Tworzenie rodzaju zawartości z polami adresu i lokalizacji

Aby dodać dane dostawców wraz z lokalizacjami, stwórz nowy rodzaj zawartości, np. “Dystrybutorzy”.

W ramach tej zawartości skonfiguruj następujące pola:

• Adres (typ: Address) – obsługuje dane adresowe, takie jak ulica, kod pocztowy, miasto.
  • Ustaw dozwolone kraje, np. Polska, Wielka Brytania, Stany Zjednoczone.
  • Wybierz pola adresu, jakie chcesz mieć dostępne w swoim rodzaju zawartości, np. Organization, Adres line 1, Adres line 2, Postal code, Locality
• Location (typ: Geofield) – przechowuje współrzędne geograficzne:
  • W konfiguracji wybierz Geocode from existing field i wskaż pole “Adres”.
  • Zaznacz, że geokodowanie ma korzystać z providera OpenRouteService.
• Body – dodatkowe informacje o dystrybutorze.
• Image – pole na zdjęcie dystrybutora.

4. Dodawanie lokalizacji na mapie

Po stworzeniu rodzaju zawartości możesz dodać pierwszych dystrybutorów:

1. Przejdź do Utwórz > Dystrybutorzy.
2. Wypełnij formularz:
   • Adres (np. Twardowskiego 3, 35-302 Rzeszów).
   • Pole Location wypełni się automatycznie dzięki geokodowaniu.
   • Dodaj zdjęcie oraz treść opisową.
3. Zapisz zawartość. Marker z lokalizacją automatycznie pojawi się na mapie.

5. Tworzenie widoku z mapą i listą dostawców w Drupalu

Aby wyświetlić mapę w Drupalu z wszystkimi lokalizacjami dystrybutorów oraz listą, utwórz nowy widok:

1. Przejdź do Struktura > Widoki > Dodaj widok.
2. Skonfiguruj widok:
   • Typ zawartości: Dystrybutorzy.
   • Filtry: Opublikowane.
   • Format: Leaflet Map (dostępny po instalacji modułu Leaflet Views).
3. W ustawieniach mapy skonfiguruj tooltipy:
   • Tooltip Title: np. „Kliknij po więcej informacji”.
   • Tooltip Content: Pole Body.
4. Dodaj załącznik (attachment) z listą dostawców i dołącz go do strony.
5. Opcjonalnie dostosuj styl mapy i układ za pomocą CSS.

6. Efekt końcowy dla mapy dystrybutorów w Drupalu

Po wykonaniu powyższych kroków otrzymasz stronę, na której:

• Wyświetlana jest mapa z markerami wskazującymi lokalizacje dystrybutorów.
• Marker zawiera tooltip z nazwą i opisem.
• Pod mapą (lub obok niej, po ostylowaniu) znajduje się lista wszystkich dystrybutorów.

Mapy dystrybutorów w Drupalu - podsumowanie

Stworzenie mapy z lokalizacjami dystrybutorów w Drupalu jest prostsze, niż mogłoby się wydawać. Dzięki modułom Geofield, Geocoder i Leaflet oraz darmowym mapom OpenStreetMap możesz osiągnąć zaawansowany efekt bez konieczności pisania kodu. Cały proces polega na instalacji odpowiednich modułów, skonfigurowaniu geokodowania oraz utworzeniu widoku. Takie rozwiązanie jest łatwe do wdrożenia i w pełni darmowe. Jeśli jednak w trakcie napotkasz jakieś problemy lub planujesz bardziej złożone wdrożenia na Drupalu i potrzebujesz wsparcia, nasi doświadczeni specjaliści chętnie pomogą w każdym z przypadków.

***
Ten artykuł powstał na bazie materiału wideo. Zapraszamy do subskrybowania kanału Nowoczesny Drupal, gdzie w każdy piątek o 12:00 publikujemy nowy film. Nasi eksperci prezentują rozwiązania lub gotowe narzędzia, które pomogą Ci wykorzystać pełen potencjał Drupala.