[GIS] Displaying road with line on map from selected nodes using OpenStreetMap

openstreetmaproad

We have started an educational side-project,for fun not as a commercial or trial software, to test what we have learned these last few months. We decided we would do a simple map navigation program that would take an input from a user (starting place + desired location) and draw the route based on the OpenStreetMap data we have extracted.
For our first attempt we assume the user is in a car and implemented in Java a k-shortest path to find the route between them. I also used a short algorithm to find the nearest node to a user's present and desired location, which while not perfect, works neatly for the level we desire to achieve. And it's working really well, the routes given over to all test maps are always valid and generally fast, a few times even optimal.
The results are returned to an ArrayList of Nodes(id,ref,long,lat).

What we now want is to be able to input the starting-node,finishing-node and all the routing nodes as a single road in a map view in a web page.
Our general idea is that the user will be able to click two points at the map , and a red line will be drawn along the nodes-ways our Java class has returned.

I have tried Leaflet and JavaScript, have only managed to center the user's desired map and zoom level, as well as a central point, but the line drawing has proven problematic for more than 2 nodes, either failing to display entirely or being severly out of road or in wild shapes. This has lead me to think I am taking an entirely wrong approach.

Could anyone give me a suggestion as to what resources I should be looking at?

As for the code, I have to work off my head now. I seem to be missing something right now, but the general idea was as follows for the prototype:

var map;
var ajaxRequest;
var plotlist;
var plotlayers=[];

function initmap() {
    map = new L.Map('map');
    var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var osmAttrib='Map data © OpenStreetMap contributors';
    var osm = new L.TileLayer(osmUrl, {minZoom: 12, maxZoom: 15, attribution: osmAttrib});      

    map.setView(new L.LatLng(37.929, 23.6975),14);
    map.addLayer(osm);

    var roadLayer = new OpenLayers.Layer.Vector("Roads"); 
                        
    map.addControl(new OpenLayers.Control.DrawFeature(roadLayer, OpenLayers.Handler.Path));                                     

   var nodes = new Array(
      new OpenLayers.Geometry.Point(37.92, 23.69),
      new OpenLayers.Geometry.Point(37.93, 23.70),
      new OpenLayers.Geometry.Point(37.92, 23.70) 
);

var roadLine= new OpenLayers.Geometry.LineString(nodes);
  
var roadStyle = { 
  strokeColor: '#0000ff', 
  strokeOpacity: 0.5,
  strokeWidth: 5
};
var drawnLine = new OpenLayers.Feature.Vector(roadLine, null, roadStyle);
lineLayer.addFeatures([drawnLine]);
map.addLayer(roadLayer);
}

The array of Geometry points is the Array that is returned by the Algorithm, but for the example I used a few static points. In the actual code, the line is returned severly out of bounds for a few nodes, while it is not returned at all after the nodes increase. However for 2-3 nodes it is working correctly. That's why I assume my approach is bad.

Best Answer

You are using Leaflet and OpenLayers simultaneously.

The actual problem is that the map is in Leaflet and the line is in OpenLayers.

the solution:

  • use an OpenLayers map

OR

  • use Leaflet polyline for line.
Related Question