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).