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>