Kartografia internetowa

Ćwiczenie 5 - Prosty interfejs użytkownika

Plik szablonu-Templete File  Formularz  Zadanie 9  Zmiana struktury aplikacji  Pan i Zoom 

Plik szablonu - Template file

Poprzednie ćwiczenia koncentrowały się na wyświetlaniu w przeglądarce map statycznych. Jednak podstawowym powodem wykorzystania Mapservera jest możliwość tworzenia map dynamicznych. Aby to było możliwe konieczny jest kolejny, ostatni już element aplikacji czyli Plik Szablonu. Jest to dokument HTML, w którym określamy wygląd aplikacji oraz za pomocą formularza i odpowiednich zmiennych ukrytych przekazujemy polecenia serwerowi. Stosuje się w nim tzw. "tagi", które po wywołaniu szablonu za pomocą strony inicjalizujacej zamieniane są na rzeczywiste wartości danych parametrów lub też stanowia polecenia do wykonania przez serwer. Prosty szablon wygląda następująco:

<html>
<head>
	<title>Przykładowy plik szablonu</title>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" >
	
</head>

	<body>

<!--Początek formularza-->

	<form method="GET" action="/cgi-bin/mapserv">

<!--Zmienne ukryte-->

       		<input type="hidden" name="map" value="[map]">
          	<input type="hidden" name="layers" value="[layers]">
	  	<input type="hidden" name="mode" value="browse">
	  	<input type="hidden" name="imgext" value="[mapext]">
	  	
<!--Wyświetlana mapa dynamiczna-->
	 
	     <input type="image" name="img" src="[img]"  width="600" height="400">
	
</form>

<!--Koniec formularza-->
	</body>
</html>

Formularz

Jak widać głównym elementem szablonu z naszego punktu widzenia jest formularz html. W większości serwisów internetowych formularze wykorzystywane są do konstruowania różnego rodzaju ankiet, pól wyboru itp. funkcji służących do pozyskiwania i przekazywania np. za pomocą poczty elektronicznej informacji pochodzących od użytkownika strony do jej właściciela. W szablonie Mapservera służą również temu samemu z tym, że odbiorcą jest skrypt CGI, czyli Mapserver. O tym, że tak właśnie jest mówią nam atrybuty znacznika <form> czyli:

method="GET"

Powyższy atrybut określa na sposób przesyłania informacji. W dużym skrócie użycie GET oznacza, że informacje zostaną zakodowane w formie ścieżki URL i w ten sposób potraktowane przez serwer. Natomiast

action="/cgi-bin/mapserv"

określą akcję do wykonania w tym wypadku jest to ścieżka dostępu, pod którą znajduje się Mapserver.

Kolejna część formularza to tzw. zmienne ukryte. Dzięki zastosowaniu parametru hidden nie są one widoczne w przegladarce. W każdej zmiennej wartość atrybutu name to nic innego jak polecenie Mapservera. Analogicznie do struktury ścieżki dostępu zawartej na stronie inicjalizującej tagi [map] oraz [layers] zamienione zostaną odpowiednio na ścieżkę do pliku z rozszerzeniem .map oraz przez nazwy użytych warstw. Inaczej niż w poprzednich ćwiczeniach tryb wyświetlania (mode) powinien zostać ustawiony na "browse". Dodatkowo konieczne jest przesłanie informacji o współrzędnych wyświetlanej mapy, czemu służy polecenie i tag imgext.

Ostatnim elementem formularza jest sama mapa. Jest ona wyświetlana tam gdzie umieścimy tag [img]. Powyższy szablon umożliwia dynamiczną konstrukcję aplikacji, gdyż w zależności od wydanych przez użytkownika poleceń Mapserver modyfikuje odpowiednie zmienne i wyświetla wynikową mapę co pozwala uniknąć mozolnego konstruowania strony w oparciu o statyczne ścieżki dostępu.

ZADANIE 9. Utwórz według powyższych instrukcji w katalogu htdocs plik szablonu o nazwie mapa.html.

Zmiana struktury aplikacji

Mając gotowy plik szablonu możemy zmienić strukture aplikacji z uproszczonej do pełnej. Do dotychczasowych przykładów wykorzystywaliśmy wyłącznie plik inicjalizujący index.html. Teraz będzie on służył wyłacznie do, jak sama nazwa wskazuje zainicjalizowania skryptu CGI, natomiast wygląd mapy i jej zawartość tworzona będzie w oparciu o plik szablonu. W tym celu należy dokonać modyfikacji zarówno pliku kartografia.map jak i index.html.

W pierwszym przypadku niezbędne jest dodanie parametru TEMPLATE w obrębie obiektu WEB. W rezultacie będzie on wyglądał nastepująco:

WEB
	IMAGEPATH	"/var/www/tmp/"
	IMAGEURL	"/tmp/"
	TEMPLATE	"mapa.html"
END

Natomiast w pliku index.html dotychczas ścieżka dostępu z poleceniami dla Mapservera umieszczona była jako parametr znacznika IMG natomiast w celu wykorzystania szablonu powinna znaleźć się jako cel dla odsyłacza. Ponadto aby stworzyć mapę dynamiczną konieczna jest zmiana wartości polecenia mode na "browse". Czyli zamiast:

<img src="/cgi-bin/mapserv?map=/var/www/Kartografia1/kartografia.map&layer=lasy&mode=map"> </img>

powinno się znaleźć:

<a href="/cgi-bin/mapserv?map=/var/www/Kartografia1/kartografia.map&layer=lasy&mode=browse"> MAPA</a>

Tym sposobem po wyświetleniu strony index.html ukaże się link tekstowy MAPA, po którego uruchomieniu wyświetlona zostanie mapa z wykorzystaniem pliku szablonu. W celach estetycznych, gdy na przykład strona składa się wyłącznie z aplikacji Mapservera możliwe jest zrezygnowanie z wyświetlania linku inicjalizującego między innymi przez zmiane parametrów META, niemniej zawsze musi być on obecny.

ZADANIE 10. Zmodyfikuj według powyższych wytycznych plik index.html i wyświetl mapę w przeglądarce. Zobacz źródło strony. Kliknij na obrazek. Tak właśnie zachowuje się mapa w trybie browse

Panning i Zoom

Po prawidłowym wykonaniu poprzedniego zadania powinny nastąpić dwie rzeczy. Po pierwsze po użyciu w przeglądarce opcji Pokaż źródło widzimy znajomy szablon ale zamiast tagów Mapserevera wyświetlone są rzeczywiste wartości tzn. współrzędne, nazwy warstw itp. Po drugie, po kliknięciu na mapę jest ona przesuwana i środek okna znajduje się w miejscu kliknięcia myszy. To jest tzw "panning"zapewniany przez tryb wyświetlania "browse". Oprócz dość prostego przesuwania mapa dynamiczna umożliwia dodanie licznych innych funkcji interfejsu użytkownika takich jak np. powiększanie i pomniejszanie skali. Tą i wszystkie inne opcje dodajemy jako kolejne polecenia wewnątrz utworzonego wcześniej formularza. I tak dodanie:

<select name="zoom">
              
            <option value="2" [zoom_2_select]>Powiększ 2x</option>
            <option value="1" [zoom_1_select]>Przesuwanie</option>
            <option value="-2" [zoom_-2_select]>Pomniejsz 2x</option>
                 
</select>
    

spowoduje, że do strony zostanie dodane rozwijane menu (tworzone przez select) z trzema opcjami do wyboru. Wybranie którejkolwiek z nich spowoduje, że po odświeżeniu strony, co następuje za każdym razem kiedy klikniemy na mapie, do Mapservera zostanie wysłana informacja, że zmienną zoom ( o tym mówi atrybut "name") należy zmienić na podaną wartość (którą wskazuje atrybut "value"). Wartość 1 nie powoduje zmiany skali (inaczej mówiąc - skala mnożona jest przez podany współczynnik). Podpisy do opcji są oczywiście dowolne. Jak można zauważyć obecne są też dodatkowe tagi np. [zoom_1_select]. Mapserver interepretując je sprawdza czy dana wartość (w tym przypadku 1) jest wybrana, jeśli tak w miejsce taga wstawiany jest atrybut selected.