Tuesday 15 January 2008

pgRouting 1.01 with OpenLayers 2.5 on Ubuntu 7.10


Step 1. Preparation
1. Download and view information of pgRouting on http://pgrouting.postlbs.org/.
Download OpenLayers 2.5 on http://openlayers.org/.
2. Create a project, such as "routing", and add the library of OpenLayers into project (include directories of "lib", "img", "theme") at some directory, such as "openlayers".

Step 2. Install pgRouting and prepare routing table
1. Do step by step on http://pgrouting.postlbs.org/wiki/1.x/InstallationUbuntu710.
Note:
- Delete the line "svn checkout http://pgrouting.postlbs.org/svn/pgrouting/tags/release-1.0 pgrouting".
- If errors happen with functions "createdb", "createlang" and "psql", append "-h localhost" after those functions.

2. Prepare routing table for Dijkstra, A-Star or Shooting-Star.
Do step by step on http://pgrouting.postlbs.org/wiki/WorkshopFOSS4G2007 at part "PostgreSQL / pgRouting" with your own data. Ignore "Load routing data" if you don't use it.

Step 3. OpenLayers routing map
Do step by step on http://pgrouting.postlbs.org/wiki/WorkshopFOSS4G2007 at part "OpenLayers routing map".

Note:
With OpenLayers 2.5, we need to edit following contents:
* Part "Create a Vector layer and draw a polygon on it"
......
var result_style = OpenLayers.Util.applyDefaults({
strokeWidth: 3,
strokeColor: "#ff0000",
fillOpacity: 0
}, OpenLayers.Feature.Vector.style['default']);
......
var geometry = parser.read(wkt);
var feature = new OpenLayers.Feature.Vector(geometry);
......


---->
......
var result_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
result_style.strokeWidth = 3;
result_style.strokeColor = "#ff0000";
result_style.fillOpacity = 0;
......
var feature = parser.read(wkt);
......


* Part "'set start/end point' tool"
......
var start_style = OpenLayers.Util.applyDefaults({
externalGraphic: "start.png",
graphicWidth: 18,
graphicHeight: 26,
graphicYOffset: -26,
graphicOpacity: 1
}, OpenLayers.Feature.Vector.style['default']);

var stop_style = OpenLayers.Util.applyDefaults({
externalGraphic: "stop.png",
graphicWidth: 18,
graphicHeight: 26,
graphicYOffset: -26,
graphicOpacity: 1
}, OpenLayers.Feature.Vector.style['default']);
......


---->
......
var start_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
start_style.externalGraphic = "start.png";
start_style.graphicWidth = 18;
start_style.graphicHeight = 26;
start_style.graphicYOffset = -26;
start_style.graphicOpacity = 1;

var stop_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
stop_style.externalGraphic = "stop.png";
stop_style.graphicWidth = 18;
stop_style.graphicHeight = 26;
stop_style.graphicYOffset = -26;
stop_style.graphicOpacity = 1;
......


* Part "Show the routing result on the map"
......
var g = parser.read(edges[i].getElementsByTagName('wkt')[0].textContent);
features.push(new OpenLayers.Feature.Vector(g));
......

---->
......
var g = parser.read(edges[i].getElementsByTagName('wkt')[0].textContent);
features.push(g);
......

Step 4. Routing PHP script with XML output
Do step by step on http://pgrouting.postlbs.org/wiki/WorkshopFOSS4G2007 at part "Routing PHP script with XML output".
Note: If you use Java, you can read my classes in file mapgis.zip attached below.

Demo: mapgis.zip (without database).

5 comments:

Anonymous said...

hi. I can't download mapgis.zip
It was removed?
Thanks

Tai Nguyen Anh said...

Hi,
I have upgraded my server, and forgot to upload it. Please check it again.

Anonymous said...

thanks !! very helpful post!

Wilfo said...

Great post but no file to download.Could you please upload the file? To make pgrouting , do you need a polygon or line shape?
logica_razon@hotmail.com

Please , let me know when you upload the file.

Wilfo said...

Your map is great , how do you do it?
How do you make the lines so nice?