Changes between Version 1 and Version 2 of MapServerTutorial
- Timestamp:
- 04/07/08 05:20:31 (17 years ago)
Legend:
- Unmodified
- Added
- Removed
- Modified
-
MapServerTutorial
v1 v2 4 4 == Introduction == 5 5 6 This tutorial describe how build a web-based mapping application using the Fusion and MapServer. It assumes you are familiar with MapServer and it PHP extension.6 This tutorial describes how build a web-based mapping application using the Fusion and MapServer. It assumes you are familiar with MapServer and it PHP extension. 7 7 8 8 == Essential Concepts == 9 9 10 It is very important that you understand how MapServer works. If you are not familiar with MapServer and creating MapFile, please review theMapServer documentation ([http://mapserver.gis.umn.edu/docs]).10 It is very important that you understand how !MapServer works. If you are not familiar with !MapServer and creating !Map Files, please review the !MapServer documentation ([http://mapserver.gis.umn.edu/docs]). 11 11 12 Fusion is all about creating a web application. You will need some familiarity with HTML, JavaScript and CSS.12 Fusion is all about creating a web application. You will need some familiarity with HTML, !JavaScript and CSS. 13 13 14 The primary development language for building Fusion applications is JavaScript, but if you need to add server-side functionality using the PHP/MapScript extension ofMapServer, then a knowledge of PHP is also required.14 The primary development language for building Fusion applications is !JavaScript, but if you need to add server-side functionality using the PHP/!MapScript extension of !MapServer, then a knowledge of PHP is also required. 15 15 16 16 Fusion makes extensive use of static and dynamically generated HTML. You need to be familiar with the Document Object Model (DOM) implemented by various browsers, and the subtle differences between the browsers in how scripting with the DOM works. Although it is possible to use Fusion without any DOM scripting, it is likely that most applications will need to use some scripting to achieve their desired functionality. 17 17 18 Fusion makes extensive use of CSS to achieve its look and feel in a minimally intrusive way. The design principle behind much of the structure of the user interface components of Fusion is to let the browser do as much of the work as possible with its native layout engine. This is the most efficient and natural design for web pages, and reduces the amount of javascript code that needs to be executed by the client's browser. You will need to thoroughly understand CSS design and implementation concepts in order to fully customize the Fusion interface, but to use the default look and feel of Fusion with moderate customization does not require advanced CSS knowledge.18 Fusion makes extensive use of CSS to achieve its look and feel in a minimally intrusive way. The design principle behind much of the structure of the user interface components of Fusion is to let the browser do as much of the work as possible with its native layout engine. This is the most efficient and natural design for web pages, and reduces the amount of !JavaScript code that needs to be executed by the client's browser. You will need to thoroughly understand CSS design and implementation concepts in order to fully customize the Fusion interface, but to use the default look and feel of Fusion with moderate customization does not require advanced CSS knowledge. 19 19 20 20 == Tutorial Prerequisites == 21 21 22 22 * '''Fusion''': [http://trac.osgeo.org/fusion/wiki/GetIt] 23 * ''' MapServer gmap-ms46 sample data''': [http://dl.maptools.org/dl/]23 * '''!MapServer gmap-ms46 sample data''': [http://dl.maptools.org/dl/] 24 24 * [http://trac.osgeo.org/fusion/attachment/wiki/MapServerTutorialFr/icons-demo.zip?format=raw Icons] 25 25 26 26 == Installation == 27 27 28 Installing Fusion is very simple. Of f course, i assume you have a functionnal web server with MapServer installed. Once you have downloaded Fusion and gmap-ms46, next step is to extract them. In my example, '''/opt/fgs/www/htdocs/''' is my web folder.28 Installing Fusion is very simple. Of course, this assumes you have a functionnal web server with !MapServer installed. Once you have downloaded Fusion and gmap-ms46, next step is to extract them. In this example, '''/opt/fgs/www/htdocs/''' is the web server's document root. 29 29 {{{ 30 30 $ unzip fusion-1.0.4.zip -d /opt/fgs/www/htdocs/ … … 32 32 }}} 33 33 34 Fusion and MapServer data are installed for the demo.34 Now Fusion and the !MapServer data are installed for the tutorial. 35 35 36 36 == Configuration == 37 37 38 We will now configure Fusion. There is only one file for the general configuration of Fusion: '''config.json'''. In this file, you can modify the script language use by Fusion (only PHP is supported at the moment) and some web paths will depend on the server configuration. For this tutorial, i did not modify because those default was correct. However, you should verify if the web paths forMapServer and the temporary directory are correct. The default directory for temporary files is set to '''"/tmp"'''. Be sure that your php configuration have the same path. (php5.ini should have a line like: session.save_path = "/tmp")38 We will now configure Fusion. There is only one file for the general configuration of Fusion: '''config.json'''. In this file, you can modify the script language use by Fusion (only PHP is supported at the moment) and some web paths will depend on the server configuration. For this tutorial,we will not modify them because the default are correct. However, you should verify if the web paths for !MapServer and the temporary directory are correct. The default directory for temporary files is set to '''"/tmp"'''. Be sure that your php configuration have the same path. (php5.ini should have a line like: session.save_path = "/tmp") 39 39 {{{ 40 40 ... … … 44 44 }}} 45 45 46 '''Note: on windows, you need to specify the {{{.exe}}} extension on mapserv, i.e. {{{/cgi-bin/mapserv.exe}}}''' 47 46 48 == Fusion Application == 47 49 … … 49 51 50 52 * a Map widget 51 * a Zoom Inwidget52 * a Zoom Outwidget53 * a Panwidget54 * a Legendwidget53 * a [wiki:Widgets/Zoom Zoom In] widget 54 * a [wiki:Widgets/Zoom Zoom out] widget 55 * a [wiki:Widgets/Pan Pan] widget 56 * a [wiki:Widgets/Legend Legend] widget 55 57 56 These widgets must be described in a xml file named ApplicationDefinition. This file describe the configuration of a Fusion application: mapfile, res source, widgets. This file will contain a MapFile tag for MapServer and all desired widgets (Widget tag) inside the tag WidgetSet (see the ApplicationDefinition page for a more complete description).58 These widgets must be described in a xml file named ApplicationDefinition. This file describe the configuration of a Fusion application: mapfile, resources, and widgets. This file will contain a MapFile tag for !MapServer and all desired widgets (Widget tag) inside the tag [wiki:ApplicationDefinition/WidgetSet WidgetSet]. 57 59 58 60 First, create a directory for the application and extract the icons downloaded inside this directory. These icons will be used by the widgets. … … 62 64 }}} 63 65 64 Still in this directory, create a new file named ''' ApplicationDefinition.xml''' and copy the following content inside:66 Still in this directory, create a new file named '''!ApplicationDefinition.xml''' and copy the following content inside: 65 67 {{{ 66 68 <?xml version="1.0" encoding="UTF-8"?> … … 142 144 }}} 143 145 144 Don't forget to modify the path of the mapfile ( MapFile tag). If you check the file, you will notice there is a Widget tag for all functionality with its options. Most of which are not required for this tutorial. Create now a HTML template page named '''index.html''' for Fusion.146 Don't forget to modify the path of the mapfile (!MapFile tag). If you check the file, you will notice there is a Widget tag for all functionality with its options, most of which are not required for this tutorial. Create now a HTML template page named '''index.html''' for Fusion. 145 147 {{{ 146 148 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
