<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#map {
width: 800px;
height: 512px;
border: 1px solid black;
}
</style>
<script src="ext-4.0.2a/ext.js" type="text/javascript"></script>
<script src="ext-4.0.2a/ext-all.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="ext-4.0.2a/resources/css/ext-all.css" />
<script src="OpenLayers-2.11-rc2/lib/OpenLayers.js" type="text/javascript"></script>
<script src="GeoExt/lib/GeoExt.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css"
href="GeoExt/resources/css/geoext-all-debug.css" />
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAvXm5fXPJvEZORQ0SUBQYzhRoiPXaC-q1hpbhi3gogFUCW6OUwhRmokTS1PKyF10kf2YCrWghhmFmVQ" type="text/javascript"></script>
<script type="text/javascript">
var SinglePoint = OpenLayers.Class.create();
SinglePoint.prototype = OpenLayers.Class.inherit(OpenLayers.Handler.Point, {
createFeature: function(evt) {
this.control.layer.removeFeatures(this.control.layer.features);
OpenLayers.Handler.Point.prototype.createFeature.apply(this, arguments);
}
});
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 result_style = OpenLayers.Util.applyDefaults({
strokeWidth: 3,
strokeColor: "#ff0000",
fillOpacity: 0
}, OpenLayers.Feature.Vector.style['default']);
// global variables
var map, parser, start, stop, downtown, result, controls;
function init() {
map = new OpenLayers.Map('map', {projection: "EPSG: 54004",
units: "m",
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(5.3242000,
-4.0189000 ,
5.3529000,
-3.9847000)
});
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
// create and add layers to the map
var satellite = new OpenLayers.Layer.GoogleMercator("Google Satellite",
{type: G_NORMAL_MAP});
start = new OpenLayers.Layer.Vector("Start point", {style: start_style});
stop = new OpenLayers.Layer.Vector("End point", {style: stop_style});
downtown = new OpenLayers.Layer.Vector("Downtown data area",
{style: result_style});
result = new OpenLayers.Layer.Vector("Routing results",
{style: result_style});
map.addLayers([satellite, start, stop, downtown,result]);
// create a feature from a wkt string and add it to the map
parser = new OpenLayers.Format.WKT();
var wkt = "POLYGON((-13737893 6151394, -13737893 6141906, -13728396 6141906, -13728396 6151394, -13737893 6151394))";
var geometry = parser.read(wkt);
var feature = new OpenLayers.Feature.Vector(geometry);
downtown.addFeatures([feature]);
// set default position
map.zoomToExtent(new OpenLayers.Bounds(5.3242000,
-4.0189000,
5.3529000,
-3.9847000));
// controls
controls = {
start: new OpenLayers.Control.DrawFeature(start, SinglePoint),
stop: new OpenLayers.Control.DrawFeature(stop, SinglePoint)
}
for (var key in controls) {
map.addControl(controls[key]);
}
}
function toggleControl(element) {
for (key in controls) {
if (element.value == key && element.checked) {
controls[key].activate();
} else {
controls[key].deactivate();
}
}
}
function compute() {
var startPoint = start.features[0];
var stopPoint = stop.features[0];
if (startPoint && stopPoint) {
var result = {
startpoint: startPoint.geometry.x + ' ' + startPoint.geometry.y,
finalpoint: stopPoint.geometry.x + ' ' + stopPoint.geometry.y,
method: OpenLayers.Util.getElement('method').value,
region: "victoria",
srid: "54004"
};
OpenLayers.loadURL("ax_routing.php?startpoint="+startPoint.geometry.x+" "+startPoint.geometry.y+"&finalpoint="
+stopPoint.geometry.x+" "+stopPoint.geometry.y+"&method=SPD&srid=900913",
null,
null,
displayRoute,
null);
}
}
function displayRoute(response) {
if (response && response.responseXML) {
// erase the previous results
result.removeFeatures(result.features);
// parse the features
var edges = response.responseXML.getElementsByTagName('edge');
var features = [];
for (var i = 0; i < edges.length; i++) {
var g = parser.read(edges[i].getElementsByTagName('wkt')[0].textContent);
features.push(g);
}
result.addFeatures(features);
}
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
<ul>
<li>
<input type="radio" name="control" id="noneToggle"
onclick="toggleControl(this);" checked="checked" />
<label for="noneToggle">navigate</label>
</li>
<li>
<input type="radio" name="control" value="start" id="startToggle"
onclick="toggleControl(this);" />
<label for="startToggle">set start point</label>
</li>
<li>
<input type="radio" name="control" value="stop" id="stopToggle"
onclick="toggleControl(this);" />
<label for="stopToggle">set stop point</label>
</li>
</ul>
<select id="method">
<option value="SPD">Shortest Path Dijkstra - undirected (BBox)</option>
<option value="SPA">Shortest Path A Star - undirected</option>
<option value="SPS">Shortest Path Shooting Star</option>
</select>
<button onclick="compute()">Calculate Route</button>
</body>
</html>