springmeyer/arc.js

Denver to Kuala-Lumpur with GreatCircle

zuf opened this issue · 8 comments

zuf commented

Hello!

I found one annoying issue (or unwanted feature) with GreatCircle.Arc().

For example if I want to draw route (with leaflet) from Denver to Kuala-Lumpur ([39.740009, -104.992297] to [3.104769, 101.691994]) with 25 points: new arc.GreatCircle(from, to, properties).Arc(25)
I get this picture:

arc-25

But if I try to increase points amount (up to 30 or more) then I get this one:
new arc.GreatCircle(from, to, properties).Arc(30)
arc-30

Can you test and see if it works at http://dbsgeo.com/arc.js/? It uses an offset of 20: https://github.com/springmeyer/arc.js#arc-options which may help you.

zuf commented

Thank you for advice. When I searched which part of code gives this results I already tried value of 20 and some other values (but not too much :)) and it not helps for me.

I already found workaround for myself (use 25 route points). But I think that will be very nice If arc.js will split route more correctly around dateline.

I understand that deal with code ported from OGR may be not very fun. And in this case you can just close this issue :)

Can you share your code?

zuf commented

In my code I have lots of other uninteresting stuff.

Essential part looks like this one (in coffeescript):

great_ark_latlngs = (latlon_from, lat_lon_to, npoints = 25) ->
    try
      from = {x: latlon_from.lng, y: latlon_from.lat}
      to = {x: lat_lon_to.lng, y:lat_lon_to.lat}

      properties =
        start: ''+from.lon+','+from.lat
        end: ''+to.lon+','+to.lat
      greatCircle = new arc.GreatCircle(from, to, properties)
    catch e
      alert(e.message)
      return
    gc = greatCircle.Arc(npoints)
    # gc = greatCircle.Arc(npoints, {offset: 20}) # I also tried some variants like this
    return L.GeoJSON.coordsToLatLngs(gc.json().geometry.coordinates)



# ...

# draw polyline from function above with this coords:
x = great_ark_latlngs [39.740009, -104.992297], [3.104769, 101.691994]

# x =>  [{"lat":39.740009,"lng":-104.992297},{"lat":44.048445632490534,"lng":-109.46637494556755},{"lat":48.15534784128178,"lng":-114.62518417357148},{"lat":51.992172884739645,"lng":-120.6497305482252},{"lat":55.46597592906818,"lng":-127.74437592069185},{"lat":58.454173977425334,"lng":-136.10287550740455},{"lat":60.80528395997642,"lng":-145.829328938938},{"lat":62.354797636410595,"lng":-156.8109627282446},{"lat":62.9636200217474,"lng":-168.60635562195182},{"lat":62.56870702499018,"lng":179.51225937951025},{"lat":61.21154320802021,"lng":168.30643168390802},{"lat":59.01901562066295,"lng":158.29052625369405},{"lat":56.15417546741548,"lng":149.64147457451602},{"lat":52.773362239717024,"lng":142.2899722332405},{"lat":49.005789885971076,"lng":136.0530048095791},{"lat":44.950430748370934,"lng":130.72438591047617},{"lat":40.6805441592121,"lng":126.11677203595747},{"lat":36.2498365866583,"lng":122.0742423604163},{"lat":31.69787212193715,"lng":118.47170176137344},{"lat":27.05420113820318,"lng":115.20987083586444},{"lat":22.34133975055433,"lng":112.20962463413953},{"lat":17.576881144407825,"lng":109.4069829131645},{"lat":12.774996265044498,"lng":106.74902838787935},{"lat":7.947520643189714,"lng":104.19066089934262},{"lat":3.104769,"lng":101.691994}]

L.polyline(x, line_style).addTo(map)

If this is really needed I can create simplified sample for this issue.

I'm still not able to replicate the problem. Can you make sure you are running the latest version of the code and then tell me the exact start and end coordinates you are using and the exact output line you think is incorrect and the exact code you used to produce it?

zuf commented

Sorry for late answer.
Here excerpt of my code related to this issue:
https://dl.dropboxusercontent.com/u/59794362/arc-js/map.zip
It looks dirty and converted from coffee script, sorry for that.

Look at map.js file at line 8.

I will try simplify this code today.

@zuf: looking at your code I think the problem is this line:

var result = L.GeoJSON.coordsToLatLngs(gc.json().geometry.coordinates);

If I put this line before it:

console.log(JSON.stringify(gc.json()))

And paste the output to http://geojson.io/ it looks correct: https://gist.github.com/anonymous/effbe3d6c9602e2833c6.

So, this is some misusage of the leaflet api or a bug in your code, but not a problem with Arc.js. So, I'm closing this: please email the leaflet users list for additional help.

zuf commented

Ok, thank you!