[GIS] leaflet – Drawing line following the road

cjavascriptleafletlinestringroad

Short version:
What I wish to be able to do is drawing a polyline along part of a road. In that way marking certain houses, along this road.

Long Version:
I have several houses that I wish to mark using a polyline. This polyline needs to follow the road. Meaning that when it road turns so does the polyline. I already have the Latitude and Longitude for every house that needs to be marked. What I have been trying so far is to look up these addresses by using NavEngine by CloudMade Using the first house on the road, and the last house on the road. Then marking all the houses that are left on the road to be way points. The reason I have done this is if the road splits but does not change the name of the road, it would not mark the addresses that are on the road then. So by using waypoints I hope to hit all houses on the road.

This result I am getting back as a JSON format I then split this up, so I only have the route_geometry. The result of this looks like this:

[ [ 55.46814, 8.4648 ], [ 55.46814, 8.4648 ], [ 55.468109, 8.46511 ], [ 55.468102, 8.46523 ], [ 55.468071, 8.46554 ], [ 55.46806, 8.46559 ], [ 55.468071, 8.46589 ], [ 55.46843, 8.46834 ], [ 55.468071, 8.46589 ], [ 55.46806, 8.46559 ], [ 55.468079, 8.46543 ], [ 55.468182, 8.46444 ], [ 55.46806, 8.46559 ], [ 55.468071, 8.46589 ], [ 55.468071, 8.46594 ], [ 55.46843, 8.46834 ], [ 55.468071, 8.46589 ], [ 55.46806, 8.46559 ], [ 55.468071, 8.46557 ], [ 55.468182, 8.46444 ], [ 55.46806, 8.46559 ], [ 55.468071, 8.46589 ], [ 55.468102, 8.46611 ], [ 55.46843, 8.46834 ], [ 55.468281, 8.46844 ], [ 55.467838, 8.46846 ], [ 55.46751, 8.46621 ], [ 55.467461, 8.46587 ], [ 55.467541, 8.46433 ], [ 55.468182, 8.46444 ], [ 55.46806, 8.46559 ], [ 55.468071, 8.46589 ], [ 55.468128, 8.46634 ], [ 55.46843, 8.46834 ], [ 55.468281, 8.46844 ], [ 55.467838, 8.46846 ], [ 55.467602, 8.46684 ], [ 55.467461, 8.46587 ], [ 55.467541, 8.46433 ], [ 55.468182, 8.46444 ], [ 55.46806, 8.46559 ], [ 55.468071, 8.46589 ], [ 55.468159, 8.46651 ], [ 55.46843, 8.46834 ], [ 55.468281, 8.46844 ], [ 55.467838, 8.46846 ], [ 55.46769, 8.46748 ], [ 55.467461, 8.46587 ], [ 55.467541, 8.46433 ], [ 55.468182, 8.46444 ], [ 55.46806, 8.46559 ], [ 55.468071, 8.46589 ], [ 55.468189, 8.46672 ], [ 55.46843, 8.46834 ], [ 55.468281, 8.46844 ], [ 55.467838, 8.46846 ], [ 55.467781, 8.46811 ], [ 55.467461, 8.46587 ], [ 55.467541, 8.46433 ], [ 55.468182, 8.46444 ], [ 55.46806, 8.46559 ], [ 55.468071, 8.46589 ], [ 55.46843, 8.46834 ], [ 55.468521, 8.46898 ], [ 55.468609, 8.46958 ], [ 55.468681, 8.47012 ], [ 55.46867, 8.47027 ], [ 55.468681, 8.47012 ], [ 55.468472, 8.46858 ], [ 55.46843, 8.46834 ], [ 55.468491, 8.46879 ], [ 55.468529, 8.46904 ], [ 55.468559, 8.46925 ], [ 55.46859, 8.4695 ], [ 55.46859, 8.4695 ] ]

Now my plan was just to take these points and draw a polyline though all of them, and thereby creating the wanted result. But this does not work! The result I am getting back is a line that breaks up and goes over itself several times.

Now my question to you is if I am on my the right track, or have am I making it much harder then it really is?

Thank you for taking you time to read all this. If you need any more information please let me know.

EDIT:
Also if you it can help, the page is coded in ASP.net with c# for server side code. And Javascript for the map…
I am using as mention above Leaflet as API and OSM for the map data..

Updated:
Still stuck with this problem..

What I am trying to get is something kinda like this. But instead of having to click too click each of them to get it to load the road. I want to have it do this when the page load. I know that there might be performance issues.. But for now just ignore that 😉

Hope this might explain it a little better…

Best Answer

There are several services that will sell you the roads data for your region.

You can download the roads and ways data for free from OpenStreetMap if there is data available for your geographic area. You can get the data in XML format and use it for your routing.

I did this, for example, to create a map of all the roads in my county. Just follow the instructions on the website to choose your region and download the data. Then it is a simple matter to use jQuery or some server-side code to navigate the XML data and extract the routes you need.

Related Question