springmeyer / arc.js Goto Github PK

Is it possible to provide decimal precision as an option to generator.Arc? I'm working on optimizing a workflow that requires drawing a lot of lines. One of the optimizations I am making is to limit the precision of coordinate values (suggested by MapBox under the section Cleaning up your data https://docs.mapbox.com/help/troubleshooting/working-with-large-geojson-data/).

Trimming the precision at the same time that the coordinates are generated would save me the trouble of having to iterate through the coordinates after

Thanks

Try to click on Canada first and then click on Australia, but not in the right side, click on the left side of the map. So, you have the closest distance from Canada to Australia, the route that an airplane follows, and check what happened to the line! The line stops and goes back!

It would be nice if the third argument in GreatCircle() had an option to pass in information that's attributed to each LineString. Simply passing "Some name" against a large .csv file just adds this value to the entire file and not a single unique line. for .csv files that have more than just lat long values but other information attributed to it - it would be awesome to retain this in the newly created geojson file.

I just noticed that the demo site works for me in Chrome, but not Safari (on a Mac).

One point is able to be plotted, but not a second (so no arc is drawn). The error in the console is:

Error: Invalid LatLng object: (NaN, NaN)

Don't have time to debug this right now, so just filing the ticket as a reminder in case I find time in the future to debug, or others do.

very close line,for example [114.376688,30.4619172],[113.844623,30.237268],i use arcGenerator.Arc(100,{offset:10}) to produce a line, it seem like a straight line, it has not arc, so how do i set these two argument that i can produce a arc line?
I am waiting for your reply,please.

While developing something that looks like an airline routes map with Leaflet.Arc plugin (that wraps arc.js), I noticed that certain arcs (e.g. Seattle - Abu Dhabi) seriously overflow the edges of the map. This makes perfect sense in a 3D Context where that line would go near the North Pole and would be geometrically correct. However, in a 2D context, I'd imagine it would make sense for arcs to stay within latitude bounds. Is that something worth considering?

If you click on Kentucky first and then click on China, the greater circle crosses the north pole, but the line is rendered across the top of the map and crosses itself.

Do you know of an algorithm that would render the polyline as more of an arc?

I would be more than happy to address the issue but I do not know where to start looking.

Example data: https://gist.github.com/2895824

Currently the demo page is broken because the Leaflet master API has GeoJSON class changed slightly (addGeoJSON method renamed to addData). The page includes Leaflet like this:

<script src="https://raw.github.com/CloudMade/Leaflet/master/dist/leaflet.js"></script>

This is an extremely bad practice as your code is always prone to breaking, as master branch is an in-progress development version. You should either link to stable version (e.g. with Leaflet CDN http://leaflet.cloudmade.com/download.html), or put the master version files into your repo and update manually.

Though great circle lines are defined by being the shortest distance between two points, I think this library could also allow users to draw geodesic lines.

I suggest adding a boolean property in Arc options called shortestPath. Default will be true and will produce normal great circle lines. False will draw a line from start point to end point in a west to east direction.

Seen on a Galaxy Tab 2 using the android browser, chrome on same device and all other browsers tested on other platforms all okay. Below is a line from Washington to London to flight path, the line is from the aircraft position to London as it fly's along the great circle path.

More than 50% of the time all looks good and the points are correct.

Longitudes for a bad line :-

-45.90075610539107
-64.1077399463533
-62.775115272399255
-61.415123196700044
-60.02749558462086
-58.61204288779067
-57.168663375242126
-55.69735253809121
-54.19821252306159
-52.67146142295045
-51.1174422253593
-49.53663119602385
-47.92964545146531
-46.29724945923666
-44.64036019464593
-42.96005068239715
-41.257551661831606
-39.53425113678797
-37.79169160642204
-36.03156482183506
-34.255703974406906
-32.4660732937163
-30.66475511328782
-28.853934547652727
-27.035882010135403
-25.212933882695825
-23.38747172226428
-21.561900447766607
-19.738625994600138
-17.92003294585486
-16.108462650563627
-14.30619231863985
-12.515415541315736
-10.738224627543923
-8.976595074748827
-7.232372410997091
-5.507261559897495
-3.802818794048498
-2.1204462618961593
-23.826829224833478

Hi, I'm using this code to do a small test, and it just displays a straight line. I notice that if I use coordinates far from each other(cross Atlantic), there is a VERY slight curve, but only just.
Is there anything that I'm doing wrong? If you can put these coordinates working, could you provide the most basic example on how you did it?
Thanks

//load_map.js
window.onload = onLoad

function onLoad(){
var map = L.map('map').setView([32.75,-16.97], 11)

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

var arc = L.Polyline.Arc([32.6936836, -16.7753468], [32.75, -16.97],
{
color: "red",
vertices: 200,
offset:10
}).addTo(map)
}

//index.html

     <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
     <!-- <script src="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.js"></script>   I tested with both files-->

     <script src='http://api.mapbox.com/mapbox.js/plugins/arc.js/v0.1.0/arc.js'></script>
     <script src='Leaflet.Arc.js'></script>
     <script src="load_map.js"></script>
</head>
<body>
    <div id="map"></div>
</body>

New url is https://edwilliams.org/avform.htm

Hi,

My name is Phil Lee, I'm a student at Brighton University studying Digital Games Production. My final year project is based on geolocation data visualisations. Your API is awesome just wanted to inform you of an error I have found.

I have noticed that if any of the start and end co-ordinates in a data set are exactly the same then 'leaflet-src.js' throws the error 'Uncaught Error: Invalid LatLng object: (NaN, NaN)'. I'm assuming this hasn't been noticed as most geolocation data sets do not have start and end co-ordinates that are exactly the same. For my use case I'll will strip out all the duplicates but it is a shame to see the whole data set fail on an uncaught error, especially with a data set of 30,000+. I would be interested to hear if you take any action on this.

Regards,
Phil Lee
[email protected] or [email protected]
Trainee Web Developer BBC News
Student at University Brighton

The version of this on npm isn't up-to-date with cross-dateline polylines - could you push an updated tag?

On https://www.mapbox.com/mapbox.js/example/v1.0.0/cross-date-line/ you'll notice the comment:

The coordinate -233.9 is technically invalid but Leaflet permits it because it can imply the direction of wrapping - to wrap in a direction, you can add or subtract 360 from the desired end coordinate

It would be nice if arc.js could generate lines with coordinates like that. If this is something you'd accept in a pull request let me know, I could possibly take a look at it but I can make no promises, my js is very weak.

Thanks,
Cody

sample gist: https://gist.github.com/xqin1/b38dd6ed9ae96174b96e
two points for Seattle and Beijing, China. The arc seems to break at dateline, but the second half is not drawn.

I am creating map using leaflet. I am able to draw solid curve line but could not draw dashed or dotted curve line.

Any leads would be appreciated

Currently, I do not see any way to perform an upside down arc. I have tried passing in a negative value to the constructor of the Arc prototype function, yet it just makes it a straight line. Is there any functionality for this currently?

Right now this package uses version 0.1.0, which is a bit out of date. I suggest updating the version so that the newer version will be available on NPM.

these days you don't need to maintain a gh-pages branch in order to wire up GitHub Pages.

if @springmeyer feels like giving me admin keys to this repo i'd be interested in making main the default branch and setting up branch protection rules to disable -f pushing, etc.

Leaflet expects a point and an options hash as parameters to the CircleMarker class. Currently the code provides this:

var circle = new L.CircleMarker(start, 2, circleOptions);

It should instead provide this:

var circle = new L.CircleMarker(start, circleOptions);

In README, it is said:

> line
{ properties: { name: 'Seattle to DC' },
  coords: 
   [ [ -122, 48.00000000000001 ],
     [ -112.06161978373486, 47.7241672604096 ],
     [ -102.38404317022653, 46.60813199882492 ],
     [ -93.22718895342909, 44.716217302635705 ],
     [ -84.74823988299501, 42.14415510795357 ],
     [ -77, 38.99999999999999 ] ],
  length: 6 }

This is not the case. There is a geometries object which is an array with one member which is an object containing cords and length properties as described above.

Dunno if the problem is in README or in the implementation.

Hi,

I was looking around to see if there is a way to color arcs in arc options, but I couldn't find it. Have I just missed it or would I be messing around with the js myself?

Thanks!

@springmeyer

I want to ping you on the international date line issue and see if there is a possible solution by using MultiLineStrings. Is it possible to create multiline strings when an arc crosses the date line?

Another issue with breaking into two lines is the gap that is formed between the two points that cross the date line. Is it also possible to create two points, along the arc, that would be just offset from the date line? So when the line is broken, create two points, at -179.99 and +179.99 at the appropriate latitude?

Example of a line: https://gist.github.com/39ab121a3e225c516885

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:

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)

Instead of:
$ npm install --save arc.js

README.md should read:
$ npm install --save arc

Alternatively, should you want to remain consistent with Bower, package.json name should be called arc.js and republished on NPM.

Thanks for the lib !

Your basemap (springmeyer.map-dn2wf053) appears to have gone missing!

Hi;
Sorry if its the wrong place to talk about this issue.

This link "Algorithms from http://williams.best.vwh.net/avform.htm#Intermediate" on your npm page is broken.

The link in the github page is right. (https://edwilliams.org/avform147.htm#Intermediate).

Arcs in high detail areas (within smaller countries) appear essentially as straight lines. Would be great to be able to curve these stylistically.

Hi all!

I was not able to visit the demo in https://

https://springmeyer.github.io/arc.js/

Having said that also in http:// I'm not sure everything is working. Are you aware of that? Thank you so much :)

I would like to use arc.js to draw a great circle on a map. To be able to use this in our project I need to know if the license your are releasing this under gives me the right to do that.

Please add the license to the github repository and mention the license in the README.

If have haven't decided yet on a license I am happy to help with that.