I am experimenting with d3.js and I have a map of the world with points that represent various cities. I would like to draw straight(ish) lines between the cities which I am doing using a LineString and d3.geo.path(). For some reason some of the lines aren't direct to the destination as you can see in the following block where the line from Europe to one of the Pacific islands creates an arc.
http://bl.ocks.org/whatsthebeef/6360703
The problem seems to occur where the line goes off one side of the map and on the other. I interpreted a part of the documentation to say that the line is drawn clockwise so I have tried switching the order of the points but it remains the same.
I am looking for something more like this
http://mbostock.github.io/d3/talk/20111116/airports.html
I can see in this example mbostock is using greatArc but it also says in the documentation this isn't necessary and there is no documentation on big arc anyway as it seems to have been deprecated.
Any ideas how to prevent this arcing?
To draw a straight line use:
d3.svg.line()
You will have to convert your coordinates using whatever projection you are using
var trcoords_o = projection(r.coordinates[0]);
var trcoords_d = projection(r.coordinates[1]);
This also doesn't seem to allow you to draw a line which leaves one side of the map and come in the other.
Related
I am working on an application in OpenLayers which allows users to draw polylines and modify them.
For sake of presentation when the user draws across the dateline, I have split the polyline into two halves and added it to map as a MultiPolyline (MultiLineString) in OpenLayers.
The problem is when the user tries to modify the point on the dateline, the line can be observed as split on the map to the user.
Which should not happen. When a user tries to modify the point on the dateline, it should be seen as a complete line not split at any instance.
To see the problem draw a polyline across the dateline and try to modify the dateline point (180° longitude). Here is a link to my code dateline modify problem
I was thinking about adding a vertex from the point being modified to the point on the dateline, is there a way to do that?
Also, I have observed that not all the polylines on my map are modifiable. I don't know why.
Please suggest me if I should refactor my code with a different approach.
Found this wonderful library to draw lines on webpage
http://www.walterzorn.de/en/jsgraphics/jsgraphics_e.htm
I actually worked fine for me on page for drawing the line.But, i want to show arrow at one end of the line. I could not find it the library [i think], so can anybody suggest me on the same.
You can still use this library. Just draw three lines with the same first coordinates, but different second coordinates, calculated using rotation and scale transformations.
I'm working on a project where we have some Highcharts graphs populated from database; one of them is an scatter graph and we need to surround the points placed on the outside area of the graph.
We need a graph like this but we need the area surrounding the outside points of the scatter; is there a easy way to do this with Highcharts?
We need it to work on IE11 (client's specs).
We can do it with a new polygon serie to make by getting it from codebehind or from database, but that may take too much development time and will slow down the queries. So we need to know if there is an easier way to do it via Highcharts or Javascript
Thanks in advance.
I am not very familiar with Highcharts, but i could not find such functionality in their API. However there is an easy algorithm to solve your problem.
All you need is to have an array containing the border elements and connect the points from this list like here.
Finding those points is not too hard. Compute the linear equation between two extreme points (like the one on the very top and very right). The resulting formula looks like f(x) = m*x + b
Now you check for all points within that x-range if their y-coordinate is higher than this line (or lower when doing it with the point on the very bottom). If so just add them to your border array and continue with the other extreme points.
What is the neatest (code design) and most per-formant way of getting an array of points for an arc (polyline), for the purpose of animating using Cesium's timer/clock.
Variable inputs include (start/end location), height (highest point) from earth's surface and number of points for drawing.
I'm currently using a polyline collection, so the answer should describe how to generate the points for existing polylines or convert to a different approach.
I would also need the arc (color) to fadeIn or fadeOut to opacity 0.
Multiple arcs may be added or removed from the collection per second. Each arc will have different start and end points
The start and end location should have height 0 (touching the earth).
(For Cesium version b26)
Just to be sure I understand your question, you have a bunch of polylines on a map and you want to get a bunch of data points along the line for use in animating the something along the path. I'll also assume you want geodesic lines/arcs for the polylines rather than the straight lines that are normally drawn on Mercator maps as geodesic lines actually follow the spatially accurate path of the polyline i.e. the same path a plane would take. If this is the case then take a look at this blog post: http://alastaira.wordpress.com/2011/06/27/geodesics-on-bing-maps-v7/ This post describes how to calculate data points along the geodesic path of a polyline.
CesiumJS includes several spline functions that can be used. One of the easier ones to use that an accomplish what you want with just three points is the Catmull-Rom Spline:
http://cesiumjs.org/Cesium/Build/Documentation/CatmullRomSpline.html
You will need to produce a middle point. To do this you can take a mean of the lat/lon coordinates and add a large height. Because of the spline used and the low number of points, it does end up looking a little egg shaped. The benefit to this is that you can ask the spline object for an arbitrary number of points, so the arc can be as smooth as you want. Just don't forget to add the first and last points to the array returned by the spline as those are omitted.
There are other types of splines, but I found the Catmull-Rom spline the easiest to use. You can search the CesiumJS documentation for some of the other included splines.
I've been looking into the same thing (minus the time aspect) and I found Cesium.EllipsoidGeodesic(start, end, ellipsoid), which allows you to get points at fractions of the path. It seems to me that you can choose the fraction based on the distance and calculate regular points using the result.
https://cesiumjs.org/Cesium/Build/Documentation/EllipsoidGeodesic.html
I haven't tried it yet, but it's on my list of things to do.
I'm working on a maps based application and at the moment want to do the following. I have two coordinates a start point and an end point and can draw a line between those points on a map. However what I want to do is to be able to get a list of all countries on the map that the line passes through. I was wondering if this can be done using google maps. I've looked at a number of options but can't get around the way to get this done - how do I do this?
you could check at various points of the line for the country it's in with:
pOfLine.AddressDetails.Country.CountryName