JavaScript isn't enabled in your browser, so this file can't be opened. Enable and reload.

1 of 21

Web Map Interface Training ��for ETESP Package 39 – Part 2: Information Support for Management of Aceh’s Forest Resources��Patrick Fitzgerald: gis.patrick@gmail.com� Yuli Suharnoto: suharnoto@gmail.com �Benny Istanto: bennyistanto@gmail.com ��

2 of 21

Web Map Interface Training �Overview�

Module 1 – Web Services

WMS
MapServer

Module 2 – Web Site

HTML & DHTML
Ext JS

Module 3 – Web Mapping

OpenLayers
Vector Formats

Module 4 – Database Access

PostgreSQL/PostGIS
SQL
Spatial Queries

Module 5 – Web Application

PHP
XMLHttp Request�

Annex A – Reference Web Sites

Standards
Software
Examples

Annex B – Vector Formats

GeoJSON
GML
KML
WKT

3 of 21

Web Map Interface Training �Schedule�

Module 1 – Monday

2 hours

Module 2 – Tuesday

3 Hours

Module 3 – Wednesday

3 Hours

Module 4 – Thursday

2 Hours

Module 5 – Friday

2 Hours�

http://demo.opengeo.org/geoserver/wms?

http://127.0.0.1/cgi-bin/mapserv.exe?MAP=C:/mapfiles/2007_kopi_prod.map

Module 1

Module 2

Module 3

Module 4

Module 5

4 of 21

Web Map Interface Training �Module 1�

WMS� - Web Mapping Service (WMS)� - OpenGIS standard� - Uses HTTP to distribute geo-registered images (i.e. JPEG, PNG) of geospatial data � across the web� - Only image not the data�
WFS� - Web Feature Service (WMS)� - OpenGIS standard� - Distributes geographic features across web using XML/GML encoding standard� - Possible to perform spatial operations

5 of 21

Web Map Interface Training �Module 1�

WMS HTTP Request� - WMS HTTP requests use Internet Protocol (TCP/IP) to transfer images of geospatial � data (as JPEG, PNG etc)� - WMS requests may be HTTP GET or HTTP POST operations� - The following characters are for reserved usage��

6 of 21

Web Map Interface Training �Module 1�

WMS Service Operations� - 3 operations are defined for WMS� - GetCapabilities (Mandatory)� - GetMap (Mandatory)� - GetFeatureInfo (Optional)��

7 of 21

Web Map Interface Training �Module 1�

WMS Service Operations� - GetCapabilities (Mandatory)� - Purpose: Obtain service metadata information� - Parameters: HTTP request parameters displayed below� - Response: XML document�

http://demo.opengeo.org/geoserver/wms?SERVICE=wms&REQUEST=GetCapabilities

8 of 21

Web Map Interface Training �Module 1�

WMS Service Operations� - GetMap (Mandatory)� - Purpose: Obtain image of � geospatial data� - Parameters: HTTP � request parameters as � displayed� - Response: Image format � as specified�

9 of 21

Web Map Interface Training �Module 1�

WMS Service Operations� - GetFeatureInfo (Optional)� - Purpose: Obtain information about features on the map� - Parameters: HTTP request parameters displayed below� - Response: MIME type as specified �

10 of 21

Web Map Interface Training �Module 1�

Software Installed

MapServer
Mozilla FireFox
Notepadd++
uDig

Standards/Languages

WMS Standard
MAP file syntax

Exercises

Exercise 1 – Exploring WMS requests
Exercise 2 – Installing MapServer
Exercise 3 – Creating a Map: Introduction to the MAP file
Exercise 4 – Customising Your Map

11 of 21

Web Map Interface Training �Module 2�

HTML

Hyper Text Markup Language (HTML) is used to define a web document
HTML is comprised of markup tags, known as HTML tags <h1>Hello</h1>
Associated with keywords are attributes and values <h1 size=12>…

CSS

Cascading Style Sheets (CSS) is a language that defines how to display HTML � elements in a web page

Ext JS

ExtJS is a client-side JavaScript library for building customisable GUI internet applications.
ExtJS uses JavaScript API to provide HTML functionality such as tab panels, user input boxes, forms and toolbars that are graphically advanced

Apache� - For this training, the MS4W Apache install will be used to publish HTML documents �

12 of 21

Web Map Interface Training �Module 2�

Code Conventions
Global Variables

- Declared at the beginning of the document� - Global variables are visible throughout the document and within all functions��

Local Variables� - Visible only inside the functions they are declared within!��

13 of 21

Web Map Interface Training �Module 2�

Code Conventions
Functions� - Operations that perform a specific task� - A “main” function should be used to initiate and control the application� - Functions that exist within the “main” function are not visible from outside the � “main” function – in the same manner as variables ��

14 of 21

Web Map Interface Training �Module 2�

In the example we begin from the “main” function. A variable named “option” is passed to the “main()” function. For this example the option variable can be only a “drink” or “smoke”. Inside the “main()” function we declare a local variable – which is not visible to the other “orderDrink()” function. If the option value equals “drink” we call a function named “askDrink()” which is inside the “main()” function and therefore only visible to the “main()” function. The “askDrink()” function receives input from the user which is stored as a variable named “answer” declared as a global variable which in this example is either “Tea” or “Kopi”. Because the variable is global and we have assigned it a value, the value of “answer” is visible throughout the JavaScript document. Next “orderDrink()” is called with “answer” declared and global, the value of the “answer” variable is visible to “orderDrink()”. If the value of “answer” is “Tea” a tea order is placed otherwise a “Kopi” order is placed.

15 of 21

Web Map Interface Training �Module 2�

Software Installed

Mozilla FireBug
Ext JS 2.2

Standards/Languages

HTML
CSS
JavaScript
Ext API

Exercises

Exercise 1 – Apache
Exercise 2 – Using JavaScript
Exercise 3 – Ext JS Documentation
Exercise 4 – Implement Ext JS

16 of 21

Web Map Interface Training �Module 3�

OpenLayers� - OpenLayers is OpenSource JavaScript that implements OpenStandards (such as � WMS and WFS)� - OpenLayers is an OSGeo project�� OpenLayers API� - The OpenLayers Application Programming Interface (API) provides information on � OpenLayers objects, variables and functions ��

17 of 21

Web Map Interface Training �Module 3�

Software Installed

OpenLayers 2.8
MapFish 1.0

Standards/Languages

OpenLayers API

Exercises

Exercise 1 – OpenLayers API Documentation
Exercise 2 – OpenLayers API Examples
Exercise 3 – Include OpenLayers
Exercise 4 – A Web Map
Exercise 5 – OpenLayers Vector Formats

18 of 21

Web Map Interface Training �Module 4�

PostgreSQL/PostGIS

PostGIS ads support for geographic objects to the PostgreSQL object-relational database.
In effect, PostGIS “spatially enables” the PostgreSQL server, allowing it to be used as a backend spatial database for geographic information systems (GIS) including functions such as distance, area, union, intersection, and specialty geometry data types to the database

SQL

PostgreSQL, as the name suggests uses the Structured Query Language (SQL), which is a standard language for accessing and manipulating databases��

19 of 21

Web Map Interface Training �Module 4�

Software Installed

PostgreSQL/PostGIS

Standards/Languages

Structured Query Language (SQL)

Exercises

Exercise 1 – Install PostgreSQL/PostGIS
Exercise 2 – Create Database and add SHP file
Exercise 3 – Database Queries using SQL
Exercise 4 – Spatial Queries and OpenLayers

20 of 21

Web Map Interface Training �Module 5�

PHP

PHP is a widely-used general-purpose server side scripting language that is especially suited for Web development and can be embedded into HTML.

AJAX XMLHttpRequest

Client machines and client side scripting languages (such as JavaScript) cannot perform server side operations, such as can be achieved with PHP.
To communicate with the server (such as calling a PHP server side script) when using JavaScript, Asynchronous JavaScript and XML is required (AJAX). ��

21 of 21

Web Map Interface Training �Module 5�

Software Installed

-

Standards/Languages

PHP
XMLHttpRequest

Exercises

Exercise 1 – Database access with PHP
Exercise 2 – AJAX XMLHttpRequest
Exercise 3 – Presentation