demo (#22) - please help me with google and route integration (#388) - Message List
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)
-
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)