demo (#22) - please help me with google and route integration (#388) - Message List
please help me with google and route integration
Id like to integrate generated route on the google map service.
I followed tutorial and made some changes but now I am not sure where I made mistake because my aplication has next errors :
- when I set up start and end point of route, points are generated on little different position than is my cursor
- when generated route is shown on the map it is situated little shifted
My data was imported from shapefile which was in WGS84 (degrees) and in posgres db it is like it is shown at the bottom.
Also I enclosed my php route generator and starting map page.
starting map page :
<html>
<head>
<title>A Basic GeoExt Page</title>
<script src="Ext-3.2.1/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="Ext-3.2.1/ext-all.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="Ext-3.2.1/resources/css/ext-all.css" />
<script src="OpenLayers-2.9.1/lib/OpenLayers.js" type="text/javascript"></script>
<script src="GeoExt-0.7/lib/GeoExt.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css"
href="GeoExt-0.7/resources/css/geoext-all-debug.css" />
<script src="DrawPoints.js" type="text/javascript"></script>
<script src="proj4js-1.0.1/lib/proj4js.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAswMtbwtotJmv90ak01iBixQU8MLjHkCOgUOFxqy3Ydl6JRQ1exRBk-QjQ5UGpjClJkRmte_it9YuCA" type="text/javascript"></script>
<script type="text/javascript">
function pgrouting(store, layer, method) {
if (layer.features.length == 2) {
// erase the previous route
store.removeAll();
var startpoint = layer.features[0].geometry.clone();
alert (startpoint);
var finalpoint = layer.features[1].geometry.clone();
alert (finalpoint);
// load to route
store.load({
params: {
startpoint: startpoint.x + " " + startpoint.y,
finalpoint: finalpoint.x + " " + finalpoint.y,
method: method
}
});
}
}
var map, mapPanel, store, gridPanel, mainPanel;
Ext.onReady(function() {
var map = new OpenLayers.Map();
var wmsLayer = new OpenLayers.Layer.Google("Google Physical", {type: G_SATELLITE_MAP});
var vecLayer = new OpenLayers.Layer.Vector("vector");
map.addLayers([wmsLayer]);
// create map panel
mapPanel = new GeoExt.MapPanel({
renderTo: "map",
title: "Map",
region: "center",
height: 400,
width: 500,
map: map,
center: new OpenLayers.LonLat(17.17, 48.146),
zoom: 15
});
// create the layer where the route will be drawn
var route_layer = new OpenLayers.Layer.Vector("route", {
styleMap: new OpenLayers.StyleMap(new OpenLayers.Style({
strokeColor: "#ff9933",
strokeWidth: 7
}))
});
// create the layer where the start and final points will be drawn
var points_layer = new OpenLayers.Layer.Vector("points");
// when a new point is added to the layer, call the pgrouting function
points_layer.events.on({
featureadded: function() {
pgrouting(store, points_layer, method.getValue());
}
});
// add the layers to the map
map.addLayers([wmsLayer, points_layer, route_layer]);
// create the control to draw the points (see the DrawPoints.js file)
var draw_points = new DrawPoints(points_layer);
// create the control to move the points
var drag_points = new OpenLayers.Control.DragFeature(points_layer, {
autoActivate: true
});
// when a point is moved, call the pgrouting function
drag_points.onComplete = function() {
pgrouting(store, points_layer, method.getValue());
};
// add the controls to the map
map.addControls([draw_points, drag_points]);
var store = new GeoExt.data.FeatureStore({
layer: route_layer,
fields: [
{name: "length"}
],
proxy: new GeoExt.data.ProtocolProxy({
protocol: new OpenLayers.Protocol.HTTP({
url: './php/pgrouting.php',
format: new OpenLayers.Format.GeoJSON({
})
})
})
});
// create the method combo box
var method = new Ext.form.ComboBox({
renderTo: "method",
triggerAction: "all",
editable: false,
forceSelection: true,
store: [
["SPD", "Shortest Path Dijkstra"],
["SPA", "Shortest Path A*"],
["SPS", "Shortest Path Shooting*"]
],
listeners: {
select: function() {
pgrouting(store, points_layer, method.getValue());
}
}
});
// default method is Shortest Path Dijkstra
method.setValue("SPD");
});
</script>
</head>
<body>
<div id="map"></div>
<div id="method"></div>
</body>
</html>
php route generator :
<?php
// Database connection settings
define("PG_DB" , "ba_db");
define("PG_HOST", "localhost");
define("PG_USER", "postgres");
define("PG_PORT", "5432");
define("TABLE", "ba_table");
// Retrieve start point
$start = split(' ',$_REQUEST['startpoint']);
$startPoint = array($start[0], $start[1]);
// Retrieve end point
$end = split(' ',$_REQUEST['finalpoint']);
$endPoint = array($end[0], $end[1]);
// Find the nearest edge
$startEdge = findNearestEdge($startPoint);
$endEdge = findNearestEdge($endPoint);
// FUNCTION findNearestEdge
function findNearestEdge($lonlat) {
// Connect to database
$con = pg_connect("dbname=".PG_DB." host=".PG_HOST." user=".PG_USER);
$sql = "SELECT gid, source, target, the_geom,
distance(the_geom, GeometryFromText(
'POINT(".$lonlat[0]." ".$lonlat[1].")', 4326)) AS dist
FROM ".TABLE."
WHERE the_geom && setsrid(
'BOX3D(".($lonlat[0]-0.001)."
".($lonlat[1]-0.001).",
".($lonlat[0]+0.001)."
".($lonlat[1]+0.001).")'::box3d, 4326)
ORDER BY dist LIMIT 1";
$query = pg_query($con,$sql);
$edge['gid'] = pg_fetch_result($query, 0, 0);
$edge['source'] = pg_fetch_result($query, 0, 1);
$edge['target'] = pg_fetch_result($query, 0, 2);
$edge['the_geom'] = pg_fetch_result($query, 0, 3);
// Close database connection
pg_close($con);
return $edge;
}
// Select the routing algorithm
switch($_REQUEST['method']) {
case 'SPD' : // Shortest Path Dijkstra
$sql = "SELECT rt.gid, ST_AsGeoJSON(rt.the_geom) AS geojson,
length(rt.the_geom) AS length, ".TABLE.".gid
FROM ".TABLE.",
(SELECT gid, the_geom
FROM dijkstra_sp_delta(
'".TABLE."',
".$startEdge['source'].",
".$endEdge['target'].",
0.1)
) as rt
WHERE ".TABLE.".gid=rt.gid;";
break;
case 'SPA' : // Shortest Path A*
$sql = "SELECT rt.gid, ST_AsGeoJSON(rt.the_geom) AS geojson,
length(rt.the_geom) AS length, ".TABLE.".gid
FROM ".TABLE.",
(SELECT gid, the_geom
FROM astar_sp_delta(
'".TABLE."',
".$startEdge['source'].",
".$endEdge['target'].",
0.1)
) as rt
WHERE ".TABLE.".gid=rt.gid;";
break;
case 'SPS' : // Shortest Path Shooting*
$sql = "SELECT rt.gid, ST_AsGeoJSON(rt.the_geom) AS geojson,
length(rt.the_geom) AS length, ".TABLE.".gid
FROM ".TABLE.",
(SELECT gid, the_geom
FROM shootingstar_sp(
'".TABLE."',
".$startEdge['gid'].",
".$endEdge['gid'].",
0.1, 'length', true, true)
) as rt
WHERE ".TABLE.".gid=rt.gid;";
break;
} // close switch
// Connect to database
$dbcon = pg_connect("dbname=".PG_DB." host=".PG_HOST." user=".PG_USER);
// Perform database query
$query = pg_query($dbcon,$sql);
// Return route as GeoJSON
$geojson = array(
'type' => 'FeatureCollection',
'features' => array()
);
/*
while ($row = pg_fetch_assoc($query)) {
//echo "GID=" . $row['gid'] . "</br>";
echo "GEOJSON=" . $row['geojson'] . "</br>";
//echo "LENGTH=" . $row['length'] . "</br>";
}
*/
// Add edges to GeoJSON array
while($edge=pg_fetch_assoc($query)) {
$feature = array(
'type' => 'Feature',
'geometry' => json_decode($edge['geojson'], true),
'crs' => array(
'type' => 'EPSG',
'properties' => array('code' => '4326')
),
'properties' => array(
'id' => $edge['id'],
'length' => $edge['length']
)
);
// Add feature array to feature collection array
array_push($geojson['features'], $feature);
}
// Close database connection
pg_close($dbcon);
// Return routing result
header('Content-type: application/json',true);
echo json_encode($geojson);
?>
database table :
Table "public.ba_table"
Column | Type | Modificators
--------------+-----------------------+-----------------------------------------
---------------
gid | integer | not null default nextval('ba_table_gid_s
eq'::regclass)
fcc | integer |
road_id | integer |
on | character varying(50) |
df | integer |
fw | integer |
sl | integer |
fy | integer |
ds | integer |
fc | integer |
rn | character varying(10) |
rne | character varying(16) |
toll_road | integer |
toll | integer |
urban | integer |
oc_admin8 | character varying(6) |
oc_admin9 | character varying(6) |
level_b | integer |
level_m | integer |
level_e | integer |
bt | integer |
nc | integer |
oneway | character varying(2) |
meter | double precision |
the_geom | geometry |
source | integer |
target | integer |
reverse_cost | double precision |
length | double precision |
x1 | double precision |
y1 | double precision |
x2 | double precision |
y2 | double precision |
to_cost | double precision |
rule | text |
Indexes:
"ba_table_pkey" PRIMARY KEY, btree (gid)
"ba_table_the_geom_gist" gist (the_geom)
"source_idx" btree (source)
"target_idx" btree (target)
Constraints:
"enforce_dims_the_geom" CHECK (ndims(the_geom) = 2)
"enforce_geotype_the_geom" CHECK (geometrytype(the_geom) = 'MULTILINESTRING'
::text OR the_geom IS NULL)
"enforce_srid_the_geom" CHECK (srid(the_geom) = 4326)
Dzouzeph
10/06/10 03:40:56 (6 weeks ago)
-
Message #1664
and 3. problem with my page is that when my points and route is shown on the map and when I moved map the poitns and route is not very well sticked to map and si moving with delayed but also on every movement of map vector is on diferent position.
Dzouzeph10/06/10 03:47:54 (6 weeks ago)-
Message #1667
to 3) The demo application is to show an easy example and is not supposed to be a fully functional application. Once you click again it takes this point as a new source/target.
The focus of the demo is not the web application but the usage of the pgRouting libaray, which doesn't mean that you can't do it more sophisticated with more code.
daniel10/06/10 06:36:54 (6 weeks ago)
-
-
Message #1666
The demo application needs to route from a point on your network to another one. When you click on the map, you usually don't hit such a point, so the PHP script looks for the nearest road segment to the point you clicked at and then selects either start or end point of that segment.
To improve this behavior, you can add more logic to your application. The demo only gives an easy example with simple cases.
daniel10/06/10 06:34:26 (6 weeks ago)
