0

i am really new with osm. I would like ask a question considering my code down there. Currenty my code makes pgrouting work between two points. And start point is chosen by geolocation and the end point i wrote down it manually as lonFinal,latFinal. What i would like is making a route between the point which chosen by geolaciton(already done) and the clicked point on the map. Actually the question is how im gonna chosed the clicked point as end point. Thanks in advance.

        <!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -->
    <html>
    <head>

    <meta http-equiv="content-type" content="TEXT/HTML; CHARSET=UTF-8">
    <meta lang="de">

    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
      <script >
        var map;
            function init() {  
            var proj = new OpenLayers.Projection("EPSG:4326");
            var mapproj = new OpenLayers.Projection("EPSG:3857");
            var bounds = new OpenLayers.Bounds(
            16.1536311, 48.106509,16.6148645, 48.3433243
            ).transform(proj, mapproj);

            var options = {
            controls: [
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.KeyboardDefaults(),
            new OpenLayers.Control.PanZoomBar(),
            new OpenLayers.Control.Scale(),
            new OpenLayers.Control.Attribution(),
            new OpenLayers.Control.MousePosition(),
            ],
            maxExtent: bounds,
            projection: new OpenLayers.Projection("EPSG:3857")
            };    

                  map = new OpenLayers.Map("map", options);

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


                          var lonStart = 16.36864;
                          var latStart = 48.19779;
                          var lonFinal = 16.36893;
                          var latFinal = 48.19638;
                          if (navigator.geolocation)
                         {
                         navigator.geolocation.getCurrentPosition(showPosition);
                         }else{
                         alert("Geolocation is not supported by this browser.");
                         }

                var lonStart = 16.36864;
                var latStart = 48.19779;
                var lonFinal = 16.36893;
                var latFinal = 48.19638;
                var startCoord = new OpenLayers.LonLat(lonStart,latStart).transform(
                proj, map.getProjectionObject());   
                map.setCenter(startCoord, 14);         
        };


    function showPosition(position)
              {     
                  var lonFinal = 16.36759;
                  var latFinal = 48.19629;

                   lonStart=position.coords.longitude;
                   latStart=position.coords.latitude;

             var Style = {strokeColor: "red", strokeWidth:4}
             var vector_layer= new OpenLayers.Layer.Vector("pgrouting",
             {projection: new OpenLayers.Projection("EPSG:4326"),
             style: Style,
             strategies: [new OpenLayers.Strategy.BBOX()],
             protocol: new OpenLayers.Protocol.HTTP({
                    url:"http://localhost/geoinfo/pgrouting.php",
                    params: {'lonStart': lonStart,
                     'latStart': latStart,
                     'lonEnd': lonFinal,
                     'latEnd': latFinal},
             format: new OpenLayers.Format.GeoJSON()
                    })
          });
        map.addLayer(vector_layer);

           var vector_layer= new OpenLayers.Layer.Vector("Kaiserstrasse",
                {projection: new OpenLayers.Projection("EPSG:4326"),
                strategies: [new OpenLayers.Strategy.BBOX()],
                protocol: new OpenLayers.Protocol.HTTP({
                url:"http://localhost/geoinfo/kaiser.php",
                format: new OpenLayers.Format.GeoJSON()
                }),
                 fillColor: 'green',
                 strokeColor: 'green',
                 strokeWidth: 10});
          map.addLayer(vector_layer);


      }
          </script>
        </head>
          <body onload="init();">
            <div id="map" class='divMap'></div>     
      </body>
    </html>
Nil
  • 201
  • 3
  • 12
  • You didn't registred an click event, did you? http://openlayers.org/dev/examples/click.html – MaM Jan 21 '14 at 08:18
  • No i didnt :/ Only mouseposition.. – Nil Jan 21 '14 at 08:29
  • I have just registered an click event regarding the link you have suggested up there. And when i click on the map, the coordinate pop up as a new windows. But still could figure out use this coordinate as a final point. How can i do that? Thanks for your concern – Nil Jan 21 '14 at 10:43

1 Answers1

1

I made it work! Here it is the code.

             <!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -->
    <html>
    <head>

    <meta http-equiv="content-type" content="TEXT/HTML; CHARSET=UTF-8">
    <meta lang="de">

    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
      <script >

      OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, 
      { defaultHandlerOptions: { 'single': true, 'double': false, 'pixelTolerance': 0, 'stopSingle': false, 'stopDouble': false },
       initialize: function(options) 
       { this.handlerOptions = OpenLayers.Util.extend( {}, this.defaultHandlerOptions ); 
         OpenLayers.Control.prototype.initialize.apply( this, arguments ); 
         this.handler = new OpenLayers.Handler.Click( this, { 'click': this.trigger },
         this.handlerOptions ); }, trigger: function(e) { 
        var lonlat = map.getLonLatFromPixel(e.xy);
        alert("The progress will take some seconds" );
        var endpoint = new OpenLayers.LonLat(lonlat.lon,lonlat.lat).transform(map.getProjectionObject(),proj);    
        calculateRoute(endpoint);

        }
        });
        var map;
        var lonStart = 16.36864;
        var latStart = 48.19779;
        var lonFinal = 16.36893;
        var latFinal = 48.19638;
        var proj = new OpenLayers.Projection("EPSG:4326");
        var mapproj = new OpenLayers.Projection("EPSG:3857");
        function init() {  
            var bounds = new OpenLayers.Bounds(
            16.1536311, 48.106509,16.6148645, 48.3433243
            ).transform(proj, mapproj);

            var options = {
            controls: [
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.KeyboardDefaults(),
            new OpenLayers.Control.PanZoomBar(),
            new OpenLayers.Control.Scale(),
            new OpenLayers.Control.Attribution(),
            new OpenLayers.Control.MousePosition(),
            new OpenLayers.Control.Click(),
            ],
            maxExtent: bounds,
            projection: new OpenLayers.Projection("EPSG:3857")
            };    

                  map = new OpenLayers.Map("map", options);

                  var osmBaseLayer = new OpenLayers.Layer.OSM();
                  map.addLayer(osmBaseLayer);
                  var click = new OpenLayers.Control.Click();
                   map.addControl(click); 
                   click.activate();


                          lonStart = 16.36864;
                          latStart = 48.19779;
                          lonFinal = 16.36893;
                          latFinal = 48.19638;
                          if (navigator.geolocation)
                         {
                         navigator.geolocation.getCurrentPosition(setmylocation);
                         }else{
                         alert("Geolocation is not supported by this browser.");
                         }

                lonStart = 16.36864;
                latStart = 48.19779;
                lonFinal = 16.36893;
                latFinal = 48.19638;
                var startCoord = new OpenLayers.LonLat(lonStart,latStart).transform(
                proj, map.getProjectionObject());   
                map.setCenter(startCoord, 14);


           var vector_layer= new OpenLayers.Layer.Vector("Kaiserstrasse",
                {projection: new OpenLayers.Projection("EPSG:4326"),
                strategies: [new OpenLayers.Strategy.BBOX()],
                protocol: new OpenLayers.Protocol.HTTP({
                url:"http://localhost/geoinfo/kaiser.php",
                format: new OpenLayers.Format.GeoJSON()
                }),
                 fillColor: 'green',
                 strokeColor: 'green',
                 strokeWidth: 10});
          map.addLayer(vector_layer);         
        };


    function setmylocation(position)
    {     
        lonStart=position.coords.longitude;
        latStart=position.coords.latitude;   
    }

    function calculateRoute(endposition)
    {
        lonFinal=endposition.lon;
        latFinal=endposition.lat;
        var Style = {strokeColor: "red", strokeWidth:4}
             var vector_layer= new OpenLayers.Layer.Vector("pgrouting",
             {projection: new OpenLayers.Projection("EPSG:4326"),
             style: Style,
             strategies: [new OpenLayers.Strategy.BBOX()],
             protocol: new OpenLayers.Protocol.HTTP({
                    url:"http://localhost/geoinfo/pgrouting.php",
                    params: {'lonStart': lonStart,
                     'latStart': latStart,
                     'lonEnd': lonFinal,
                     'latEnd': latFinal},
             format: new OpenLayers.Format.GeoJSON()
                    })
          });
        map.addLayer(vector_layer);


    }
          </script>
        </head>
          <body onload="init();">
            <div id="map" class='divMap'></div>     
      </body>
    </html>
Nil
  • 201
  • 3
  • 12