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 ->
marqueecolor="FF3333""><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
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