How To Dynamically Set The Radius Of A Feature Point To Reflect The Spacial Dimension In OpenLayers

If you draw a feature point in OpenLayers it keeps in ever zoom level the same size. Like the one on the right site shown in the map below.
Wouldn't it be nice to to give the feature point a physical size that reflects its spacial dimension in relation to the map?
This is done with the point on the left side. Zoom in or out and you will see the difference.

Hier is how its done.

1:  var map, layerOsm, layerVector;  
2:  var lonLatFrankfurt = new OpenLayers.LonLat(966375, 6466128);  
3:    
4:  function initOpenLayers() {  
5:         
6:       map = new OpenLayers.Map('map');  
7:         
8:       layerOsm = new OpenLayers.Layer.OSM("Simple OSM Map");  
9:       map.addLayer(layerOsm);  
10:         
11:         
12:       var layerVectorNormal = new OpenLayers.Layer.Vector("layer normal");  
13:       map.addLayer(layerVectorNormal);  
14:         
15:       var featureOffenbach = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(976375, 6466128));  
16:       layerVectorNormal.addFeatures([featureOffenbach]);  
17:         
18:       var style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style.default);  
19:       OpenLayers.Util.extend(style, {pointRadius: '${calculateRadius}'});  
20:         
21:       var styleArea = new OpenLayers.Style(  
22:                 style  
23:            ,  
24:            {  
25:                 context: {  
26:                   calculateRadius: function(feature) {  
27:                           return feature.attributes.radius/feature.layer.map.getResolution();  
28:                   }  
29:                 }  
30:             }  
31:       );  
32:    
33:       var sm = new OpenLayers.StyleMap({  
34:            'default': styleArea  
35:       });  
36:         
37:         
38:       layerVector = new OpenLayers.Layer.Vector("layer spacial dimensioned", { styleMap: sm });  
39:       map.addLayer(layerVector);  
40:    
41:       var feature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(lonLatFrankfurt.lon, lonLatFrankfurt.lat), {radius: 7000});  
42:       layerVector.addFeatures([feature]);  
43:         
44:       map.setCenter(  
45:            lonLatFrankfurt,  
46:            10  
47:       );  
48:  }  

And now the explanation:
In line 41 we create a point feature with the additional property radius that holds the radius of the point in meter.

 OpenLayers.Feature.Vector(geometry, attributes)  

The attributes will be mapped to the attributes property of the vector object.

Than we create our Style with

 OpenLayers.Style(style, options)  

The parameter style ist an anonymous object of key-value-pairs that is also refered to as symbolizer. A list of valid properties is defined in OpenLayers.Feature.Vector.

We want to extend the original style and just change the pointRadius property. In line 18: we extend the the original default symbolizer.

 OpenLayers.Util.extend(destination, source)   

This function copies all properties from source to destination.

In line 19: we do something that is called attribute replacement. With the expression:

 ${attribute_name}  

With this expression, we can reference any property in the attributes property of the vector object. This would be a static value that doesn't change dynamically with the zoom level.

But we can also refer to a function. The functions get looked up in the feature property context.

In line 21: we create a new OpenLayers.Style with our extendes default symbolizer and the context property that holds the function to calculate the dynamic radius.
This function in line 26: gets called every time the feature is drawn and the pointRadius gets evaluated. As a single parameter it gets the feature.
Here we can set the radius in relation with the zoom level of the map and calculate the displayed pointRadius.

Using OSM data in GeoServer: Part3 - GeoServer

To install GeoServer you have a lot of options:

• Installer
• Binaries
• Web ARchive(WAR)

I choose the WAR because I want to extend the funktionality of the server later on (Not in this tutorial).
Go to the download page and get the stable WAR and unzip it.

geoserver-2.1.2-war.zip
geoserver.war

A WAR gets deployed into an application server. Also here you got a lot of options:

• JBoss
• Tomcat
• Jetty
• GlassFish

I choose GlassFish. Go to the download page and get the newest open source version.

glassfish-3.1-windows.exe

Installation folder	C:\glassfish3
Http port	8080
Admin port	4848
start command	C:\glassfish3\glassfish\bin\asadmin.bat start-domain domain1

Go to the admin site and deploy the GeoServer WAR.
Open your browser and type in 'http://localhost:4848'.
Click on Applications and there on the 'Deploy...' button.
Choose the geoserver.war ond click 'OK'.

Open the page 'http://localhost:8080/geoserver'.

The default username and password ist admin and geoserver.

If you want to know how GeoServer generally works I recomend to read the excellent GeoServer User Manual.

Now we want to bring the spacial data into the browser.

Go to 'Workspaces'.
Click 'Add new workspace'

Name	osm
Namespace URI	http://osm.de

Go to 'Stores'.
Click 'Add new Store'.
Click 'PostGIS - PostGIS Database'.

Workspace	osm
Data Source Name	osm data
host	localhost
port	5432
database	osm
user	osmuser
passwd	***

Now you have to create for every table a layer.

Go to 'Layers'.
Click 'Add a new resource'
Choose 'osm:osm data'.

In the Tab 'Data' go to the point 'Bounding Boxes' and compute the native- and Lat/Lon bounding boxes from data.
Check in the Tab 'Publising' if the 'Standard Stil' is point for planet_osm_point and line for planet_osm_line, planet_osm_roads and polygon fro planet_osm_polygon.
Click 'Save'.

Go to 'Layer Groups'.
Click 'Add new layer group'
Name: osm group
Click 'Add Layer...' and add all 4 layers.
Click 'Geerate Bounds'.
Click 'Save'

Go to 'Layer Preview'.
Find the osm group and click 'OpenLayers'.

Part0 Part1 Part2 Part3

Using OSM data in GeoServer: Part2 - osm2pgsql

For this part we have to:

1. get the OpenStreetMap(OSM) data that are called planet files.
2. download the import tool osm2pgsql.
3. import the osm data.

The OSM wiki has a page that describes how to download their data.
We choose geofrabrik. In the folder osm/europe/germany wie click on hessen.osm.bz2. This file is not to big (121 MB) for this example. Germany would take the whole day to import.


For osm2pgsql exist a compiled version to download from here.

 osm2pgsql -U postgres -W -c -s -d osm -S default.style hessen.osm.bz2  

The parameters:

-U	Postgresql user name.
-W	Force password prompt.
-c	Remove existing data from the database.
-s	Store temporary data in the database. This greatly reduce the RAM usage but is much slower. You are running this on 32bit system, so at most 3GB of RAM will be used. If you encounter unexpected exceptions during import, you should try this switch.
-d	The name of the PostgreSQL database to connect.
-S	Location of the style file. Defaults to /usr/share/osm2pgsql/default.style.

The import takes around 30 minutes.

Have a look in the osm-db. 5 new tables are there.
planet_osm_line
planet_osm_point
planet_osm_polygon
planet_osm_roads

In the next part I will show you how to visualize the date with GeoServer.

Part0 Part1 Part2 Part3

Using OSM data in GeoServer: Part1 - PostGIS

The first thing we need is a data base to store spacial data. Today ever big vendor has a spacial extension that is compliant with the simple feature specification from the OGC.
We could choose from the following data bases:
Oracle, MSSQL, MySQL, Postgres, ...

I pick Postgres with its spacial extention called PostGIS. It is an stable open source data base with no costs. This is the only data base I know for which a tool exists to import the osm data. It is called osm2pgsql.

1. Download and install PostgreSQL.
2. Update or manually install PostGIS
3. Create a spacial db called osm with a new user
4. Configure the connections

1. Download and install PostgreSQL

Get the one click installer from the download page. I choose the version 8.4 instead of the 9.x branch because it gots all the funktionality we need and it is the most stable and secure version.

One click it : postgresql-8.4.9-1-windows.exe

The installer will promt you:

Installation Directory:	C:\Program Files\PostgreSQL\8.4
Data Directory:	C:\Program Files\PostgreSQL\8.4\data
Password:	<your password>
Port:	5432

At the end you get asked if you want to launch the Stack Builder.
Choose from the category tree 'spacial extensions' and then 'PostGIS 1.5'.

Alternatively you can install the extention by hand. There are instructions at the PostGIS site.

Open up the 'pg Admin III' tool from your start menue. In the objectbrowser you will find a data base called 'template_postgis' with two tables 'geometry_columns' and 'spacial_ref_sys'. If you need a new gis data base you use this as a template. So don't alter it.

Create a new Login-Roll called osmuser by right clicking on 'Login-Rollen'.
Create a new gis data base by right clicking on 'Databases' in the Tree.

Name:	osm
Owner:	osmuser
Template:	template_postgis

Finaly you have to assing the osmuser to the tables in the data base.

This can also be done by the postgres console.

Now you are ready with the basic data base setup. Next part will show you how to import the osm data.

Part0 Part1 Part2 Part3

Using OSM data in GeoServer: Part0 - Introduction

In this tutorial I want to show you how we can setup our own OpenStreetMap(OSM) tiling server.
Most of the tutorials are writen for linux, I will use windows instead.

Several steps have to be done:

1. Setting up a data base (PostGIS)
2. Download and Import the OSM data via an importing tool (osm2pgsql)
3. Setting up a GIS-Server (GeoServer) and generating the map tiles

Part0 Part1 Part2 Part3