Untitled

<!DOCTYPE html>
<html>
    <head>
        <title>title</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="http://openlayers.org/api/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="DrawPoints.js" type="text/javascript"></script>
        <script src="proj4js-1.0.1/lib/proj4js.js" type="text/javascript"></script>
        <script type="text/javascript">


    </script>
</head>
    <body>
        <div id="map-id"></div>
        <script type="text/javascript">


     // global projection objects (uses the proj4js lib)
     var epsg_900913 = new OpenLayers.Projection("EPSG:900913");
     var epsg_27492 = new OpenLayers.Projection("EPSG:27492");


     function pgrouting(store, layer, method) {
         if (layer.features.length == 2) {
             // erase the previous route
             store.removeAll();


            var startpoint = layer.features[0].geometry.clone();
             startpoint.transform(epsg_900913, epsg_27492);


             var finalpoint = layer.features[1].geometry.clone();
             finalpoint.transform(epsg_900913, epsg_27492);


             // load to route
             store.load({
                 params: {
                     startpoint: startpoint.x + " " + startpoint.y,
                     finalpoint: finalpoint.x + " " + finalpoint.y,
                     method: method
                 }
             });
         }
    }


    //extend
    var mercator = new OpenLayers.Projection("EPSG:900913");
    var extend = new OpenLayers.Bounds(-789032.43216791,4977612.1650746,-784140.46235833,4980058.1499794);


    //opcoes do mapa
    var opcoes = {maxExtent: extend,restrictExtent: extend, units: 'm',projection: mercator,};


    Ext.onReady(function() {


        // create the map panel

        var map = new OpenLayers.Map("map-id",opcoes);

        var osm = new OpenLayers.Layer.OSM();
        map.addLayer(osm);


        var mapPanel = new GeoExt.MapPanel({
        renderTo: 'map-id',
        height: 800,
        width: 1200,
        map: map,
        title: 'title2'
        });


        // 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: 3
            }))
        });

        // 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([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]);

        // create the store to query the web service
        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({
                        internalProjection: epsg_900913,
                        externalProjection: epsg_27492
                    })
                })
            })
        });


        map.zoomToExtent(extend);


    // create the method combo box
        var method = new Ext.form.ComboBox({
            renderTo: "method",
            triggerAction: "all",
            editable: false,
            forceSelection: true,
            store: [
                ["SP", "Shortest Path"]

            ],
            listeners: {
                select: function() {
                    pgrouting(store, points_layer, method.getValue());
                }
            }
        });


        // default method is Shortest Path Dijkstra
        method.setValue("SP");
    });


            </script>

            <div id="method"></div>
    </body>
</html>