Ga exercise1

Rostock University, Chair for Geodesy and Geoinformatics X 2007

GIS Advanced Topics, Part 1

Exercise 1

Simple Map Applicationsand UMN Map Server

Dr.-Ing. Peter Korduan

Click map

UMN Basics

Templates

Classification

Projection

Annotation

Rostock University, Chair for Geodesy and Geoinformatics

Content

• Clickable Map• Creating a clickable map for static web page with mapping information

• Server Side Script• Create a HTML form, a PHP Script and a data base table with two

entries and run a simple map search form• SVG

• Create a simple SVG document and display in a browser• UMN-MapServer

• Mapfile header• Add a raster layer• Simple query in map mode• Simple client templates• Add vector layers• Projection• Classification


Clickable Map

• Sensitive areas in images with relative coordinates...<img src=“vietnam_rel01.jpg" border="1" alt=“vietnam map” usemap="#vmap" width="800" height="1000"> ...<map name=“vmap"> <area shape="poly"

coords="365,298,397,284,396,303,405,316,398,322,380,317,368,299" href="http://www.hanoi.vn" alt=“Hanoi">

<area shape="circle" coords="597,202,25“href="http://www.hochimincity.vn" alt=“Ho Chi Min City">

<area shape="rect" coords="17,17,252,257" href=“vietnam_rel01_legend.png" alt=“legend”>

</map>...• Create your one HTML page• Include the image tag in the body section• Write the map• Grap the pixel coordinate with IrfanView (left mouse click)• Use your own links• Open your HTML page in a browser and test it.


Tools for clickable map creation

• Applications for creation and manipulation of image maps• Macromedia Dreamweaver

• Generating clickable maps from ArcGIS Project• Image Mapper Alta4


php-Script example for database connectionTechnology

Database connection

Sql query

Close database connection

Write resultsin HTML

Loop for reading results


Presenting search resultsTechnology


SVG example

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg">

<rect width="200" height="150"style="fill:rgb(255,0,0);stroke-width:1;stroke:rgb(0,0,0)"/>

<polygon points="100,40 107,65 132,65 112,80 119,104 100,90 81,104 88,80 68,65 93,65 100,40"

style="fill:#ffff00;stroke:#000000;stroke-width:1"/>

</svg>

Technology


• Create a simple Mapfile• The map header• The WEB Section• Add a first raster layer• Call the MapServer in map mode

• Change the map size• Add output format 24 bit PNG

• Add a first vector layer• The CLASS section

• Call the map with layer overlay

Mapfile Basics - Outline


Create the simple Mapfile

• Where:• In your ms4w package in subdirectory c:/ms4w/apps/ms_ogc_workshop/client

• Create a text file mymapfile.map• Open mymapfile.map with the Textpad editor• Include the MAP section and header information, set:

• NAME VietnamMap• EXTENT 105 8 116 33• SIZE 500 500

• Include WEB section• Include the LAYER section

• NAME land_shallow_topo_2048• TYPE RASTER• DATA "../../data/land_shallow_topo_2048.tif"

1

2

3


Call your MapServer for a map

• Call your MapServer with the map modehttp://localhost/cgi-bin/mapserv.exe?map=/ms4w/apps/ms_ogc_workshop/client/mymapfile.map&layer=land_shallow_topo_2048&mode=map

• Change the map size• Change the extent to center to Vietnam area• Add a OUTPUTFORMAT section• Call MapServer again and compare with

256 color map (8bit)• Add a LAYER Section for a vector layer

• Consider the order of layers• Change the color of the rivers• Add the SHAPEPATH and reduce

DATA to the Shapefile name• Add another raster layer

• vietnam_rel01.tif• explore the accuracy

4

5

6

7Call mapserv.exe with layer=…&layer=…


Templates - Outline

• Create a HTML map template• Include the substitution strings

• Call the client application• Navigate• Switch the layer

• Create the LEGEND, SCALEBAR, REFERENCEMAP sections in the mapfile and use it in the template

• Create a query template• Query the map


Map template

• Create a HTML template file mytemplate.html in• c:/ms4w/apps/ms_ogc_workshop/templates

• Insert a table, a header and the substitution string for the map• Set place holder for the legend, navigation elements and the scale

bar (minimal HTML knowledge required)

• Assign the template to map file’s WEB section• Call the Application in browse mode

(default without mode parameter)

9

8


Simple client functionality for map navigation

• Add a form for simple pan and zoom navigation• set the target for the action parameter to cgi-bin/mapserv.exe• Set hidden form elements to transfer static map parameter

• set radio’s for zoomdir andzoomsize

• Call the MapServer and try outnavigation function• Change navigation mode and

zoomsize• click in the map to navigate

• Set checkboxes forlayer switching

10

11


Legend, scale bar and reference map

• Create a LEGEND section• Add the sub-string in the

template file• Call the mapfile and

switch layer rivers on• The name of the class is

displayed• Create a SCALEBAR section• Add the sub-string in the

template file• Create an image for an

reference map• Create a REFERENCEMAP• Add the image in template

12

13

14

15

16 17


Query templates

• Add the a templates for the layer rivers in the mapfileHEADER "../templates/rivers_query_header.html“TEMPLATE "../templates/rivers_query_body.html"

• Add a checkbox for query mode in the map template(below the zoomsize text field)

• Query in browser• Select the checkbox for query mode• Click in the map on the river Mekong

• Customize the query template• Add a QUERYMAP Object to the mapfile• Create a global header and footer template

and add it in mapfile’s WEB SectionHEADER "../templates/myquery_header.html“FOOTER "../templates/myquery_footer.html”

• Query the river again• What is wrong with the query map image?

(Hint: Check out the layer name in the src of the image)

18

19

21,22

23

20

• Add a history back link 24


Map Projections

• Copy your land use layer in the data directory• Add a new LAYER section in the mapfile• Add PROJECTION Objects in the mapfile header

and to each layer section• WGS84, UTM 48N (epsg=32648) for landuse• WGS84 (epsg=4326) for all other • Add the layer to the template form• View the map and zoom in to the land use layer• Find out the maximum enclosing rectangle of the land use layer in

the ESRI ArcGIS Meta file Landuse.shp.xml(search for dataExt metadata element)

• Set the epsg code of the map to 32648• Set the new EXTENT according to your land

use file and change the heading in the template• Change the map unit to meters• Save your mapfile under a new name

e.g. landuse.map

25

24

26


Classification with string values

• Change the HTTP request method to post

• Create more classes for the vector layer land use• Classify by attribute Landuse

• Set CLASSITEM "Landuse"• Create classes with discrete values• Select some, e.g. EXPRESSION “Settlement”

27


Classification by numeric values

• Classify by attribute Area• Create a new Layer by copying the land use layer• Calculate the class range for 4 classes

with identically class size (max-min)/4• Call the layer in the GET request

(…&layer=areasize)

28


Annotation

• Define the path to the files describing • SYMBOLSET "../etc/symbols/symbols.sym"• FONTSET "../etc/fonts/fonts.txt"• Add the shape file for points of interest poi.shp

• TYPE POINT• Annotate the layer with a descriptive text

• Define the column include the label textLABELITEM “describing"

• Insert a LABEL section in the layer• Change TYPE to truetype and

choose a font from fonts.txt• Set appropriate SIZE and POSITION• Outline the text with white color and hide text extent the map border

• To switch on/off annotations it must be in a separate LAYER of the TYPE annotation

29

30

31

Ga exercise1

Technology

Transcript of Ga exercise1