Vytváření stránek pomocí šablon
Doposud jsme vytvářeli mapu velmi primitivně. MapServer ovšem umí velmi užitečnou věc: vytvářet internetové stránky na základě uživatelem definovaných šablon. Jedná se v podstatě o jednoduchou HTML stránku, do které jsou na potřebných místech do hranatých závorek vepsány „tagy”, za které MapServer doplní případný text. Jednoduchou šablonu si nyní vytvoříme a postupně ji budeme rozšiřovat.
Než se šablonou začneme
Protože chceme vytvořit již složitější aplikaci, měli bychom se nejdříve zmínit o tom, jak je MapServer v podstatě ovládán a něco o celkovém vzhledu mapových aplikací.
Můj problém je, že nejsem ani internetový, ani jakýkoliv jiný grafik. Něco jsem si k dané problematice sice přečetl, snažím se řídit několika zásadami, to ovšem nenahradí grafické (umělecké) cítění. Níže zmíněná doporučení berte prosím jako doporučení někoho, kdo se s grafikou na webu od začátku nemá rád, ale snaží se podle svého nejlepšího svědomí s ní nějak férově vyjít.
Jak se MapServer ovládá
Bystřejší z vás to již dávno vědí. MapServer je CGI program, jemuž nejsnáze předáme parametry pomocí formulářových polí. Ta mohou být buď „zjevná” (tedy například typu text a dalších), nebo skrytá (typ hidden). Hodnoty v těchto polích můžeme nastavit buď přímo – klikem myši nebo vstupem z klávesnice, nebo nepřímo, pomocí JavaScriptových funkcí. JavaScript celou webovou stránku na straně klienta pěkně rozhýbe: tlačítka se vyzdvihují a zamačkávají, po najetí myši se pěkně mění, ostřikovače ostřikují a stěrače stírají. Ze začátku se budeme zabývat jednoduchými formulářovými poli, v budoucnosti se ale bez trochy JavaScriptu neobejdeme.
Ať tak či tak, po stisknutí tlačítka „Zobraz mapu” musí být všechna pole formuláře nastavena na potřebné hodnoty.
Úskalí při návrhu stránky
Asi všichni máte po návštěvě některého z portálů celkem jasnou představu, co se všechno musí na stránku nějak „vmačkat”. Zmíním jen seznam vrstev, legendu, panel nástrojů s funkcemi pro zoom, unzoom, posun, tlačítko pro reload, měřítko a samozřejmě vlastní mapa, v ideálním případě s přehledkou. Nyní musíme vyřešit nerudovskou otázku: „Kam s tím?“ a webmasterovskou otázku: „Jak s tím?“.
Všeobecně se na webu již dávno opustilo od tzv. tabulkového layoutu. Vzhled stránek a umístění jednotlivých prvků již není nastavován pomocí komplikovaných a nejraději vnořených tabulek. Přednost se dává řešení uzavírat bloky do divů a nastavit jejich pozici a vzhled v souboru s kaskádovými styly. A jaké řešení zvolíme my?
Samozřejmě tabulkami, jsou totiž nejsnazší na formátování. Nechceme vytvořit hned graficky vyladěnou aplikaci, na to jsou jiné servery. Jde nám o funkcionalitu. Komu se to nelíbí, může samozřejmě následující šablonu psát pomocí divů – nejdůležitější jsou klíčová slova v hranatých závorkách, která bude MapServer nahrazovat.
První šablona
Bez velkých okolů hurá do toho. Vyvořte soubor /var/mapservdata/tmpls/jezera.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html lang="cs">
<head>
<meta http-equiv="Content-language" content="cs">
<meta http-equiv="Content-type" CONTENT="text/html; charset=iso-8859-2">
<meta name="resource-type" content="document">
<title>Moje první Mapserveří aplikace</title>
</head>
<body>
<h1>Budiž mapa</h1>
<!-- formulář s mapou -->
<form name="mapserv" method="get" action="/cgi-bin/mapserv">
<!-- skryté proměnné -->
<input type="hidden" name="imgext" value="[mapext]">
<input type="hidden" name="imgxy" value="199.5 149.5">
<input type="hidden" name="mode" value="browse">
<input type="hidden" name="map" value="[map]">
<!-- /skryté proměnné -->
<!-- tabulka s mapou a formulářovými políčky -->
<table border=1 >
<tr>
<td colspan=2>
<input type="radio" name="zoomdir" value="1" [zoomdir_1_check]> Zvětšení |
<input type="radio" name="zoomdir" value="0" [zoomdir_0_check]> Posun |
<input type="radio" name="zoomdir" value="-1" [zoomdir_-1_check]> Zmenšení |
<input type="text" name="zoomsize" size="1" value="2"> Zoom faktor
</td>
</tr>
<tr>
<td>
<!-- obrázek s mapou -->
<input type="image" name="img" src="[img]" width="400" height="300" border="0">
<!-- /obrázek s mapou -->
</td>
</tr>
</table>
<!-- /tabulka s mapou a formulářovými políčky -->
<input type="submit" value="Obnovit">
</form>
<!-- /formulář s mapou -->
</body>
</html> Ještě musíme doplnit do našeho mapfilu nový objekt – WEB. Někam na začátek souboru (například mezi řádky FONTSET a LAYER vložte následující řádky:
WEB
TEMPLATE "/var/mapservdata/tmpls/jezera.html" # šablona pro HTML stránku
IMAGEPATH "/var/www/mapserver/temp/" # adresář, kam se budou ukládat obrázky
IMAGEURL "/mapserver/temp/" # URL adresáře s obrázky
END Ještě bych doporučil změnit status vrstvy modis na DEFAULT, abychom od začátku něco viděli.
Nyní již můžete nasměrovat svůj browser na adresu http://localhost/cgi-bin/mapserv?map=/var/mapservdata/jezera.map. Pokud se vám místo mapy objeví například hláška msSaveImageGD(): Unable to access file. Unable to open file /var/www/mapserver/temp/Jezera11279808574665.png for writing, nemáte pravděpodobně vytvořený adresář /var/www/mapserver/temp/, nebo k němu nemáte nastavena patřičná práva.
První šablona
Zatrhneme-li nyní políčko Zvětšení a klikneme myší někam do mapy, mapa se překreslí, a co víc, po reloadu stránky zůstane toto políčko zaškrtnuto (klíčová slova [zoomdir_1|0|-1_check]). V políčku zoomsize lze nastavit velikost zoomu.
První šablonu máme, příště se budeme věnovat jejímu vylepšování.
