Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Along with a friend, 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 Open Street Maps 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.

How do you propose we do this?

I have tried leaflet and js, 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 please give me a suggestion as to what resources I should be looking at?
Thank you.

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}{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);

    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);

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.

share|improve this question
On second though, accomplish which of the two tasks? The routing algorithm or the open layers? If it is the first, then yes it is ready and returns the data in whatever form we want it to (coordinates, nodeids,etc...). If it is the second, I do not think my "piece of code" can actually be called that, since it fails miserably. Either way, they are both in office computers with disabled usb and no internet access, however if they are that critical I can go and copy by hand tomorrow if needed. – Alfonso James Hannibal Jun 4 '13 at 18:04
up vote 1 down vote accepted

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 a OpenLayers map


  • use Leaflet polyline for line.
share|improve this answer
Thank you, though I have actually found this myself more than two months ago. It's indeed the solution, as that was what I did myself. The project has been finished since end of June, yet I hope more people can benefit from this advice so I will choose it as an answer. – Alfonso James Hannibal Aug 28 '13 at 18:16

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.