MapServer WebGIS CREATING DEMO APPLICATION
For more convenience, we will use GIS-based Web application demo MapServer and Chameleon framework that can be downloaded at
title="http://www.hatma.info/download/gis/Demo_MapServer.zip .">http://www.hatma.info/download/gis/Demo_MapServer.zip. After the download is complete, extract its contents into the appropriate directory, ie: apps, http.d and Apache / htdocs, the directory ms4w you. Then restart Apache by executing apache-restart.bat. Open http://localhost with a web browser, then click the demo link on the "Hatma Suryotrisongko Web GIS Demo URLs: "(http://localhost/demo/demo.phtml) Link URL demo program, on the main page Display Web GIS Demo www.hatma.info 1 WebgGIS with MapServer - MapLab - Chameleon - PostGIS
HTML FILE AND PHTML Two main file located in D: \ ms4w \ apps \ demo \ samples \ htdocs, namely: demo.html Contains templates for interface applications, with source code / standard HTML tags and program / tag Chameleon framework, characterized by the dean opened and closed tags <cwc2 ...> with </ cwc2> <! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN"> <html> <head> <title> Web GIS Demo </ title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> ............................... ff ................................... <script language="JavaScript" type="text/javascript"> ............................... ff ................................... //--> </ Script> href="sample.css" <link rel="stylesheet" type="text/css"> </ Head> <body onLoad="myOnLoad()"> <form method="post"> ............................... ff ................................... <div id="MainMapLayer" name="MainMapLayer"> <! - MapDHTML -> <Cwc2 type = "MapDHTML" visible = "true" width = "400" height = "300" allowresize = "true" marqueecolor = "FF3333" marqueewidth = "2" minscale = "1" bordercolor = "# 0000ff" borderwidth = "0 "/></ div> ............................... ff ................................... <! - That include the javascript code manages the DHTML layers -> src="sample.js" language="JavaScript" <script type="text/javascript"> </ script> </ Form> </ Body> </ Html> The contents of the file demo.html demo.phtml Contains the main class calls Chameleon, defines the template file and map file <? Php include ("../../ htdocs / chameleon.php "); www.hatma.info 2 WebgGIS with MapServer - MapLab - Chameleon - PostGIS $ SzTemplate = ". / Demo.html"; $ SzMapFile = ".. / map / chameleon.map"; SampleApp class extends Chameleon { SampleApp function () { parent:: Chameleon (); $ This-> moMapSession = new MapSession_RW; $ This-> moMapSession-> setTempDir (getSessionSavePath ()); } } $ OApp = new SampleApp (); $ OApp-> registerSkin ('skins / sample'); $ OApp-> CWCInitialize ($ szTemplate, $ szMapFile); $ OApp-> CWCExecute (); ?> The contents of the file demo.phtml
DATA SHP Spatial map data stored in ESRI shp format in the directory D: \ ms4w \ apps \ demo \ samples \ data. o raster image: bathymetry layer (bath_mapserver.tif) o polygon: land_fn layer (land_fn.shp); layer park (park.shp); layer drain_fn (Drain_fn.shp); drainage layer (drainage.shp) o line: layer prov_bound (province.shp); layer fedlimit (fedlimit.shp); layer rail (rail.shp); Layer Road (road.shp); o point: layer popplace (popplace.shp); o grid: grid layer (grid.shp)
CONFIGURATION FILE (CHAMELEON.MAP) The configuration file (*. map) is located in D: \ ms4w \ apps \ demo \ samples \ folder, (chameleon.map) which consists of several parts. Among others: • common definitions # # Start of map file # # Sample map file for a Chameleon app. www.hatma.info 3 WebgGIS with MapServer - MapLab - Chameleon - PostGIS # NAME DEMO STATUS ON SIZE 400 300 SYMBOLSET .. / etc / symbols.sym Extents -712 631 -2594561 3467361 3840000 Units Meters SHAPEPATH ".. / data" IMAGECOLOR 255 255 255 FONTSET .. / etc / fonts.txt TRANSPARENT FALSE • Web interface definition # # Start of web interface definition # WEB # MINSCALE 2000000 # MAXSCALE 50000000 # # On Windows systems, / tmp and / tmp / ms_tmp / Should Be created at the root # Of the drive Nowhere the. MAP file resides. # ImagePath "/ ms4w/tmp/ms_tmp /" ImageUrl "/ ms_tmp /" # LOG "/ tmp / gmap.log" Metadata END END • map reference # # Start of reference map # REFERENCE IMAGE images / keymap.gif Extents -712 631 -2594561 3467361 3840000 STATUS ON COLOR -1 -1 -1 OUTLINECOLOR 255 0 0 SIZE 120 1990 END • scale # # Start of scalebar # www.hatma.info 4 WebgGIS with MapServer - MapLab - Chameleon - PostGIS SCALEBAR IMAGECOLOR 255 255 255 LABEL COLOR 0 0 0 SIZE SMALL END SIZE 150 5 COLOR 255 255 255 BACKGROUNDCOLOR 0 0 0 OUTLINECOLOR 0 0 0 Units kilometers Intervals 5 STATUS ON END • mechanism of cartography as a result of the query process QUERYMAP STYLE HILITE COLOR 255 0 0 END • map projection system Projection "Init = EPSG: 42304" END Layer Definitions: • bathymetry layer (bath_mapserver.tif), raster image Layer GROUP "Raster" NAME bathymetry Metadata "DESCRIPTION" "Elevation / bathymetry" "GROUP" "Raster" "Layer" "bathymetry" END TYPE raster STATUS ON DATA bath_mapserver.tif Projection "Init = EPSG: 42304" END END • Examples of polygon-type layer: layer land_fn (land_fn.shp) www.hatma.info 5 WebgGIS with MapServer - MapLab - Chameleon - PostGIS Layer GROUP "Polygon" NAME land_fn Metadata "DESCRIPTION" "Foreign Lands" "GROUP" "Polygon" "Layer" "land_fn" END TYPE polygon STATUS ON DATA land_fn CLASS NAME "Foreign Lands" COLOR 240 240 240 OUTLINECOLOR 199 199 199 END Projection "Init = EPSG: 42304" END END • Example of layer-type line: layer prov_bound (province.shp) Layer GROUP "Line" NAME prov_bound Metadata "DESCRIPTION" "Province" "GROUP" "Line" "Layer" "prov_bound" END LINE TYPE STATUS ON DATA province CLASS NAME "Province" COLOR 120 120 120 END Projection "Init = EPSG: 42304" END END • Example of layer-type point: layer popplace (popplace.shp) Layer GROUP "Point" NAME popplace Metadata "DESCRIPTION" "Cities" www.hatma.info 6 WebgGIS with MapServer - MapLab - Chameleon - PostGIS "RESULT_FIELDS" "NAME" "GROUP" "Point" "Layer" "popplace" END TYPE POINT STATUS ON DATA popplace LabelItem "Name" CLASSITEM "Capital" CLASS EXPRESSION "1" TEMPLATE "ttt_query.html" SYMBOL 2 SIZE 8 NAME "Cities" LABEL COLOR 255 0 0 FONT-italic fritqat TYPE truetype SIZE 8 AUTO POSITION PARTIALS FALSE OUTLINECOLOR 255 255 255 END COLOR 0 0 0 END CLASS EXPRESSION / 2 | 3 / TEMPLATE "ttt_query.html" 7 SYMBOL SIZE 6 NAME "Cities" LABEL COLOR 0 0 0 FONT fritqat TYPE truetype SIZE 8 AUTO POSITION PARTIALS FALSE OUTLINECOLOR 255 255 255 END COLOR 0 0 0 END Tolerance 5 Projection "Init = EPSG: 42304" END END www.hatma.info 7 WebgGIS with MapServer - MapLab - Chameleon - PostGIS • layer grid (grid.shp) Layer GROUP "Grid" NAME "grid" Metadata "DESCRIPTION" "Grid" "GROUP" "Grid" "Layer" "grid" END LINE TYPE STATUS OFF DATA "grid" CLASS NAME "Graticule" COLOR 0 0 0 END Projection title=""init=epsg:42304"">"Init = EPSG: 42304" END END More see the file chameleon.map on D: \ ms4w \ apps \ demo \ samples \ folder \ chameleon.map
CONFIGURATION FILE ADMINISTRATION USING MAPLAB In order to more easily and avoid writing the wrong configuration file, provided Web-based administration page that can be accessed by address http://localhost/maplab/. Although there are 3 main features (MapEdit, MapBrowser and GmapFactory), to create / change the map configuration file (*. map) we use MapEdit menu. Figure MapEdit start page www.hatma.info 8 WebgGIS with MapServer - MapLab - Chameleon - PostGIS MapEdit was opening a map from a sample configuration file above the web GIS The test configuration we have created, by clicking the preview button Preview chameleon.map configuration files on MapEdit