Jak zrobić aktywną mapę Polski z wyborem województw?

Wyzwanie Załóżmy, że budujemy portal o tematyce zróżnicowanej w zależności od regionów czy województw Polski. Dla przykładu takie wyzwanie stało przed nami przy budowie strony dotacji UE na naszym portalu, a dokładniej dotyczące Regionalnych Programów Operacyjnych. Możecie tam zajrzeć i zobaczyć wynik poniższego rozwiązania. Oczywiście można tu znaleźć znacznie więcej przykładów zastosowań…

Rozwiązanie

Przedstawione rozwiązanie należy do najprostszych, nie wykorzystujących ani falsh ani żadnych bardziej zaawansowanych technik. Chodzi nam tu o prostotę i dostępność przykładu dla każdego.

• Najpierw przygotujemy Jommla! do tworzenia kontentu (artykułów) zróżnicowanego regionalnie (cały ten punkt nie jest obowiązkowy, jednak pokazuje, naszym zdaniem, dobre praktyki).
  • Dodajemy sekcję Regionalne Programy Operacyjne (proponuję też przeczytać artykuł dotyczący budowy drzewa tematycznego w Joomla!, można go znaleźć na naszym portalu tutaj», lub na pomoc.joomla.pl tutaj».)
  • W obrębie dodanej sekcji dodajemy listę kategorii z nazwami województw. Teraz każdy artykuł ustawiamy w zależności od regionu (Sekcja: Regionalne Programy Operacyjne, kategoria: dane województwo). Może się okazać, że jeden artykuł chcecie przypisać do kilku województw. Opis jak to zrobić znajdziecie na naszym portalu tutaj», albo na pomoc.joomla.pl tutaj».
  • Teraz musimy przygotować logiczną strukturę drzewa chociażby na potrzeby sitemap. My przyjęliśmy założenie, że cała treść budowana jest na drzewie głównego menu (chociaż wcale całości nie pokazujemy w tymże menu). Dzięki temu w prosty sposób buduje się nam mapa strony (moduł Xmap skonfigurowany na główne menu) i plik sitemap dla robota Google. A zatem na naszym portalu jest menu główne z gałęzią: „Jak kupić » Dotacje UE » Regionalne Programy Operacyjne » Województwo”. Konkretne obszary z mapki Polski będą wskazywały dane województwa z tego menu.
• Czas na przygotowanie grafiki mapy. Można sobie ją samemu narysować a można kupić gotową. My oczywiście kupiliśmy gotową stąd». Ważne aby pamiętać, że potrzebujemy grafikę wektorową nie bitmapę. To znacząco ułatwi dalsze prace (tworzenie obszarów).
  • Teraz należy otworzyć tą grafikę i dodać obszary dla danego URL. My zastosowaliśmy popularnego Adobe Fireworks. Naprawdę świetne narzędzie, szczególnie polecam dla tych, którzy mają do przygotowania sporo grafiki internetowej. W połączeniu z Adobe Photoshop i Adobe Ilustrator można czynić cuda…
  • A zatem klikamy kolejne województwa (we wskazanej grafice, każde województwo to osobny poligon) i z podręcznego menu (prawy przycisk myszki) wybieramy „insert hotspot”. Proponuję od razu nadać sobie odpowiednie nazwy utworzonych obszarów (pokażą się w części Web Layers). Oczywiście do każdego utworzonego obszaru należy dodać URL wskazujący na dany kontent (w naszym przypadku konkretną pozycję województwa z głównego menu).
  • I teraz ostatni ruch. Z głównego menu z File wybieramy Export i eksportujemy do „HTML and Images”. Powstanie nam plik z bitmapą mapy (wgrywamy do katalogów ze zdjęciami w Joomla!) oraz plik HTML. To co dla nas istotne to to, że w pliku HTM mamy dodefiniowane wszystkie obszary mapy i związane z nimi URL-e. Wystarczy to teraz przekopiować do Artykułu (wyświetlając oczywiście go jako kod HTML) i już gotowe.
• Wybrane województwo w innym kolorze. Aby uatrakcyjnić nasz portal postanowiliśmy po wybraniu danego województwa dalej pokazywać mapkę tylko podświetlając na pomarańczowo wybrane województwo. Jak to zrobić? Wystarczy zrobić tyle kopi mapy ile województw tylko zmieniając w każdej kolor jednego województwa i zapisać je jako bitmapy. Mamy już przecież wygenerowany plik HTML z opisanymi obszarami. Wystarczy, że wstawimy w każdym kontencie danego województwo inną bitmapę ale w artykule cały czas ten sam kod HTML i już.