<html>
<head>
<title>OpenLayers Example</title>
<style type="text/css">
#map {
width: 800px;
height: 600px;
border: 1px solid black;
}
</style>
<script src="http://yancho.no-ip.org/~yancho/OpenLayers.js"></script>
<script type="text/javascript">
var map, layer, layer2;
var parser, result, end_geometry, stop_point;
var active = 0;
var SinglePoint = OpenLayers.Class(OpenLayers.Handler.Point, {
createFeature: function(evt) {
this.control.layer.removeFeatures(this.control.layer.features);
OpenLayers.Handler.Point.prototype.createFeature.apply(this, arguments);
}
/*
mousemove: function(evt) {
if(this.drawing) {
this.callback("move", [this.point.geometry]);
var lonlat = this.map.getLonLatFromPixel(evt.xy);
this.point.geometry.x = lonlat.lon;
this.point.geometry.y = lonlat.lat;
this.point.geometry.clearBounds();
this.drawFeature();
}
return true;
} */
});
var start_style = {
externalGraphic: "start.png",
graphicWidth: 18,
graphicHeight: 26,
graphicYOffset: -26,
graphicOpacity: 1
}
OpenLayers.Util.applyDefaults(start_style, OpenLayers.Feature.Vector.style['default']);
var stop_style = {
externalGraphic: "stop.png",
graphicWidth: 18,
graphicHeight: 26,
graphicYOffset: -26,
graphicOpacity: 1
}
OpenLayers.Util.applyDefaults(stop_style, OpenLayers.Feature.Vector.style['default']);
var result_style = {
strokeWidth: 3,
strokeColor: "#ff0000",
fillOpacity: 0
};
OpenLayers.Util.applyDefaults(result_style, OpenLayers.Feature.Vector.style['default']);
function init(){
myBounds = new OpenLayers.Bounds(609462,196653,678224,258103);
map = new OpenLayers.Map("map", {maxExtent : myBounds, projection :'EPSG:32119', units:'m', maxResolution:1000});
layer = new OpenLayers.Layer.MapServer
( "Major Roads",
"http://yancho.no-ip.org/~yancho/cgi-bin/mapserv",
{map:'/home/yancho/public_html/nc/sample.map',layers:'majorroads'},
{gutter: 15, buffer:0}
);
map.addLayer(layer);
layer2 = new OpenLayers.Layer.MapServer
( "Streets Layer",
"http://yancho.no-ip.org/~yancho/cgi-bin/mapserv",
{map:'/home/yancho/public_html/nc/sample.map', layers:'streets'},
{gutter: 15, buffer:0}
);
map.addLayer(layer2);
//map.addControl(new OpenLayers.Control.PanZoomBar(), newOpenLayers.Pixel(5,5));
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MouseDefaults());
map.addControl(new OpenLayers.Control.MousePosition());
map.zoomToExtent(new OpenLayers.Bounds(637311,222242,645906,229924));
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([start, stop, result]);
parser = new OpenLayers.Format.WKT();
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: "streets",
srid: "-1"
};
OpenLayers.loadURL("routing.php",
OpenLayers.Util.getParameterString(result),
null,
displayRoute);
}
}
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(new OpenLayers.Feature.Vector(g));
}
result.addFeatures(features);
}
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
<div id="right" style="float:right;width:30%;padding:10px;" >
<ol>
<li>Click "Set Start Point"</li>
<li>Click on the map</li>
<li>Click "Set Stop Point"</li>
<li>Click on the Map, and without letting go, drag around.</li>
</ol>
<div id="nodeList" style="font-weight:normal; margin-top:10px;"></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" selected>Shortest Path A Star - undirected</option>
<option value="SPS">Shortest Path Shooting Star</option>
</select>
<button onclick="compute()">Calculate Route</button>
</html>