Jquery Geo – czyli jak zbudować własną mapę w kilka minut

Jquery Geo to kolejny produkt na podstawie frameworku Jquery, który umożliwia szybkie i efektywne stworzenie własnego portalu mapowego podobnie do google maps. Narzędzia JQuery są oparte na kodzie css więc jeśli tylko mniej więcej orientujecie się jak odwołać się do elementów HTML za pomocą CSS nie powinniście mieć większego problemu ze składnią tego frameworka.
Szczegółowa dokumentacja dostępna jest pod adresem http://jquerygeo.com/
Tworzenie własnego portalu można zakończyć na czterech liniach kodu tj. odwołaniu się do biblioteki i wywołaniu funkcji odpowiedzialnych za wyświetlenie mapy.
Przykładowy najprostszy kod z dokumentacji wyświetlający mapę to:

<div id="map" style="height: 320px;"></div>
 <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
 <script src="https://code.jquerygeo.com/jquery.geo-1.0.0-b1.5.min.js"></script>
 <script>$(function() { $( "#map" ).geomap( ); });</script>

Ze względu na szalejące w Polsce wiatry przygotowałem prosty portal, który umożliwia generowanie na podstawie kliknięcia na mapie linku do portalu meteo.pl wywołującego prognozę pogody dla danego miejsca.
Dodałem również automatyczne wykrywanie przybliżone lokalizacji  użytkownika za pomocą przycisku.

Kod pisałem dość szybko, więc jeśli zauważycie jakieś błędy u góry jest mój adres mailowy.

Mapa dostępna jest tutaj.

Opis użycia: przycisk lokalizacja położenia wywołuje funkcji automatycznej lokalizacji pozycji. Ze względu na ochronę Waszej prywatności musicie na to pozwolić.

Przycisk pobierz prognozę dla dowolnego miejsca na mapie po aktywacji pozwala na pobranie aktywnej prognozy meteorologicznej dla wybranego miejsca na mapie. Wyłączenie funkcji następuje przez ponowne kliknięcie w przycisk. Aktywne wybieranie sygnalizowane jest kolorem czerwonym i zmianą kursora. Przeanalizujcie źródło strony. Nie jest długie ani mocno skomplikowane. Wystarczy zapisać stronę na dysku i zajrzeć do utworzonego folderu o nazwie zgodnej z zapisanym plikiem html. Powodzenia