Getting the OpenLayers? code for the routing application
Please use the following code. Download it and copy all the stuff e.g. in the direcory OpenLayers?/examples/ ) and save it as index.html (be aware that you need to type the correct path to implement /lib/OpenLayers.js).
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#map {
width: 800px;
height: 450px;
border: 1px solid black;
}
</style>
<script src="../../lib/OpenLayers.js"></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 Lon2Merc(lon) {
return 20037508.34 * lon / 180;
}
function Lat2Merc(lat) {
var PI = 3.14159265358979323846;
lat = Math.log(Math.tan( (90 + lat) * PI / 360)) / (PI / 180);
return 20037508.34 * lat / 180;
}
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
OpenLayers.Util.onImageLoadErrorColor = "transparent";
function init() {
var zoom = 18;
var options = {
projection: new OpenLayers.Projection("EPSG:900913"),
// displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
numZoomLevels: 22,
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
20037508, 20037508.34)
};
map = new OpenLayers.Map('map', options);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
//var wms= new OpenLayers.Layer.WMS.Untiled( "strassen",
// "http://localhost/cgi-bin/mapserv?map=/your_path/routing.map",
// {layers: 'streets',transparent:true, format: 'png'});
//var wms2= new OpenLayers.Layer.WMS.Untiled( "dead_ends",
// "http://localhost/cgi-bin/mapserv?map=/your_path/routing.map",
// {layers: 'dead_ends',transparent:true, format: 'png'});
//wms.isBaseLayer= false;
// wms2.isBaseLayer= false;
// create OSM layer
var mapnik = new OpenLayers.Layer.TMS(
"OpenStreetMap (Mapnik)",
"http://a.tile.openstreetmap.org/",
{
type: 'png', getURL: osm_getTileURL,
displayOutsideMaxExtent: true,
attribution: '<a href="http://www.openstreetmap.org/">OpenStreetMap</a>'
}
);
start = new OpenLayers.Layer.Vector("Start point", {style: start_style});
stop = new OpenLayers.Layer.Vector("End point", {style: stop_style});
result = new OpenLayers.Layer.Vector("Routing results",
{style: result_style});
map.addLayers([mapnik, start, stop,result]);
// set default position
map.zoomToExtent(new OpenLayers.Bounds(880000,
6840000,
915000,
6860000));
// 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) {
OpenLayers.loadURL("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);
function parseWKT(wkt) {
parser = new OpenLayers.Format.WKT();
var geometry = parser.read(wkt)
var features = parser.read(wkt);
var bounds;
if(features) {
if(features.constructor != Array) {
features = [features];
}
for(var i=0; i<features.length; ++i) {
if (!bounds) {
bounds = features[i].geometry.getBounds();
} else {
bounds.extend(features[i].geometry.getBounds());
}
}
result.addFeatures(features);
} else {
alert ("wrong");
element.value = 'Bad WKT';
}
}
// parse the features
var edges = response.responseXML.getElementsByTagName('edge');
var features = [];
for (var i = 0; i < edges.length; i++) {
var g = parseWKT(edges[i].getElementsByTagName('wkt')[0].textContent);
features.push(new OpenLayers.Feature.Vector(g));
}
result.addFeatures(features);
}
}
function osm_getTileURL(bounds) {
var res = this.map.getResolution();
var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
var z = this.map.getZoom();
var limit = Math.pow(2, z);
if (y < 0 || y >= limit) {
return OpenLayers.Util.getImagesLocation() + "404.png";
} else {
x = ((x % limit) + limit) % limit;
return this.url + z + "/" + x + "/" + y + "." + this.type;
}
}
</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>
</select>
<button onclick="compute()">Calculate Route</button>
</body>
</html>
